react nodeBird 3-2 (SWR, Moment, next 빌드)
SWR
dispatch로 인해 코드량이 많아진다면 SWR를 이용해서 코드량을 줄일 수 있습니다. 자동으로 data 값과 error값이 들어가 있고, 노드버드는 axios를 이용하고 있으므로 fetcher를 이용할 수 있습니다.
Moment
moment는 날짜를 사용할 수 있는 라이브러리입니다. moment, date-fns, dayjs 등이 많이 사용됩니다.
- moment: 가장 많이 사용되는 라이브러리.
- date-fns: moment가 불변성을 지키기때문에 사용하기 까다롭기에 다음으로 많이 사용되는 라이브러리.
- dayjs: 데이터용량이 제일 적기 때문에 사용됨.
리트윗하거나 게시글이 작성될 때 작성 날짜가 게시글의 오른쪽에 나오게 할 것이므로 위와 같이 작성해줍니다.
다양한 표현 메서드들이 있으니 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는 커스텀 웹팩도 지원합니다. next.config.js 파일을 프로젝트의 제일 상위 디렉토리(폴더)에 생성해야됩니다. 또한, BundleAnalyzer도 적용방법이 홈페이지에 나와있으므로 확인후 사용하시면 됩니다.
cross-env
process.env를 dotenv를 이용하듯이 할 수 있지만 next에서는 script에 써서 표현할 수 있습니다. 하지만, 단점이 windows에서는 사용할 수 없습니다. 따라서, cross-env 라이브러리를 통해 이 단점을 해결할 수 있고, script에 작성해주시기만 하면 됩니다.