회사 일이 바쁘다는 핑계로 지금까지 작업한 부분을 정리를 하지 않아 와서
누군가 내가 지금까지 뭘 해왔느냐고 물었을 때 보여줄 만한 것이 없었다.
또한, 트러블 슈팅들도 해결하고 넘어가서 제대로 기억도 못 하고 넘어간 적이 한 두 번이 아니다.
시도해보고 싶었던 기술들도 바쁘다고 넘어가서 발전이 더디다고 느껴졌다.
반성하며 포트폴리오를 만들며 지금까지 시도해온 기술들을 적용하고, 여러 기술도 도입해보며 정리하려 한다.
기존 사용 기술 스택
- Next.js(13, 14), React(18)
page router
- styled-components
- recoil
시도해볼 기술 스택
- Next.js(14), React(18)
app router
- tailwind css, story book
- recoil
- test code 작성
- jest/vitest
- CI/CD 배포
회사 프로젝트에서 SEO가 중요하여 Next.js를 무작정 도입해서 사용했는데
SSR도 제대로 사용하지 않고 껍데기로만 사용하는 날 발견했다.
그래서 Next 13버전부터 도입된 app router을 프로젝트 리뉴얼 하면서 도입했는데 그 과정을 기록하려 한다.
스타일은 항상 styled-components를 사용해왔는데, app router를 도입하면서 server component를 사용하려니 CSS-in-JS라서 잘 맞지 않다고 느꼈다.
또 폴더와 파일 수를 늘리기 싫어 한 파일 내에 script와 CSS를 포함하여 사용했는데
server component를 적용하니 SSR을 위한 파일, style을 위한 파일, CSR을 위한 파일 등 최소 3개 이상으로 늘어나게 되었다.
그래서 SSR을 지원하는 tailwind를 도입해보려 한다.
test code도 매번 해야지 했는데 프로젝트 오픈에 급급해서 항상 뒷순위로 미뤄 영원히 시도해보지 못했다. 아쉬운 마음에 이번 토이 프로젝트에 도입해보려 한다.
CI/CD도 항상 인프라/서버 담당자분들이 있어서 내가 직접 구축할 일이 없었다. 그래서 나중에 배워봐야지 하고 있었는데 새로 들어온 프론트 신입분이 할 줄 아시는 걸 보고 더는 미루면 안 되겠다고 반성해서 시도해보려 한다.
