Stack
Next.js , Yarn berry, Tanstack Query, Recoil, React-Query ,MongoDB, Tailwind, vitest, Github, Swagger,mongoDB
패키지 매니저
막연히 npm이 가장 큰 패키지 생태계를 가지고 있다 생각해 주구장창 npm만써오던 나에게 yarn, pnpm등은 왜쓰는 걸까라는 궁금함이 있었다.
npm은 라이브러리를 찾는상황에서 계속 상위 디렉토리의 node_module을 탐색하는
비효율적인 의존성 문제, 유령 의존성등 여러 문제가 존재하였다는 사실을 알게 되었다.
yarn berry 를 도입하여 의존성을 개선해 줄 수 있다는 것을 알게되어 yarn berry로 패키지 매니저를 선택하게 되었다.
Jira + github 연동
현장실습을 통해 jira를 처음 사용해보았고 자동으로 브랜치 관리를 할 수 있어서 아주 간편했다.
혼자하는 프로젝트지만 브랜치를 시각화하고 자동화하기 위해 github에 연동후 자동화규칙을 설정해 주었다. 자동화 규칙에 특수문자 : 같은걸넣으면 오류가 발생하니 주의해야한다.
폴더구조
디버깅 시간을 줄이고 협업한다는 생각으로 css,handler함수에 대한 규칙을 세우고 진행했는데
폴더구조는 항상 고민인 부분인것 같다. next를 처음으로 개발하면서 가장먼저 고칠거는 src 폴더를 사용할거냐는 물음에 무조건 yes라는것이다. 가뜩이나 서버와 프론트가 공존하는 풀스택이라 폴더가 많이 생길 수 밖에없는데 늘어가는 폴더들을 볼때마다 탄식이 절로나왔다.
hook,util,test,types등의 파일을 분리하여 개발하였지만 다음 프로젝트에는 아래와같이 component안에 해당 파일을 두어개발 해볼까한다. 컴포넌트안에 관련된것을 로직을 두는것이 깔끔하고 ‘손닿는 곳에 두고 꺼내 사용하자는 말’이 나는 좀더 와닿는거같다.
배포와 SEO
Next로 fullstack 어플리케이션을 만들면서 배포와 seo작업을 해보는건 처음이였다.
openGraph,metatag,sitemap,robot.txt등을 추가해주었고 구글과 네이버에 검색엔진 등록작업을 해주었다. next.js개발팀에서 만들어준 Vercel을 통해 배포를 해주었는데 next팀이 만들어서그런가 절차가 아주간단하고 쉬웠다. 다음번에는 aws cloud s3 front를 통해 배포를 진행해봐야겠다.
선언형 ui
프로젝트를 다만든후 선언형 ui를 통한 코드분리를 통해 성공과 실패로직을 분리할 수 있다는걸 알게되고 react-query의 suspense옵션을 사용해 코드를 리팩토링 하려하였다.
react-query 는 v5부터 suspense옵션이아니라 useSuspenseQuery를 사용해야했고 적용후 Suspense 컴포넌트로 감싸주었더니 무한렌더링, fetch error 404 가 발생하였다. 이를 다시 해결하는 과정에서 next의 1차적인 server렌더링때 Suspense 컴포넌트를 읽을 수 없는 오류가 발생한다는 것을 알게되었고 next/dynamic 처리를 통해 해결 할 수 있음을 알 수 있었다. 다음에는 처음부터 선언형 ui를 생각하고 프로젝트를 설계해봐야겠다.
swagger api + mongoDB
next api 를 활용해 api를 만드는 과정에서 swagger api를 나름 힘들게 만들었지만 막상 프론트작업을하며 api연동 테스트 할때는 thunderclient만 사용했던것 같다.
또 mongoDB를 직접 연동해 사용하면서 mySQL과 다르게 id값이 12byte로 표현되어있는것을 알 수 있었다.서버와 api통신을 할때 개발자가 암호화 해서 주는줄 알았는데 db쪽 차이였다는걸 알 수 있었다.
