토이프로젝트로 청첩장을 만들고 있다. 개발환경을 세팅하고 보니 짧은 고민이 생겼고, 이러한 고민들을 기록으로 남겨보고자 한다.
React를 선택한 이유
React가 뛰어난 라이브러리라서? 개발 레퍼런스를 찾기 쉬워서? 여러가지가 이유가 될 수 있겠다.
선택한 이유 1위를 꼽자면 '익숙해서' 이다. 사실 기술 스택을 선택할 때 매우 중요한 요소라고 생각한다. 고급스러운 용어로 표현하자면 러닝커브(Learning Curve).
간단한 토이프로젝트이기 때문에 기술습득의 번거로움 보다는 빠르게 개발할 수 있을 것 같은 React를 선택했다. 최근에 회사에서 Vue3로 개발하고 있지만 아직까지는 React가 훨씬 익숙함은 부정할 수 없다.
개인적으로 회사에서 현재 진행하는 프로젝트에 사용하고 있지 않아서, 기술스택에 대한 익숙함을 잃고 싶지 않아서 진행하기도 했다.
그리고 vue도 가능은 하지만 React의 단방향 데이터 바인딩 방식이 내 의도와 비슷하게 동작할 때가 더 많은 것같다..이것도 익숙함의 차이도 있다고 생각한다.
npm? yarn? pnpm?
업무로 진행한 기존 프로젝트들에서 npm을 많이 써보기는 했지만, yarn과 pnpm이 좋은 선택이 될 수 있다는 것은 알고있었다. 나는 yarn berry로 진행하였다.
npm은 거대한 패키지 생태계를 가지고 있어 거의 모든 패키지에 호환되고 개인적으로도 사용 경험이 제일 많기 때문에 익숙하다는 장점이 있었다.귀찮은 패키지 버전관리도 폭 넓은 호환성으로 알아서 해결해준다. 실제로 안정된 서비스를 하고 있는 프로젝트는 기존 패키지들의 호환성만 고려하면 npm을 사용하는 게 더 확장성이 좋을 수 있다.
청첩장같은 토이 프로젝트는 규모가 매우 작은 간단한 프로젝트이고 패키지 파일들이 무겁지 않았으면 했다. npm으로 설치한 node_modules 파일들은 때론 프로젝트에서 너무 많은 공간을 차지한다. Yarn berry의 pnp모드는 일단 의존성을 중첩 시키지 않기 때문에 불필요한 패키지 탐색이나 접근이 없어 패키지 설치 속도도 훨씬 빠르고, 무엇보다 무거운 node_modules 폴더에 패키지 파일을 저장하지 않는다.
그리고 터미널에 표시해주는 로그가 굉장히 깔끔하고 시안성이 좋다.(이것도 체감하기에 엄청나게 장점이었다.)
pnpm도 고려할 수 있었지만, pnpm을 사용할때 지원되지 않는 패키지가 아직은 많은 것 같아서 선택하지 않았다.
상태관리는 어떻게?
ContextApi를 세팅하려고 했다. 일단 페이지가 두세개 밖에 없을 것 같아서 굳이 상태관리 앱이 필요하지 않다고 생각했다. 그런데 전형적인 모바일 청첩장 형태로 생각해보니(원페이지에 원스크롤) Context Api 조차도 필요없는 것 같은데..? 싶은 생각이 들었다.
필요한 예식관련 정보들은 가상 api 환경인 json-server를 활용했는데 원페이지면 최상단 컴포넌트에서 데이터를 호출하는 훅을 만들어 쓰면 하위 컴포넌트들은 prop으로 필요한 데이터들만 전달해주면 되지 않겠는가..?
그래도 셀프 청첩장인데 좀 더 재밌는 형태로 만들어볼까? 아이디어가 없어 고민 중이지만 상태관리가 필요하다면 Context api를 택할 예정이다.
우선은 예쁘고 센스있고 정보 전달도 되는 그런 걸 만들어 보고 싶다..
