NodeBird 복습/서버사이드렌더링

react nodeBird 3-2 (SWR, Moment, next 빌드)

맑쇼 2021. 5. 31. 17:46
반응형
반응형

SWR  

profile.js

  dispatch로 인해 코드량이 많아진다면 SWR를 이용해서 코드량을 줄일 수 있습니다. 자동으로 data 값과 error값이 들어가 있고, 노드버드는 axios를 이용하고 있으므로 fetcher를 이용할 수 있습니다. 

SWR 홈페이지에서 발췌.

Moment

moment.js를 적용한 모습.
moment, date-fns, dayjs 순

  moment는 날짜를 사용할 수 있는 라이브러리입니다. moment, date-fns, dayjs 등이 많이 사용됩니다. 

  • moment: 가장 많이 사용되는 라이브러리.
  • date-fns: moment가 불변성을 지키기때문에 사용하기 까다롭기에 다음으로 많이 사용되는 라이브러리.
  • dayjs: 데이터용량이 제일 적기 때문에 사용됨.

 

components/PostCard.js

  리트윗하거나 게시글이 작성될 때 작성 날짜가 게시글의 오른쪽에 나오게 할 것이므로 위와 같이 작성해줍니다. 

moment 홈페이지에서 발췌.

  다양한 표현 메서드들이 있으니 format, fromNow 등을 찾아서 사용하시면 됩니다. 

next build

  코드의 변경이 있으면 Github에 push하고, CI/CD 도구가 코드에 대한 Test, Build를 해줍니다. CI/CD 도구는 오류가 생기면 오류코드를 내보주고, 이상이 없다면 배포를 해줍니다. 

  • λ(lambda): getServersideProps 즉 서버사이드 렌더링이 적용된 파일.
  • ●: getStaticProps가 적용된 파일.
  • ○: 서버사이드렌더링(SSR)이 아닌 정적인 파일.
  • First Load JS: 페이지에 방문했을 때 다운로드되는 파일의 용량.

  웹페이지들이 1MB를 넘어가면 안되기 때문에 @next/bundle-analyzer를 이용하여 파일을 분석합니다. 

  커스텀 웹팩

next.js 홈페이지에서 발췌.
front/next.config.js
bundleAnalyzer 홈페이지에서 발췌.

  next.js는 커스텀 웹팩도 지원합니다. next.config.js 파일을 프로젝트의 제일 상위 디렉토리(폴더)에 생성해야됩니다. 또한, BundleAnalyzer도 적용방법이 홈페이지에 나와있으므로 확인후 사용하시면 됩니다.

cross-env

 

process.env 한번에 사용
cross-env 사용

  process.env를 dotenv를 이용하듯이 할 수 있지만 next에서는 script에 써서 표현할 수 있습니다. 하지만, 단점이 windows에서는 사용할 수 없습니다. 따라서, cross-env 라이브러리를 통해 이 단점을 해결할 수 있고, script에 작성해주시기만 하면 됩니다. 

참고자료

반응형