Vite 프로젝트 세팅에 대하여
우선 CRA 대신 Vite를 사용한 이유는 Vite가 빠르기 때문!
WebPack 기반 번들링 대신 변경된 파일만 바로 브라우저에 제공하기 때문에 빌드 속도가 빠릅니다
그렇기에 앱 크기에 영향을 비교적 받지 않습니다
Vite 프로젝트 생성
npm create vite@latest (프로젝트 이름)
명령어를 입력하면 프로젝트 이름으로 폴더가 생성됩니다
이어서 나오는 옵션을 선택하면서 프레임 워크 및 언어 등을 설정해야 합니다
이제 npm install로 필요 패키지를 설치 해야합니다
설치 할때 간혹 실수로 폴더 밖에서 설치하는 경우가 있는데 폴더 안에 들어가서 설치했는지 한번 더 확인해야해요
그냥 제가 덜렁거려서... 그러는 걸 수도 ㅠㅇㅠ
Vite 프로젝트는 CRA와 달리 npm run dev 또는 npx vite로 실행이 되고 포트 번호는 5173이 기본입니다!
협업에 관한 세팅
저는 보통 eslint, husky 를 npm으로 깔아두고 시작합니다
ESLint
ESLint는 코드를 일관성이 있도록 작성할 수 있게 도와 주는 도구 입니다
npm install eslint --save-dev로 설치를 해주고
npx eslint --init를 통해 초기 설정을 해줍니다
참고로 --save-dev는 협업에는 필요하지만 개발에는 필요하지 않을 때 사용하는 명령어 입니다
보통 eslint를 설치할 때 prettier을 같이 깔지만 저와 팀원들은 extension으로 사용하고 있었기에 생략 했었습니다.
eslint 규칙은 .eslintrc.json 이나 .eslintrc.js 에서 조정할 수 있습니다
"react/react-in-jsx-scope": "off" 를 해두어야 React 17버전부터 오류(?)가 eslint에 안 걸립니다.
참고로 규칙을 마구 조정하면 안 좋습니다... 하라는 대로 다 해주세요...(경험담)
ESLint는 GitHub Action에서도 사용하는데
mkdir -p .github/workflows 폴더를 만들어주고
touch .github/workflows/eslint.yml 파일을 만들어줍니다
안의 규칙을 설정해주면 워크플로우가 완성됩니다
+) 근데 이때 노드를 낮은 버전으로 사용해서 깃허브 액션에서 오류가 떴었습니다
또 여기서 높은 버전으로 사용하니 Vercel에서 배포가 안되던...
node.js버전을 명시적으로 설정해 배포와 로컬과 맞춰줍시다
"engines": {
"node": ">=18.0.0"
}저는 master 이나 develop 브랜치에 PR할 때 검사하도록 설정 하였었습니다
그때 뭘 할지는 yml 파일에 추가하면 됩니다
husky
husky는 Git hook을 쉽게 관리하고 실행할 수 있도록 도와주는 도구 입니다
예를 들어 Eslint에 맞게 코드를 검사해주고 Merge와 Push 때 검사를 한번 더 진행합니다
npm install husky --save-dev로 설치를 해주고
npx husky init를 통해 초기 설정을 해줍니다 (최신 버전)
원하는 파일에 내가 실행시키길 원하는 명령어를 넣습니다
commit 하기 전에 ESLint가 실행되기를 원한다면
pre-commit 파일에 npm run lint를 써줍니다
커밋전에 ESLint 검사를 해 규칙에 어긋다면 커밋을 못 하게 합니다
commit 메시지에 규칙을 걸고 싶다면
commit-msg에 npx --no-install commitlint --edit $1를 써줍니다
commit 메시지 규칙은 commitlint.config.js에서 바꿔 줄 수 있습니다
이게 있다면 커밋 규칙을 지키지 않는 팀원은 커밋을 못한다는 말씀 !
일단 프로젝트 초기세팅에 관한 것을 포스팅 해보았습니다
처음에는 그렇게 어려웠던 세팅이 지금도 어려워용...
다음에는 깃허브에 관한 이야기를 할까 합니다
누군가에게 도움이 되길 바라며...
