NextJS Project Start

프로젝트 생성

npx create-next-app@latest project-name

√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes

프로젝트 설정

package.json

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "lint-staged": {
    "*.js": [
      "eslint . --fix",
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "next": "^15.1.6",
    "pretendard": "^1.3.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fontawesome": "^1.7.1",
    "shadcn": "^1.0.0"
  },
  "devDependencies": {
    "@storybook/react": "^8.5.1",
    "@types/node": "^20.17.16",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^8.57.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "^15.1.6",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-prettier": "^5.2.3",
    "eslint-plugin-react": "^7.37.4",
    "eslint-plugin-react-hooks": "^4.6.2",
    "husky": "^9.1.7",
    "lint-staged": "^15.4.3",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
}

eslint.config.mjs

import globals from 'globals';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
import nextCoreWebVitals from 'next/core-web-vitals';
import prettier from 'eslint-plugin-prettier';
import prettierPlugin from 'eslint-config-prettier';
import airbnb from 'eslint-config-airbnb'; // Airbnb 스타일 가이드 추가

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    languageOptions: {
      globals: globals.browser, // 브라우저 글로벌 변수 사용
      parser: '@typescript-eslint/parser', // TypeScript 파서 설정
      parserOptions: {
        ecmaVersion: 2021, // ECMAScript 2021 버전 사용
        sourceType: 'module', // ES Modules 사용
        ecmaFeatures: {
          jsx: true, // JSX 문법 사용
        },
      },
    },
  },

  {
    files: ['**/*.js'],
    languageOptions: {
      sourceType: 'commonjs', // CommonJS 모듈 시스템 사용
    },
  },

  airbnb, // Airbnb 스타일 가이드 적용
  pluginReact.configs.flat.recommended, // React 규칙
  pluginReactHooks.configs.recommended, // React Hooks 규칙
  pluginJsxA11y.configs.recommended, // JSX 접근성 규칙
  nextCoreWebVitals.config, // Next.js Core Web Vitals 규칙
  prettier, // Prettier 플러그인 활성화
  prettierPlugin.configs.recommended, // Prettier와의 충돌을 방지하는 설정

  {
    rules: {
      'react/react-in-jsx-scope': 'off', // Next.js에서는 React import가 필요 없음
      'react/prop-types': 'off', // TypeScript에서는 PropTypes를 사용하지 않음
      '@typescript-eslint/no-unused-vars': ['warn'], // 사용하지 않는 변수에 대해 경고 표시
      'import/prefer-default-export': 'off', // Default export 강제 해제
      'jsx-a11y/anchor-is-valid': 'off', // Next.js의 Link 사용에 맞추기 위해 비활성화
      'prettier/prettier': ['error', { endOfLine: 'auto' }], // Prettier 규칙을 에러로 처리
    },
  },
];

ESLint 모듈

npx eslint --init
You can also run this command directly using 'npm init @eslint/config@latest'.
Need to install the following packages:
@eslint/create-config@1.4.0
Ok to proceed? (y) y


> webty-frontend@0.1.0 npx
> create-config

@eslint/create-config: v1.4.0

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · react
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-react
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

settings.json

ctrl + ,

{
  // 저장 시 자동으로 코드 포맷팅을 적용
  "editor.formatOnSave": true,

  // .tsx 파일에 대해서 Prettier를 기본 포맷터로 설정
  "[tsx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 폰트 크기 설정 (12로 설정)
  "editor.fontSize": 12,

  // 파일을 자동 저장 활성화, 일정 시간 후 자동으로 저장
  "files.autoSave": "afterDelay",

  // 저장 시 사용되지 않는 import 문을 명시적으로 제거하고, ESLint 규칙에 따라 코드 수정 자동화
  "editor.codeActionsOnSave": {
    "source.removeUnusedImports": "explicit",
    "source.fixAll.eslint": true
  },

  // ESLint가 검사할 파일 타입을 설정 (JavaScript, TypeScript, TSX 파일)
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],

  // 모든 파일에 대해 Prettier를 기본 포맷터로 설정
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // JavaScript 파일에 대해서도 저장 시 자동 포맷팅을 활성화
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

프로젝트 구조

/src
  /app                # Next.js 페이지 컴포넌트 (App Router 사용하는 경우)
  /components         # UI 컴포넌트들
    /common           # 재사용 가능한 UI 컴포넌트 (버튼, 카드 등, 데이터 처리 X)
    /business         # 비즈니스 컴포넌트 (단순한 데이터 처리 로직 포함/백엔드랑 연결되는 부분)
  /services           # 복잡한 비즈니스 로직을 처리하는 서비스
  /lib
    /api              # API 요청 처리 관련 함수들(백엔드랑 통신하는 부분)
    /enum             # Enum 정의들
    /types            # 타입스크립트 타입 정의들
  /shardcn            # ShardCN 관련 설정 및 로직
    /hooks            # ShardCN에 필요한 커스텀 훅들
    /config           # ShardCN 설정 파일
  /public             # 정적 파일 (이미지, 폰트 등)

---

참고: Prettier & ESLint, Airbnb Style Guide 코드 컨벤션 설정