🐾들어가며
멋쟁이 사자처럼 부트캠프에서 마지막 프로젝트를 시작했습니다. 프로젝트를 시작하기 전에 아이디어를 정리하고 와이어프레임을 만들고 기능 명세서를 작성하는 등 여러 과정을 계획하고 진행하고 있습니다. 그 중 일부 과정을 블로그에 정리해 볼까 합니다!
✨본격적으로
프로젝트 세팅
개인 프로젝트를 해본 적이 없는 상태로 팀 프로젝트를 진행하다 보니 프로젝트 세팅을 해본 적이 없었습니다. 그리고 프로젝트를 기획하는 과정없이 바로 개발에 들어갔던 것이라 여러 문제들을 겪었고 이번에는 그런 문제들을 해결해보고자 여러 시도를 하고 있습니다. 그 중 하나가 프로젝트 세팅을 직접 해보는 것입니다!
✅빌드 도구를 고르자!
리액트로 진행하는 프로젝트이다 보니 CRA를 써서 간단히 할 수 있지만, 직접 필요한 것만 설치하고 설정하면서 구성을 파악하고 싶었습니다. 그래서 웹팩에 대해 찾아보니, 생각보다 여러 가지의 빌드 도구들이 있었습니다. 그 중에서 VITE를 선택했습니다.
VITE를 선택한 이유 - VITE를 사용해야 하는 이
Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공합니다.
vite는 Native ESM을 이용해 소스 코드를 제공합니다. 이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 합니다. vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 됩니다. 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.
✅노드 버전을 확인하자!
Vite는 버전 18+ 또는 20+ 의 Node.js를 요구합니다.
그래서 곧장 팀원들의 노드 버전을 확인했더니, 모두 다 다른 버전을 쓰고 있었습니다. 그래서 노드 버전을 통일해서 좀 더 안정적인 환경에서 진행할 수 있게 nvm을 사용하여 노드 버전을 맞추기로 하였습니다.
✅ESLint, Prettier
코드 컨벤션을 맞추면서 들여쓰기만 달라도 충돌이 나는 경우가 생길 수 있습니다. 알고 싶지 않았습니다. 그렇지만 각자 코드를 쓰는 스타일을 모두 확인하고 지정하기에는 비용이 너무 많이 드는 문제입니다. 그래서 이를 해결하기 위해 Lintter와 Code Formatter를 사용하기로 하였고, 가장 많이 써서 정보가 많은 ESLint와 Prettier를 선택했습니다.
참고 링크
이 부분은 아직 설정을 확인하면서 하나씩 바꾸어 나갈 것이라 기본적인 파일들과 확인하여 추가하였습니다.
✅커밋 메세지 템플릿
깃허브의 여러 기능을 좀 더 활용해 보기 위해 다른 협업 툴을 최소화하기로 하였습니다. 그래서 사용하는 협업 툴은 기초 문서 작업 및 회의록 정리를 위한 노션, 온라인 회의 및 소통을 위한 디스코드, 그리고 프로젝트를 관리하기 위한 깃허브로 정하였습니다. 깃허브를 사용하기 위해서 가장 먼저 한 일이 커밋 컨벤션을 정하는 것이었습니다. 온라인의 소통으로는 정확한 정보 전달에 한계가 있기 때문입니다. 그래서 커밋 메세지를 좀 더 구체적으로 쓸 필요가 있었고 템플릿을 찾아 적용하기로 하였습니다.
📁 .gitmessage.txt
################
# [키워드] 제목 의 형식으로 제목을 아래 공백줄에 작성
# 제목은 50자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
# 예) [ADD] 새로운 기능 추가
# 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)
################
# 본문(구체적인 내용)을 아랫줄에 작성
# 여러 줄의 메시지를 작성할 땐 "-"로 구분 (한 줄은 72자 이내)
################
# 꼬릿말(footer)을 아랫줄에 작성 (현재 커밋과 관련된 이슈 번호 추가 등)
# 예) Close #7
################
# [ADD] 기존에 없던 새로운 기능이 추가될 때
# [UPDATE] 기존에 있는 기능이 완전히 새롭게 바뀌었을 때
# [DELETE] 기능이 삭제될 때
# [MODIFY] 일부 코드만 수정할 때, 변수명 등 매우 작은 부분. 즉, 전체 로직에 영향을 주지 않는 부분에 변경사항이 생겼을 때
# [STYLE] ui, 스타일을 바꾸었을 때
# [FIX] 버그에 대한 이슈 해결 완료
# [BUG] 이슈를 생성할 버그가 있을 때
# [CORS] 설정과 관련한 파일 등을 수정할 때
# [DOCS] 문서 작성, 마크다운 파일에 변경사항이 생겼을 때
################템플릿의 장점은 구체적인 커밋 메세지를 적을 수 있다는 것과 주석으로 키워드에 대한 힌트를 줄 수 있다는 점이 큽니다. 그래서 커밋 메세지 컨벤션에 맞춰 템플릿을 수정하여 적용했습니다.
해당 파일을 루트 경로에 추가하고,
git config commit.template .gitmessage.txt을 통해git commit을 하면 템플릿이 뜰 수 있도록 설정하였습니다.
✅추가 패키지 설치하기
프로젝트를 하면서 사용할 기본적인 패키지들을 다음과 같이 정하였습니다.
- axios
- 요청을 좀 더 간편하게 하기 위해서 - react-router-dom
- 페이지 단위로 쉽게 관리하기 위해서 - @tanstack/react-query
- 서버 데이터를 관리가 필요해서 + react 환경에 최적화된 툴이기 때문에 - @reduxjs/toolkit
- 클라이언트 데이터를 관리하기 위해서 + 하나의 저장소에서 상태 관리를 하며 상태 변화 추적때문에
아직 스타일과 관련하여 CSS Module로 할지 CSS in JS로 할지 결정하지 못 했습니다.
프로젝트 세팅 과정에서 겪은 일들
-
프로젝트 세팅 방법만 3시간을 검색했습니다.
4명이서 진행하는 프로젝트인데 모두 프로젝트 세팅은 처음이다 보니 걱정이었습니다. 그래서 일단 제가 욕심을 내서 VITE를 하자고 했으니 세팅하는 방법을 찾아서 정리했습니다. 그 후에 어떤 걸 쓸지 결정하는 것도 회의 시간을 2시간이나 잡아먹고 결과적으로 세팅하는 것도 3시간 걸린 것 같습니다. 처음이니 그럴 수 있지! -
개발자를 하면서 한글로 폴더 이름을 만들어 놓은 사람~ 손!
nvm으로 노드 버전을 관리한다고 하면서 열심히 설치했지만 한글로 된 사용자 이름때문에 열심히 충돌이 나고 경로를 찾지도 못해서 폴더 이름을 바꾸는 것만 1시간을 쏟은 것 같습니다... 폴더 이름을 영어로 변경해서 잘 뜨는데 적용되는 것은 시간이 좀 걸렸습니다. -
회의 때 VITE 노드 버전 호환성 확인 안하고 16 버전으로 결정해버렸습니다.
그래서 다음 회의 때 버전을 어떻게 할 지 논의해봐야 한답니다. 🤣🥲
✔️결론
웹팩이 오래되고 커뮤니티도 크고 안전성도 좋고 해서, 먼저 웹팩으로 해보고 다른 빌드 도구를 쓰는 게 좋다지만 일단 부딪혀보기로 했습니다. 그래서 앞으로 더 많은 문제들을 마주하면서 해결하는 과정이 기대됩니다. 프로젝트 세팅 가이드처럼 써놓은 블로그 글들을 보면서 정리하다 보니 각각에 대해서 좀 더 자세하게 알아가는 시간이 없었습니다. 그래서 이번 프로젝트가 끝나고 부트캠프 수료 이후엔 이런 도구들에 대해서 좀 더 알아가는 시간을 가질 예정입니다.
