BIND_회고

😍 Liked

• 개인 프로젝트로 진행하며 내가 학습하고, 사용하고싶은 기술 스택들을 적용할 수 있어서 좋았다!

• 클론코딩이 아닌 공식 문서과 참고 자료들을 바탕으로 스스로 고민해보며 개발을 진행하며 큰 성장을 할 수 있는 계기가 된 것 같아 매우 만족스럽다!

• 기획, 디자인, 개발, 배포 모든 과정을 직접 경험해보며 전반적인 흐름을 이해할 수 있어서 만족스러웠다.

• 사용할 스택들에 대한 툴 체인 구성을 직접 해보며 발생하는 다양한 에러..들을 마주하고 해결해가며 개발을 위한 환경 구축을 경험해본 것이 좋았다!

• 배포 후 발생한 cookie 이슈를 통해 cors, cookie의 sameSite 속성 등 몰랐던 지식을 삽질하며 배울 수 있었고, next 서버사이드 메서드 요청과 express 서버로의 요청 도메인이 달라 발생한 문제를 해결하기 위해 배포된 클라이언트와 서버에 도메인, 서브도메인을 연결하여 해결하며 서버와 클라이언트 통신에서 발생할 수 있는 문제에 대한 경험을 해볼 수 있었다!

• SNS의 특성상 사용자의 접근이 쉬워야 한다고 생각해 next-pwa를 사용하여 pwa 배포를 진행하여 다양한 배포 경험을 해볼 수 있어서 좋았다!

• git과 github로 git flow 전략을 활용하여 미숙하고 두려웠던 git 사용에 익숙해질 수 있어서 좋았다!

📝 Learned

Figma

• 아토믹 디자인을 기반으로 조립하여 컴포넌트 단위로 디자인하는 방법을 미흡하게나마 학습할 수 있었다!

StoryBook

• 컴포넌트를 개발할 때 매 번 next 페이지를 띄워가며 확인하지 않고 UI를 바로바로 확인할 수 있었다!

• 개발에 필요한 추가적인 addon들을 설치하여 더욱 강력하게 사용할 수 있다는 것을 학습할 수 있었다!

• decorators를 활용하여 스토리들을 react-query나 recoil 같은 상태 관리 라이브러리와 함께 사용할 수 있다는 것을 학습할 수 있었다!

• CDD 방식으로 컴포넌트를 탄탄하게 설계하고 테스트를 거쳐 사용하는 것이 테스트 코드 작성 시간이 걸리지만 그만큼 안전하게 개발이 가능하다는 것을 직접 느낄 수 있었다!

React & TypeScript

• vanillaJS를 사용하여 구현했던 이전 프로젝트에서 마주했던 문제점들을 React를 사용하여 수월하게 개발할 수 있었다. 왜 라이브러리나 프레임워크를 사용하면 생산성이 높아지는지 경험할 수 있었다!

• 자바스크립트의 동적 타입이 발생시킬 수 있는 오류를 방지하기 위해 타입을 지정하고 안전하게 개발하는 것이 왜 중요한지 느낄 수 있었다.

Recoil & React-Query

• 컴포넌트의 깊이가 깊어질수록 상태를 끌어올리는 것에 무리가 있다는 것을 알 수 있었고, 이를 해소하기 위해 유저 정보나 테마 정보 등 모든 컴포넌트들이 알 수 있어야 하는 상태는 전역 상태로 관리하는 것이 좋다는 것을 배울 수 있었다.

• react-query의 기능들을 활용하여 데이터를 캐싱하기도 하고 추가, 수정, 삭제 등 mutation이 발생했을 경우 변경사항이 발생한 요청을 다시 보내거나 인터벌을 걸어 주기적으로 요청을 보내는 등 효율적인 서버 상태 관리가 무엇인지에 대해 학습할 수 있었다.

ETC…

• tailwind와 css module을 함께 사용하여 CSS의 생산성을 높여주는 도구들을 경험하고 학습할 수 있었다!

• Next.js를 사용하며 SSG와 SSR, CSR의 차이를 이해할 수 있었고, getServerProps 등 넥스트가 제공하는 기능을 활용하여 서버 데이터가 필요한 페이지도 SSR로 그릴 수 있다는 것을 배웠다.

