프로젝트 마무리 회고

원래 일찍 시작했었던 프로젝트를 다시 새로나온 NEXT.JS 13 버전과 더불어 공부한 퍼블리싱 지식으로 아예 새롭게 시작했다.
시작하면서 팀원을 한명 구하기도 했는데 진행 중간에 개인 사정으로 빠지게 되어 결국 1인 개발이 되었다.
Next.js와 react, mongoDB를 사용해서 프로젝트 만든 후 vercel을 통해 배포 했는데 처음 시작할 때 잡은 볼륨을 인원이 줄어들다보니 그대로 유지하기 힘들 것 같아 줄일 수 밖에 없었다.
많이 아쉬운 결과고 실제로 구성이나 연결부분에서도 아쉽다란 생각이 많이 드는데 그만큼 어떻게 변경하고 진행해야할지 새롭게 알게 된 부분도 많다고 생각해 다음에 진행할 때는 더욱 예민하고 섬세하게 진행해 볼 수 있을 것 같다.

유지할 것

• 공식문서는 신이다. 물론 유형별로 어떻게 써야하는지 예시같은 걸 찾기 힘들겟지만 github 예시 코드를 링크로 연결한 부분도 많으니 최대한 많이 비교해보자.
• 지속적인 확인은 꾸준히 유지하자. 중간중간 머릿속에서 이미 통신과 모든 게 끝났겠지만 최적화를 할 때 에러가 생겼지만 미리 체크 해놓은 구간 덕분에 빠르게 디버깅 할 수 있었다.
• 직접 물어보자. 스택오버 플로우나 github, 블로그등을 통해서 정보를 받아오는 것도 좋지만 직접 코드와 함께 현상과 시도 방법, 에러 발생 원인등을 잘 정리해서 올리면 좋은 답변을 기대할 수 있었다.

고쳐야할 것

• 전체적인 프로젝트 설계 : Next.js의 장점인 ssr과 csr 둘 다 활용할 수 있는 부분이기에 SEO 최적화에 굉장히 부족했다고 생각한다. component를 나누는 시점에서 의견이 섞인 상태에서 그대로 재활용 하여 사용하며 시간적 부족으로 구성되는대로 진행한 게 큰 오점이다
• 프로젝트 최적화 : 간간히 메모이제이션을 이용하여 컴포넌트 최적화를 진행하였지만 대부분의 컴포넌트가 서로 복잡하게 연결되어 있기 때문에 메모이 제이션을 사용해도 컴포넌트가 다시 렌더링 되는 실수가 있었다. 이는 첫 설계 미스로 다음 프로젝트 때 더욱 꼼꼼하고 서로의 컴포넌트의 영향력을 신경써야 한다는 것을 크게 깨달을 수 있었다.
  특히나 볼륨이 큰 프로젝트 일수록 이러한 현상은 전체적인 문제를 나으니 최대한 신경쓰자
• 데이터 : axios를 사용한 네트워크 요청을 처리하였지만 Next.js에서 유용한 SWR을 사용하여 데이터 캐시, 재시도등을 자동으로 관리하여 최적화에 도움이 더 되었으면 좋았을 것이라 생각된다.
  이는 sns특성상 같은 데이터들을 계속하여 가지고 있는 경우가 많은데 axios 요청을 계속해서 하는 것보단 데이터를 캐싱하여 보관하면 훨씬 더 좋은 최적화 경험을 만들 수 있을 것이라 생각된다.
• 상태관리 : Next.js 13의 최신 버전을 사용하다보니 대부분의 상태관리 라이브러리들이 적용되지 못한 상황이었다.
  특히 이전 react를 이용한 코딩을 했을 땐 recoil을 사용하여 중앙 집중화된 상태관리를 경험해 보았지만 Next.js 13에 들어오며 모든 페이지들이 기본적인 렌더링을 SSR로 변경하였고 recoil을 사용하려면 가장 최상위 페이지에서 하위 페이지들에 recoil 상태관리용 컴포넌트를 씌웠어야 했는데 그럴 경우 최상위 페이지를 제외한 모든 페이지가 CSR로 자동 변경 되어 SSR의 장점을 하나도 얻지 못했다.
  결국 Context API를 사용하였지만 적절한 사용이 되지 않아 컴포넌트 렌더링 최적화 이슈가 존재하였다.
  다음번엔 최산화된 전역 상태관리 라이브러리가 있다면 적용하여 진행해보고 아니라면 Context API 사용에 최적화를 신경써서 진행해보자.

• 너무 마음이 급하다 보니 성격대로 진행하지 못했다. 꼼꼼하고 세심하게 어떻게 진행할 것이지 어떠한 방법으로 구성을 짤것인지 하나하나 진행할 때마다 체크하며 나아가야 했지만 인원이 부족해지면서 마음을 너무 조급하게 먹은 것 같다.
  그로 인해 너무 꼬여진 코드들이 존재 했으며 전체적으로 무거운 프로젝트가 되지 않았나 싶다.
• 되는대로 코드를 짜겠지만 이후 좀 더 코드를 리뷰하며 깔끔한 코드로 나아갈 수 있도록 하자.
• 상단에서 이야기 하든 구성면에서 많이 허둥지둥 하다보니 컴포넌트 세분화가 잘 진행되지 않은 것 같다. 파일이 늘어나는 것을 겁먹지말자
• 퍼블리싱 공부도 필요하고 UX/UI 측면에 대해 좀 더 고민하는 자세가 필요할 것 같다.
• 특히 색상이나 디자인 측면에서 데이터를 수집해서 진행해야겠다는 생각이 든다. 천재적인 게 아닌이상 미적 감각도 빅데이터다. 보고 경험한 게 많으면 저절로 떠오르기 마련이다.

이후 계획

• 클린 코드에 대한 고찰과 관련한 공부를 집중적으로 공부해보고 싶다(이미 여기저기 데이터를 긁어모아 공부 중...)
• 부족한 CS지식과 추가적으로 공부하고 세분화된 프로젝트를 또 진행해보고 싶다.
• 웹 퍼블리싱을 좀 더 공부하고 좀 더 유저 친화적인 인터렉티브한 웹을 만들고 싶다.
• native 공부를 시작해서 유저가 웹과 앱 둘 다 경험할 수 있는 프로젝트를 진행하고 싶다.