한 달 정도 후에 쓰는 글이라 기억이 잘 안나서 넘 슬프다.
✨ React + TypeScript + Vite
당시 부트캠프에서 리액트와 타입스크립트를 공부하고 있기도 했고, 팀원들의 의견도 일치해서 React(가상돔을 활용한 렌더링 성능 향상 - 관련해서 논란이 있는 것으로 알고있음, 컴포넌트를 활용한 더 좋은 개발 경험)와 TypeScript(컴파일 단계에서 오류 체크, 자동완성)를 사용하게 되었다.
Vite를 채택한 이유는 Webpack이 아닌 Esbuild를 사용하여 모든 코드가 아닌 브라우저가 필요로 하는 코드만 빌드하여 제공하기 때문에 속도가 빠르다는 것이었다.
그러면서도 아래 글을 통해 CRA가 갖고자 하는 철학에 대해서 알 수 있었다. 이해하기 어려운 내용이 많았지만 '개발자의 선택을 존중한다' 가 가장 큰 의의인 것 같았다.
(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변
✨ ESLint 너 도대체..?
사실 내가 프로젝트를 세팅하게 된 데에는 내 욕심이 컸다. git flow를 채택하고, 어떤 방식으로 PR과 ISSUE를 날릴 것인지, 커밋 컨벤션은 어떻게 할 것인지 등을 프로젝트를 진행하며 한 번쯤 제대로 해보고 싶었기 때문이다. 그 과정에서 여러 블로그와 유튜브 영상을 보며 공부했다. 참고한 것들은 맨 아래에 링크를 달아놓았다.
열 개 이상의 세팅 방식을 보며 느낀 것은 '다 다르다' 였다. 지금 정확하게 기억은 안 나지만, eslintrc.json, eslintrc.cjs, eslintrc.js 등 이름조차 달랐던 것 같다. 미묘하게 다른 부분이 있어서 어느 쪽이 일반적으로 채택되는 방식인지 알 수가 없었다. 결국 여기저기에 있는 코드를 조합해서 하나의 eslint 파일을 만들긴 했는데...
에러
설정하는 과정에서 정말 힘들었던 것은 자꾸 Syntax Error가 난다는 것이었다. 어떨 때는 module.exports에서, 또 어떨 때는 tsconfig.json에서 여기저기에서 문제가 얽히면서 나를 힘들게 했다.
모르긴 몰라도 tsconfig.json 파일에 "include": ["src", "firebase.ts"] 를 추가해주니 많은 문제가 해결되었다. (정확히 어떤 역할을 하는지는 찾아봐야겠다.) 지금 생각해보면 eslintignore에 체크가 필요없는 파일을 집어넣으면 해결되지 않았을까 싶다.
✨ Prettier
이건 상대적으로 아주 간단했다. prettierrc.json 파일을 만들고 그 안에 원하는 규칙을 설정하면 끝이었다. 참고로 세팅에서 formatOnSave를 켜주면 저장할 때마다 이쁘게 정렬해준다.
✨ Next.js
얘는 ESLint가 자동으로 설정되어서 귀차니즘을 많이 덜 수 있다고 들었던 거 같다. 나중에 Next로도 프로젝트를 하나 해봐야겠다.
✨ 도움 받은 곳
글
- [React] Typescript + eslint + prettier 적용하기
- 리액트 + 타입스크립트에서 ESLint + Prettier 설정하기
- eslint 이해하기 | react 협업 셋팅하기 | prettier
- React - vscode에서 React개발을 위한 Prettier, ESLint설정
- ESLint 상세 설정 가이드
영상