• express와 MongoDB를 사용하여 API 개발, mongoose 데이터 쿼리 등을 경험하고 학습할 수 있었다.

• socket.io를 사용하여 클라이언트와 서버를 연결하여 실시간 채팅을 구현하는 방법을 학습할 수 있었다.

😮‍💨 Lacked

• 한 달이라는 물리적인 시간 제약 안에서 모든 기술 스택이 처음 사용해보는 것이라 하나 하나를 깊이 다루어보지 못한 부분이 아쉽다…!

• 변수명이나 함수명, 일관된 컨벤션 등 가독성이 좋고 남이 봐도 이해할 수 있는 좋은 코드를 작성하기 위한 고민을 할 겨를이 없이 시간에 쫒기듯 개발한 것 같다…좋은 코드란 무엇인가에 대한 부분에 좀 더 신경쓰며 코드를 작성하는 연습이 필요할 것 같다!

• TypeStript를 선택하여 사용하긴 했지만 강력하게 사용하지 못한 것 같다….알아서 추론해주는 타입에 대한 정의를 해야하는지, 제네릭 타입은 어떻게 활용해야 하는지 등 좀 더 깊게 학습하고 다루어보며 타입스크립트를 사용하는 장점을 잘 활용할 수 있도록 발전해야 할 것 같다.

• StoryBook(v6.5)와 next.js(v.13~)의 호환성 문제를 마주했었다. next/router가 코드 내부에 포함되어있을 경우 StoryBook에서 해당 스토리의 오류를 발생시켰다. addon을 찾아보니 next 12버전 까지는 지원하지만 13버전이 나온지 얼마되지 않아 해당 버전의 에드온은 아직 없었다 ㅠㅠ 찾아보니 넥스트의 app을 감싸는 provider를 mock으로 구성하여 storybook에 적용하는 방법이 있는 것 같았으나 개발 기간이 지연될 것 같아 next/router를 주석처리 하고 개발을 진행하고 스토리북 테스트가 끝난 후 해당 주석을 해제하여 사용하였다. 스토리북의 기본적인 사용 방법은 프로젝트를 진행하며 학습할 수 있었지만 더 안전하고 튼튼한 컴포넌트 개발을 위해 스토리북을 어떻게 더 활용할 수 있을지 학습할 계획이다.

• next가 최근 13버전을 발표하며 기존의 pages 디렉토리 기준 라우팅에서 app 디렉토리 라우팅으로 넘어가는 과정에 있다는 것을 보았다. 또 layouts , next/image 레이지 로딩 강화, next/link 태그 불필요 등 기존 12버전에서 좀 더 발전된 기능들을 제공한다고 한다. 개발 과정에서 공식문서를 보다가 알게되어 진행중이던 프로젝트를 13버전의 기능들로 전환하려다 라우팅 부분에서 오류가 발생해 일단 기존의 방법으로 개발을 완료하였다. 또 지금은 첫 페이지를 받아온 이후에는 CSR로 동작하게 구현이 되어있어 SSR과 CSR이 어느 때 더 유리한지나 SSG는 언제 사용되는지 등에 대한 학습을 통해 나의 가치 판단을 키워나가야 할 것 같다.

• recoil과 react-query를 사용해 상태 관리를 다루어 오랜기간 현업에서 사용되어진 redux를 사용해보지 못했다는 부분이 아쉬운 것 같다. 리덕스의 보일러 플레이트 등의 문제 때문에 다른 라이브러리들이 떠오르고 있다고는 하나 기존 코드를 유지보수 하는 등의 업무에서 마주할 수 있기 때문에 리덕스를 사용한 프로젝트도 진행해보아야할 것 같다!

• 위와 마찬가지로 선택한 기술 스택 이 외에도 CRA, react-router-dom, Sass, emotion 등 자주 사용되는 기술들을 학습하긴 했으나 직접 개발에 사용해보지 못해 아쉬움이 남는 것 같다. 이번 프로젝트에서 사용하지 않았던 기술 스택들로 다른 프로젝트를 만들어보는 경험도 필요할 것 같다!