1. yarn berry로 Next.js 프로젝트 생성하기
yarn berry는 npm과 비슷한 역할의 또 다른 패키지 관리자로, 이에 관한 자세한 설명은 이 포스팅을 참고하기 바란다. yarn berry를 사용하기 위해서는 우선 npm을 이용하여 최신 버전의 yarn을 전역으로 설치해야 한다.
다음으로,
create-next-app 패키지를 이용하여 TypeScript 기반의 Next.js 프로젝트를 생성한다. 이때, 만약 평소대로 npx를 사용한다면 npx create-next-app 명령어를 사용하지만 yarn을 사용할 때는 yarn create next-app 명령어를 사용한다는 점에 주목하자.그런데 이렇게 하면 기본적으로 yarn 버전이 1로 설정되므로, 버전 2 이상을 가리키는 yarn berry를 사용하기 위해서는 별도의 설정이 필요하다. 우선 기존에 생성되어 있는
yarn.lock 파일과 node_modules 폴더를 삭제하고, yarn의 버전을 berry로 설정한다.기존에 설치된 패키지들을 모두 삭제했고 yarn berry가 설정되었으므로, 이제 yarn berry로 필요한 패키지들을 모두 다운로드하자.
여기까지 하면 Next.js 프로젝트의 패키지 관리자를 yarn berry로 마이그레이션 하는 과정이 끝난다.
여기서 잠깐, VS Code를 사용한다면?
VS Code를 사용하는 경우 VS Code가 패키지를 yarn berry로 불러와야 한다는 사실을 알 수 있게 별도의 설정을 해줘야 한다. 이를 위해 다음 명령어를 실행하여 yarn berry 전용 VS Code SDK를 설정한다.
그리고 [Ctrl + Shift + P] 또는 [Command + Shift + P]를 클릭하여 커맨드 창을 띄운 후, [Select TypeScript Version]을 검색하여 선택하고 [Use Workspace Version]를 선택한다. 여기까지 하면 각 패키지를 불러오는 코드에서도 빨간 줄이 사라질 것이다. 마지막으로, npm과 달리 압축 파일로 패키지를 표현하는 yarn berry의 특성상 패키지의 내용을 바로 볼 수 없기 때문에, 마치 압축 파일이 아닌 것처럼 패키지의 내용을 바로 보고 싶다면 VS Code의 [ZipFS - a zip file system] Extension을 설치해주도록 하자.
2. ESLint(Airbnb)와 Prettier 설정하기
과거 포스팅에서 JavaScript 프로젝트에 ESLint(Airbnb)와 Prettier를 설정하는 방법을 다룬 적 있었다. 그러나 이 방법대로 하면 TypeScript 기반의 Next.js 프로젝트에서는 바로 잘 적용되지 않는다. 따라서 이번 포스팅을 통해 어떻게 하면 되는지 작성한다.
먼저, Next.js는 기본적으로
eslint-config-next 패키지의 ESLint 설정을 사용한다. 여기에는 TypeScript에 대한 지원이 기본적으로 포함되어 있고 각종 플러그인들이 포함되어 있다. 하지만 그러한 플러그인들 중 일부가 eslint-config-airbnb 패키지의 ESLint 설정에도 포함되어 있기 때문에, 무작정 사용했다가는 충돌이 발생할 것이다. 이러한 충돌을 막기 위해서는 eslint-config-next 패키지에 포함된 플러그인들이 포함되어 있지 않은 eslint-config-airbnb-base 패키지를 대신 설치해야 한다.그리고 TypeScript를 지원하기 위한
eslint-config-airbnb-typescript 패키지도 함께 설치해야 한다.마지막으로, ESLint와 함께 Prettier를 사용하기 위해 필요한 패키지들을 설치한다. (이에 대한 자세한 설명은 이 포스팅을 참고)
이제
.eslintrc.json 파일과 .prettierrc 파일의 내용을 다음과 같이 작성한다.next/core-web-vitals는 eslint-config-next 패키지의 ESLint 설정이고, plugin:prettier/recommended는 Prettier를 ESLint와 결합하기 위해 사용하는 설정(자세한 설명은 이 포스팅을 참고)이다. parserOptions의 project에는 tsconfig.json 파일의 경로를 적으면 되고, .prettierrc 파일의 내용은 원하는 대로 적절히 수정하면 된다.여기서 잠깐, VS Code를 사용한다면?
VS Code를 사용하는 경우 VS Code에서 ESLint와 Prettier가 제대로 동작하도록 하기 위해 다음과 같이 VS Code SDK를 설정한다.
이때 필자의 경우
eslint-config-next 패키지가 최신 버전(13.0.4)인 경우 VS Code에서 이상한 ESLint 에러가 잡히곤 하였다. 실제로 ESLint를 실행해보면 에러가 잡히지는 않는데, VS Code에서만 멀쩡한 코드에 빨간 줄을 긋는 것이었다. 아직 근본적인 원인을 찾지는 못하였지만, eslint-config-next 패키지의 버전을 13.0.3로 다운그레이드 하면 해결된다는 것을 발견하였다. 혹시 필자와 같은 문제에 부딪힌다면 참고 바란다.3. 결과 확인하기
이해를 돕기 위해 위 과정을 그대로 구현해놓은 GitHub 리포지토리를 공유하겠다.
main 브랜치의 각 커밋 메시지를 확인해보면 위에서 설명한 절차도 작성되어 있을 것이다. 혹시 학습에 필요하다면 참고하기 바란다.