스파르타코딩클럽 내일배움캠프 87일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 검색창 UI 수정
3. 목업 이미지 제작
4. og 태그 이미지 제작
5. 메타 태그 추가
6. dev 브랜치 재배포 및 유저 피드백 구글폼 작성

 

 

 

 

 

 

 

 

검색창 UI 완료

 어제에 이어서 디자이너님이 디자인해주신 대로 UI를 아예 바꿨다. 어제는 어떤 식으로 해야 하나 감이 안 잡혔는데 하나씩 고치면서 하다 보니까 그래도 그대로 잘 나올 수 있어서 다행이다. 디자이너님이 디자인 해주신 페이지에는 검색 버튼이 없는데, 이게 추가로 생겨서 이것만 아래에 추가해주고 나서 UI 수정을 완료했다.

 

 어제 반응형까지는 해둬서 모바일 버전에서 어떤 식으로 보이는지 체크만 했다. 나중에 최종으로 배포해보고 다시 수정할 수도 있지만...우선은 만족스럽게(?) 마무리되었다 ㅋㅋㅋ

 

 이런 식으로 조금 더 깔끔하게 바뀌었다. 확실히 웹페이지가 딱히 튀는 색깔 없이 블랙과 화이트로만 지정했더니 훨씬 깔끔해보인다. 나만의 생각일 수도 있지만...?ㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

favicon 추가, 목업 이미지 제작

 디자이너님이 favicon 아이콘을 만들어주셔서 그걸 적용했다. 오랜만에 favicon 적용하려니까 어디서 해야 할지 약간 정지 상태가 왔었는데, 다행히 금방 생각해냈다. 이렇게 또 복습의 중요성을 깨닫게 되고...ㅋㅋㅋ 

 

 화면 크기가 작아지면 NIL이 좀 좁이보이는데, 전체 페이지에서 보면 이런 식으로 되어 있다. 사실 프로젝트하면서 favicon이나 title 부분을 수정한 적이 없는 것 같은데 이런 기본적인 것도 수정하지 않았다니, 새삼스럽다. 최종 프로젝트라서 하나하나 생각하는 건가 싶었는데 이런 사소한 것들은 했어야 하는데 싶고. 여튼 참 지금까지 너무 바쁘게 프로젝트에 참여했나 싶다. 그래도 뭐 최종 프로젝트는 이러지 않으니까 다행이다.

 

 그 이후에는 목업 이미지를 대충 제작해보았다. 디자이너님이 목업 이미지를 올려주셔서 그걸로 조합해야 했었는데 포토샵을 지웠다는 게 좀 아쉽다. 이전에 학교 다닐 때랑 현장 실습 할 때는 포토샵 자주 했던 것 같은데 금방 안했다고 또 버벅거렸다. 아무래도 무료 버전을 사용하다 보니까 제대로 마무리가 안되어서 내가 하고 마무리는 시윤님이 해주시기로 했다.

 

 목업 이미지도 만들 줄이야...ㅋㅋㅋㅋ 유저 피드백을 받기 위해서 바쁘게 프로젝트 하다보니까 이런 것도 해보고 좋은 경험 같다. 나중에 회사가도 하려나? 아닐 것 같긴 하지만, 오랜만에 포토샵 만지니까 재밌긴 하다.

 

 

 

 

 

 

 

메타 태그 (react-helmet-async 라이브러리 적용)

 지금까지는 index.html 안에서 메타 태그를 수정했었는데 저녁에 튜터님이 오셔서 새로운 라이브러리를 알려 주셨다. 리액트는 SPA라 리액트로 만들어진 사이트를 읽을 때 index.html만 읽게 된다. 그래서 각각 페이지의 정보를 읽지 못한다는 단점이 있는데 이를 극복하기 위해 react-helmet 라이브러리를 쓰면 된다. 이 라이브러리를 사용하면 페이지별 메타태그를 다르게 적용할 수 있었다.

 

 그런데 검색하다 보니까 react-helmet-async 라는 라이브러리가 더 적용하면 효율 적일 것 같아서 react-helmet-asnyc 라이브러리를 적용했다.

 

https://www.npmjs.com/package/@types/react-helmet-async

@types/react-helmet-async

우리는 타입스크립트로 썼기 때문에 위의 링크는 타입스크립트 버전으로 바로가는 링크이다.

 

 공식 문서에 나온대로 우선 설치하면 된다. (설치하기 전에 index.html 파일에 존재하는 메타 태그는 지워주는 것이 좋다.중복 방지를 위함이다)

$ yarn add react-helmet-async
$ npm install react-helmet-async

// typescript 버전
$ npm i @types/react-helmet-async

 

  설치 한 이후에는 index.tsx 파일에서 <App />를 <HelmetProvider />로 감싸준다. 왜냐면 Helmet 컴포넌트는 HelmetProvider 컴포넌트 안에 존재해야 하기 때문이다.

 

// index.tsx

import { HelmetProvider } from 'react-helmet-async';

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <ApiProvider api={courseApi}>
    <Provider store={store}>
      <HelmetProvider>
        <App />
      </HelmetProvider>
    </Provider>
  </ApiProvider>
);

 우리 웹페이지가 amplitude를 사용하고 있어서 그 사이에 <HelmetProvider> 컴포넌트를 넣었다.

 

그 이후에 페이지 별 메타 태그는 각 페이지 컴포넌트 파일 안에 <Helmet> 태그 안에 정의할 수 있다. react-helmet-async에서는 가장 깊숙한 곳에 위치한 Helmet이 우선권을 가진다. 여러번 정의하는 것보다는 중복되기 때문에 하나의 파일로 관리하는 게 낫다고 판단해 utils 폴더 안에 MetaTag.tsx 파일을 만들었다.

 

