[Next.js] 프로젝트 초기 세팅을 해보자!

싸피에서 진행했던 세 개의 프로젝트 중 첫 번째 프로젝트 말고는 초기세팅을 내가 맡아서 했었다.

그 때는 단기간 소규모 프로젝트였어서

1. 필요한 패키지 설치

2. 코드컨벤션대로 eslint, prettier 설정

3. 폴더 구조 세팅 (.gitkeep 이용)

4. 필요 없는 파일들 제거, gitignore 파일 생성

5. 전역 css 설정

이정도로 했었던 것 같다. 

이번엔 장기간(?) 프로젝트를 진행할 예정이라, 초기세팅을 꼼꼼히 하고 나중에 실무에서도 사용할 수 있도록 공부할 예정이다.

우선 프로젝트를 생성해준다. npm과 타입스크립트를 이용할 예정이므로 다음과 같이 입력해준다.

npx create-next-app@latest "프로젝트폴더이름" --typescript

25년 4월 5일 기준 현재 Next.js는 15.2.4버전, react는 19.1.0버전이 가장 최신 버전이다.

npm install -D prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser eslint-plugin-import eslint-plugin-react-hooks

패키지	설명
prettier	코드 포맷터
eslint-config-prettier	ESLint와 Prettier 충돌 방지
eslint-plugin-prettier	ESLint 안에서 Prettier 규칙을 사용
@typescript-eslint/parser	TypeScript 코드를 ESLint가 분석할 수 있게 해주는 파서
eslint-plugin-import	import/order 규칙을 사용하려면 필요한 플러그인
eslint-plugin-react-hooks	React Hooks 관련 규칙을 적용하기 위한 플러그인

❓ 여기서 -D는 무엇일까?
- -D는 --save-dev의 축약형으로, 개발 환경에서만 필요한 의존성을 설치할 때 사용된다. 설치된 패키지는 package.json 파일의 devDependencies 섹션에 추가된다.
- eslint, prettier, webpack, babel 등의 개발 도구들은 보통 개발 환경에서만 사용되므로 devDependencies에 추가하는 것이 맞다고 한다.

그리고 .prettierignore 파일을 만들어 Git의 .gitignore처럼 Prettier가 무시할 파일 및 폴더를 설정한다.

node_modules
.next
dist
build

다음으로 .prettierrc 파일을 만들어 원하는 설정을 넣어준다.

codesnap 플러그인을 이용해서 예쁘게 캡쳐해봤다...

rules: {
      'prettier/prettier': 'error',
      '@typescript-eslint/explicit-function-return-type': 'off', // 함수 반환 타입 명시 비활성화
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], // 사용하지 않는 변수 비활성화(_로 시작하면 무시)
      '@typescript-eslint/explicit-module-boundary-types': 'warn', // 함수 명시적 타입을 요구
      '@typescript-eslint/ban-ts-comment': [
        'error',
        {
          'ts-ignore': 'allow-with-description',
          'ts-nocheck': 'allow-with-description',
          'ts-expect-error': 'allow-with-description',
        },
      ], // ts-ignore 사용 시 설명 추가 요구
      'react-hooks/rules-of-hooks': 'error', // 리액트 훅 규칙 활성화(리액트 훅은 함수 최상단에서만 호출 가능)
      'react-hooks/exhaustive-deps': 'warn', // 의존성 빠져있는 경우 경고
      'import/order': [
        'error',
        {
          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], // import 순서 그룹화
          'newlines-between': 'always', // 그룹 사이 줄바꿈
          alphabetize: { order: 'asc' }, // 알파벳 순서로 정렬
        },
      ],
      'import/no-unresolved': 'error', // 잘못된 import 경로 방지
      'no-console': ['warn', { allow: ['warn', 'error'] }], // console.log 사용 경고
      'no-debugger': 'error', // debugger 사용 방지
      'react/jsx-uses-react': 'error', // React JSX 사용 확인
      'react/jsx-uses-vars': 'error', // JSX 내 변수/컴포넌트 사용 확인
    },

eslint로 세세하게 규칙을 설정하며 이렇게 많은 설정들이 것들이 있다는 걸 처음 알게 되었다....

다음은 prettier 설정!

{
  "singleQuote": true,  // 문자열에 작은따옴표(') 사용, 기본값은 큰따옴표(")
  "semi": true,  // 세미콜론(;)을 항상 사용. 기본값은 true로, 문장 끝에 항상 세미콜론 붙임
  "printWidth": 100,  // 한 줄의 최대 길이를 100자로 제한. 이 길이를 넘으면 자동으로 줄 바꿈
  "tabWidth": 2,  // 들여쓰기에서 공백의 수. 2칸 들여쓰기 사용
  "trailingComma": "all",  // 객체나 배열의 마지막 항목 뒤에 항상 쉼표(,)를 추가
  "bracketSpacing": true,  // 객체 리터럴 중괄호({}) 안에 공백 넣음 예: { key: value }
  "arrowParens": "always",  // 화살표 함수의 매개변수가 하나일 경우에도 괄호 항상 사용 예: (x) => x * 이 설정은 타입스크립트에서 필수!
  "endOfLine": "auto",  // 줄 바꿈 문자 자동 설정. 운영체제에 맞춰 줄바꿈 처리 (Windows: \r\n, Unix/Mac: \n)
  "bracketSameLine": false  // JSX에서 닫는 괄호 `>`를 마지막 줄에 놓지 않고 새 줄에 놓음 (줄바꿈)
}

그리고 이제 IDE 설정을 해서 저장을 하면 자동으로 eslint가 적용되도록 설정한다.

vscode가아니라 cursor에서는 처음 해보는데, vscode 기반이니 비슷하겠거니 하고 알아봤는데...

일단 가장 쉬운 방법은 eslint 익스텐션은 다운받아져있을테니, 그 쪽으로 간다.

톱니바퀴를 눌러 settings에 들어간 후, Edit in settings.json을 클릭하면....

(원래 Eslint: Auto fix on save 체크박스가 있어야되는데 녀석이 없다...?!)

User의 settings.json이 나온다. 그 코드에 아래의 세 개를 추가해주면 된다. 이제 save할 때마다 자동으로 수정된다.

    "editor.formatOnSave": true, 
    "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    },

근데 이건 이 기기를 이용하는 User의 세팅이고, 이 설정을 지금 진행 중인 프로젝트에만 한정시키고 싶다면?

c+shift+P 를 누르고, preference: open workspace settings (JSON) 으로 들어간 다음 해당 설정을 추가하면 된다!

근데 저 source.fixAll.eslint에는 세 가지 속성이 존재한다.

 

• "always": 파일 저장 시 ESLint 오류를 자동으로 수정
• "explicit": 사용자가 수동으로 수정 요청할 때만 ESLint 오류를 수정(직접 오류 수정하고 싶을 때 유용)
• "never": 자동 수정이 일어나지 않으며, 수동으로 수정해야 함

추가로 global.css에 전역 스타일링을 추가한다. 이거 안해줘서 막 차트 잘리고 애먹었던 기억이 있다...ㅜ

#root {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
}

 

일단 이정도로 세팅 완료했다.