QDD 1-1. Yarn Berry & Next.js 설치, ESLint & Prettier 설치

📍Q1. Yarn Berry로 프로젝트를 시작하려면?

일반적인 Yarn은 클래식 (1.X)

 

Yarn Berry 는  2.X 버전 이상을 말한다

 

- Node.js 18.15.0

- Yarn 3.5.0 기준

yarn init -2

 

생성된 프로젝트 구조가 꽤 달라서 당황..

Yarn Berry의 핵심인 zero-install 및 plug-n-play 에 대해서 나중에 알아봐야겠다

 

zero-install 덕분에

- 커밋, 푸쉬하는데 시간이 오래 걸림 ㅠㅠ

- zero-install 기능을 해제하려면 .yarn/cache 를 .gitignore에 추가하면 됨. 단 이는 node_modules 처럼 초기에 yarn install 필요

(현재는 !가 붙어서 gitignore의 부정 상태)

⭐zero-install 덕분에 패키지 버전을 신경쓰지 않고 코드 실행이 가능하니 일단  프로젝트 종료 후 결정하자!

 

 

📍Q2. Yarn Berry에서 Next.js를 설치하려면?

yarn add next react react-dom
yarn add -D typescript

 

 

처음 3개 패키지 설치할 때 시간이 2분 넘게 걸려서 당황..

 

node_modules 을 사용하지 않는다.

 

📍Q3. Next 프로젝트 구성하려면?

- package.json 에 script 추가

- 루트 pages 와 public 폴더 추가

- pages/index.tsx에 간단한 컴포넌트 추가하고 yarn dev 실행

 

Next가 똑똑한 점

1. typescript를 감지하고 알아서 tsconfig.json을 생성해줌

2. @types/node @types/react 알아서 깔아줌 (dev에)

- yarn 인것도 감지해서 yarn으로 깔아줌!

 

📍Q4. Next.js 에서 ESLint와 Prettier 사용하려면?

package.json 에서 next lint 명령어를 확인하고

"scripts": {
  "lint": "next lint"
}

 

yarn lint를 실행해보면, npm에서 CLI로 eslint를 활성화하는 것처럼 next가 알아서 eslint config를 시작한다

그리고 CLI에서 recommend인 strict 설정을 선택한다

 

pretter, eslint, next 를 통합하기 위해 아래 패키지를 설치

yarn add -D @next/eslint-plugin-next eslint-config-prettier prettier

 

package.json

{
  "extends": ["next", "prettier", "next/core-web-vitals", "plugin:@next/next/recommended"]
}

 

 

 

📍참고

Yarn Berry (Yarn 3.X) 설치

https://yarnpkg.com/getting-started/install

Installation

 

제로 인스톨

https://yarnpkg.com/features/zero-installs

Zero-Installs

 

Next.js 프로젝트 시작

https://nextjs.org/docs

Getting Started | Next.js

 

Next.js ESLint 설치

https://nextjs.org/docs/basic-features/eslint

Basic Features: ESLint | Next.js