이번에 개발하게 될 프로젝트는 제목과 같이 Next.js, Typescript, tailwindcss, yarn berry, ESLint, Prettier 조합으로 사용하여 구성했습니다.
1. 우선 Next.js에 CNA(create-next-app)을 통해 Project 생성하기
$ npx create-next-app@latest
그리고 나오는 리스트에는 위와 같이 체크해줬습니다!
- TypeScript, ESLint, Tailwind CSS를 사용할 것으로 Yes를 선택해주었습니다.
- 'src/' 디렉토리를 사용할 것이고, 이번에는 사용해보지 않았던 App Router 방식을 사용해보기로 하고 Yes를 선택해주었습니다.
- alias를 customize 할 것인지에 대한 부분은 No를 선택해주었습니다.
설치를 조금 기다리니, 아래와 같이 완료된 것을 확인할 수 있었어요~!
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'next@14.2.3',
npm WARN EBADENGINE required: { node: '>=18.17.0' },
npm WARN EBADENGINE current: { node: 'v16.14.0', npm: '8.3.1' }
npm WARN EBADENGINE }
added 361 packages, and audited 362 packages in 27s
133 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created shop_sample at /Users/rarla/2404_Front-end/shop_sample참고로 위 안내에서 node 버전이 18.17.0 버전 이상이어야한다는 것을 알 수 있어요 :)
2. Yarn Berry 설정하기
npm 말고 yarn berry를 사용할 거에요!
(yarn berry가 뭔지 잘 모르시는 분들은 toss tech에서 작성된 글을 참고하세요!)
2-1. node_modules 폴더 및 package_lock.json을 제거하기
그리고 yarn berry 사용을 하겠다고 설정하는 코드를 입력해줍니다.
$ yarn set version berry위와 같이 코드를 작성 후 yarn -v 명령어를 통해 확인해보니 저는 4.1.1 버전으로 설치된 것을 확인할 수 있었어요~!
위 명령어를 실행하면 .yarnrc.yml 파일이 생성되는데요.
(만약, 위 과정에서 This tool requires a Node version compatible with >=18.12.0 오류가 나신다면 node 버전을 18.12.0 이상으로 높여주시면 됩니다.)
2-2. 생성된 .yarnrc.yml 파일 내 nodeLinker 설정을 추가하기
yarnPath: .yarn/releases/yarn-4.1.1.cjs
nodeLinker: pnp이렇게 nodeLinker를 pnp 방식으로 연결해 줄 것이라고 작성해줘야합니다.
2-3. yarn install 하기
$ yarn install이제 설정이 되었으니 pnp 방식으로 yarn berry 방식으로 패키지를 설치해줍니다.
이렇게 하면 무거웠던 node_modules 대신 패키지 정보를 .zip으로 압축해 .yarn/cache 폴더에 저장하고
이를 찾기 위한 정보를 .pnp.cjs에 기록하는 yarn berry 방식을 사용할 수 있게 됩니다!
2-4. yarn berry zero install 설정 관련 .gitignore에 추가하기
# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
3. prettier 설정하기
이제 prettier를 설정해보겠습니다.
Prettier는 포매팅에 특화된 것이고 Eslint는 포매팅과 문법 수정을 해주는 역할인데요.
Eslint는 잘못 입력한 문법을 자동으로 수정하기 위해 많이 사용되고, prettier는 코딩 컨벤션을 맞추는 용도로 많이 사용됩니다.
3-1. 필요한 패키지 설치
$ yarn add -D eslint-plugin-prettier eslint-config-prettier위 두가지 패키지를 -D 개발 모드에서 설치해주었습니다.
우선 eslint-config-prettier는 eslint에서 prettier와 겹치는 포매팅룰을 삭제하기 위한 패키지고,
eslint-plugin-prettier는 eslint에 prettier의 포매팅 기능을 추가하는 패키지입니다.
3-2. eslintrc.json 파일 내 패키지 설정 추가
{
"extends": ["next/core-web-vitals", "plugin:prettier/recommended", "eslint-config-prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
3-3. .prettierrc에 원하는 설정 추가
{
"useTabs": false,
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "lf",
"semi": false,
"arrowParens": "always"
}위 설정은 원하시는 코딩 컨벤션에 따라 수정하시면 됩니다 :)
4. Yarn Berry PnP 모드 사용 시 VSCode에 필요한 설정 인식하게 하기
$ yarn dlx @yarnpkg/sdks vscode위 코드는 Yarn Berry의 PnP 모드를 사용 시 VSCode에 필요한 설정을 자동으로 생성해 IDE에서 모듈을 정상적으로 인식할 수 있도록 하기 위한 코드입니다.
설정된 생성 파일은 VSCode 프로젝트 내 .vscode 폴더에 저장되며, VSCode가 Yarn Berry의 PnP 모드에서 사용되는 모듈을 인식할 수 있도록 해줍니다.
생성되는 파일과 내용은 아래와 같습니다.
- extensions.json 파일
{
"recommendations": [
"arcanis.vscode-zipfs",
"dbaeumer.vscode-eslint"
]
}- settings.json
{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
},
"eslint.nodePath": ".yarn/sdks",
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
5. 프로젝트 실행하기
$ yarn build
$ yarn dev이제 next.js 프로젝트를 실행시키는 스크립트 명령어로 잘 작동되는지 확인해보시면 됩니다~!
댓글