Next.js 프로젝트 세팅

Engine Locking

1. '.nvmrc' 파일 생성

이 파일은 특정 프로젝트에서 사용해야 할 Node.js 버전을 지정하는 데 사용합니다.

lts/gallium

본인이 필요한 Node.js 버전을 찾아서 입력해주면 됩니다.

GitHub - nodejs/Release: Node.js Release Working Group

 

2. '.npmrc' 파일 생성

package.json의 engines 필드를 엄격하게 검사하도록 작성합니다. 

이렇게 하면 package.json에서 engines 필드에 작성한 값이 아니라면 설치가 불가능합니다. 

engine-strict=true

 

3. package.json 파일에 engines 추가 

2번에서 설정한것 때문에 아래 조건을 반드시 따르게 됩니다.

덕분에 다른 개발자나 배포 환경에서 프로젝트의 종속성을 엄격하게 제어할 수 있습니다.

{
  ...
  "engines": {
		"node": ">=16.0.0", // node.js 버전 최소 16.0.0 이상
		"yarn": ">=1.22.0", // yarn 버전 최소 1.22.0 이상
		"npm": "please-use-yarn" // npm 사용금지 대신 yarn 사용
	},
   ...
  }

위에서는 Node.js 와 yarn 버전을 통일했습니다.

그리고 npm이 아닌 yarn을 사용하도록 강제하였습니다.

 

이제는 팀원들 간에 코드 규칙과 스타일등을 통일하는 것을 설정해보겠습니다

ESLint && Prettier

1.  '.eslintrc.json' 파일을 생성

{
  "extends": ["next", "next/core-web-vitals", "eslint:recommended"],
  "globals": {
    "React": "readonly"
  },
  "rules": {
    "no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_" }]
  }
}

Configure ESLint - ESLint - Pluggable JavaScript Linter

 

prettier 설치

yarn add -D prettier

2. '.prettierignore' 파일 생성

prettier을 적용하지 않을 파일 지정

.yarn
.next
dist
node_modules

3. '.prettierrc' 파일 생성

본인이 또는 팀이 원하는 것에 맞추어 코드의 일관성을 지킬 수 있습니다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

 

Prettier · Opinionated Code Formatter

 

husky

Git hook은 Git에서 특정 이벤트가 발생할 때 실행되는 스크립트로

husky 이것을 관리하고 설정 및 실행을 용이하게 해 줍니다.

 

husky를 설치해주고 package.jsond의 scripts 필드 수정

yarn add -D husky
npx husky install

{
  ...
   "scripts": {
    "prepare": "husky install" // 다른 팀원이 프로젝트를 클론받고 yarn install 하면 이것도 실행
  },
  ...
}

1. 커밋 전 lint 실행

npx husky add .husky/pre-commit 'yarn lint'

2. 커밋 규칙 설정

yarn add -D @commitlint/config-conventional @commitlint/cli
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

1. commitlint.config.js 파일 생성

커밋 규칙 지정

// build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
// ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
// docs: Documentation only changes
// feat: A new feature
// fix: A bug fix
// perf: A code change that improves performance
// refactor: A code change that neither fixes a bug nor adds a feature
// style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
// test: Adding missing tests or correcting existing tests

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [1, 'always'],
    'body-max-line-length': [2, 'always', 100],
    'footer-leading-blank': [1, 'always'],
    'footer-max-line-length': [2, 'always', 100],
    'header-max-length': [2, 'always', 100],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [
      2,
      'never',
      ['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
    ],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
        'translation',
        'security',
        'changeset',
      ],
    ],
  },
};

 

3. 푸시 전 bulid 실행

npx husky add .husky/pre-push 'yarn build'