import { Helmet } from 'react-helmet-async';

const MetaTag = (props: any) => {
    return (
      <Helmet>
        <title>{props.title}</title>

        <meta name="description" content={props.description} />
        <meta name="keywords" content={props.keywords} />

        <meta property="og:type" content="website" />
        <meta property="og:title" content={props.title} />
        <meta property="og:site_name" content={props.title} />
        <meta property="og:description" content={props.description} />
        <meta property="og:image" content={props.imgsrc} />
        <meta property="og:url" content={props.url} />

        <meta name="twitter:title" content={props.title} />
        <meta name="twitter:description" content={props.description} />
        <meta name="twitter:image" content={props.imgsrc} />

        <link rel="canonical" href={props.url} />
      </Helmet>
    );
};

export default MetaTag;

 props로 받아온 데이터의 title, description 등을 나타낼 수가 있었다. 그런데 웹페이지에서 description을 받아오지 못하고 계속 undefined로 뜨길래 그냥 하나로 지정해주었다. 그리고 혹시나 싶어서 이미지도 따로 지정해주었다. 이전에 만들어둔 og 태그 이미지를 추가해서 넣어주었다.

 

 localhost 환경에서는 메타 태그가 제대로 적용되었는지 알 수가 없었는데, 크롬 확장 프로그램 하나를 사용하면 제대로 잘 적용이 된다.

 

https://chrome.google.com/webstore/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn/related?hl=ko 

Localhost Open Graph Checker

 

 위의 확장 프로그램을 설치하고 localhost 환경에서 적용해보면 약 15분동안 사용할 수 있는 웹 링크가 주어진다. 그 링크를 복사해서 메타 태그를 확인할 수 가 있다.

 

 공유하지 않고도 사용할 수 있는 사이트가 있어서 이걸 이용했다.

 

https://www.opengraph.xyz/

OpenGraph - Preview Social Media Share and Generate Metatags

 

 위의 사이트에 들어가서 임시로 받은 웹링크를 복사하고 check website 버튼을 누르면 preview로 여러 SNS에서 공유ㅣ되는 모습을 볼 수가 있다.

 

 우리 프로젝트는 이런 식으로 보인다. 색깔이 좀 쨍한가 싶은데 그래도 귀엽게 된 것 같아서 만족스럽다. 저녁에 새로운 라이브러리를 알게 되어서 급하게 검색하고 적용하느라 맞나 싶었는데 그래도 og 태그가 잘 적용되어서 다행이다.

 

 

 

 

 

 

 

재배포 및 유저 피드백 구글폼 홍보

 오후 스크럼을 한 뒤에 유저 피드백을 받기 위한 구글폼을 제작했다. 다른 사람들의 구글폼을 훔쳐보면서(?) 우리만의 질문 리스트를 만들어서 제작했다. 사실 구글폼을 직접 만들어보는 게 처음이라서 많이 어렵나, 싶었는데 다행히 구글링하니까 바로 잘 나와서 순조롭게 질문들을 작성했다.

 

 작성은 이미 했는데 재배포를 해야 했고 (vercel에서 업데이트된 게 반영이 잘 안되었다) 아직 UI가 수정 안된 부분들이 많아서 재배포는 10시가 넘어서 진행되었다. 나는 유저 피드백 구글폼이랑 깃허브 링크, 배포한 주소까지 내가 속한 디스코드와 오픈 채팅방에 전할 예정이다. 거기는 실제 현업에 계신 분들이 많으니까 좀 더 좋은 피드백을 받을 수 있을 것 같아서 기대 중이다.

 

 사실 유저 피드백을 받고 난 뒤에 적용할 시간이 있으려나 싶긴 하다. 당장 다음주 수요일에 1차 발표 영상을 제출하고 협력사에 제출할 자료를 만들어야 해서 실질적으로 프로젝트를 수정할 시간이 얼마 남지 않았는데...약간 휘몰아치듯 최종 프로젝트 일정이 계속 되어서 그런가 뭔가 되게 쫓기는 기분이다 ㅋㅋㅋ

 

 다시 새배포한 링크!

https://nilili-chi.vercel.app/

NILILI

 

 배포한 뒤에 다시 kakao developer에 링크를 추가하고, firebase에도 링크를 추가해줬다. 늘 배포하지맨날 까먹고 오류난 줄 알고 철렁하는 거 언제까지...?ㅋㅋㅋㅋ 일단 오늘은 또 했다. 최종 발표는 그러지 말아야지...

 

 이제 TIL 작성하고 바로 피드백 받으러 오픈채팅방에 뿌려야겠다. 유저 피드백...받기 쬐금 두렵기도? ㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

 

짧은 일기

 오늘 오전에 최종 프로젝트 관련 발제를 했는데, 생각보다 더 빠듯하다. 2주가 짧을 거라고 예상했지만, 당장 다음주 월요일까지 최종적으로 만들고 그 뒤로는 발표 준비하기도 벅찰 것 같다. 바쁘다 바빠...그래도 유저 피드백 받고 나서는 좀 괜찮지 않을까...?! 최적화도 해야 하고...여튼 그래도 재배포하고 나니까 우리 프로젝트가 점점 더 괜찮아지는 것 같다.

 

 오픈채팅방에 뿌렸는데...쫌 떨리네...어떤 피드백을 받을까....ㅎ 뭐든 피드백 받는 것도 경험이니까. 아무튼 괜히 일정이 빠듯해보여서 좀 정신없어졌다. 주말에도 공부 열심히 해야 할듯 하다..ㅋㅋㅋㅋㅋㅋ