You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
√ Would you like to use TypeScript? ... Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack? (recommended) ... No
√ Would you like to customize the import alias (`@/*` by default)? ... Yes
√ What import alias would you like configured? ... @/*
# 전체 프로젝트 포맷팅
npm run format
# 포맷팅 체크 (변경사항 없이 확인만)
npm run format:check
# 특정 파일만 포맷팅
npx prettier --write src/app/page.tsx
# 특정 디렉토리만 포맷팅
npx prettier --write src/components/
# 포맷팅 결과 미리보기 (실제 변경하지 않음)
npx prettier --check src/app/page.tsx
5. ESLint 설정
코드 품질 검사 도구
5.1. eslint.config.mjs 설정
rules 추가
rules: {"@typescript-eslint/no-explicit-any": "off",// any 타입 허용}
자세한 옵션을 포함한 예제
// Node.js 내장 모듈에서 dirname 함수를 가져옴 (파일 경로의 디렉토리명 추출용)import{dirname}from'path';// Node.js 내장 모듈에서 fileURLToPath 함수를 가져옴 (URL을 파일 경로로 변환)import{fileURLToPath}from'url';// ESLint의 FlatCompat 클래스를 가져옴 (기존 설정 형식을 새로운 flat config 형식으로 변환)import{FlatCompat}from'@eslint/eslintrc';// 현재 파일의 URL을 파일 경로로 변환 (ES 모듈에서 __filename 대체)const__filename=fileURLToPath(import.meta.url);// 현재 파일이 위치한 디렉토리 경로를 추출 (ES 모듈에서 __dirname 대체)const__dirname=dirname(__filename);// FlatCompat 인스턴스를 생성하여 기존 ESLint 설정을 새로운 형식으로 변환할 수 있게 함constcompat=newFlatCompat({baseDirectory: __dirname,// 기준 디렉토리를 현재 프로젝트 루트로 설정});// ESLint 설정 배열 정의 (flat config 형식)consteslintConfig=[// Next.js의 기본 ESLint 규칙들을 확장 (성능, 접근성, TypeScript 관련 규칙 포함)
...compat.extends('next/core-web-vitals','next/typescript'),// 전역 설정: ESLint가 검사하지 않을 파일/디렉토리 지정{ignores: ['node_modules/**',// npm 패키지들이 설치된 디렉토리 (외부 라이브러리)'.next/**',// Next.js 빌드 결과물 디렉토리'out/**',// Next.js 정적 내보내기 결과물 디렉토리'build/**',// 일반적인 빌드 결과물 디렉토리'next-env.d.ts',// Next.js TypeScript 환경 정의 파일 (자동 생성)],},// 파일별 규칙 설정: 특정 파일 확장자에 적용할 규칙들{files: ['**/*.{js,jsx,ts,tsx}'],// JavaScript, JSX, TypeScript, TSX 파일에 적용rules: {// ===== Tailwind CSS 관련 규칙 ====='tailwindcss/classnames-order': 'warn',// Tailwind 클래스 순서를 일관되게 정렬 (경고)'tailwindcss/no-custom-classname': 'warn',// 정의되지 않은 커스텀 클래스 사용 시 경고'tailwindcss/no-contradicting-classname': 'error',// 상충하는 클래스 사용 시 오류 (예: hidden block)// ===== React 관련 규칙 ====='react/jsx-key': 'error',// 배열 렌더링 시 각 요소에 고유한 key prop 필수 (오류)'react/no-unescaped-entities': 'off',// HTML 엔티티(&, <, > 등) 직접 사용 허용 (비활성화)'react/display-name': 'off',// 함수형 컴포넌트의 displayName 설정 필수 해제 (비활성화)// ===== 일반적인 JavaScript/TypeScript 규칙 ====='prefer-const': 'error',// 재할당되지 않는 변수는 const 사용 강제 (오류)'no-unused-vars': 'off',// 기본 unused variables 규칙 비활성화 (TypeScript 버전 사용)'@typescript-eslint/no-unused-vars': [// TypeScript용 사용되지 않는 변수 감지 규칙'error',// 오류 레벨로 설정{argsIgnorePattern: '^_'},// _로 시작하는 매개변수는 사용하지 않아도 허용],'@typescript-eslint/no-explicit-any': 'off',// any 타입 사용 허용 (타입 안전성 규칙 비활성화)// ===== Import 관련 규칙 ====='import/order': [// import 문의 순서와 그룹화 규칙'error',// 오류 레벨로 설정{groups: [// import 그룹 순서 정의'builtin',// 1순위: Node.js 내장 모듈 (fs, path 등)'external',// 2순위: npm 패키지 (react, next 등)'internal',// 3순위: 프로젝트 내부 모듈 (@/components 등)'parent',// 4순위: 상위 디렉토리 모듈 (../utils 등)'sibling',// 5순위: 같은 디렉토리 모듈 (./config 등)'index',// 6순위: index 파일 (./index 등)],'newlines-between': 'always',// 각 그룹 사이에 빈 줄 필수alphabetize: {// 그룹 내에서 알파벳 순 정렬order: 'asc',// 오름차순 정렬 (a-z)caseInsensitive: true,// 대소문자 구분 없이 정렬},},],},},];// ESLint 설정을 기본 내보내기로 설정exportdefaulteslintConfig;
5.2. Prettier 와 ESLint 통합 설정
ESLint 와 Prettier 충돌 하지 않도록 설정
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
eslint.config.mjs에 prettier 설정 추가
import{dirname}from'path';import{fileURLToPath}from'url';import{FlatCompat}from'@eslint/eslintrc';// Prettier 플러그인 추가importeslintPluginPrettierfrom'eslint-plugin-prettier';importeslintConfigPrettierfrom'eslint-config-prettier';const__filename=fileURLToPath(import.meta.url);const__dirname=dirname(__filename);constcompat=newFlatCompat({baseDirectory: __dirname,});consteslintConfig=[
...compat.extends('next/core-web-vitals','next/typescript','prettier'),{plugins: {prettier: eslintPluginPrettier,// Prettier 플러그인 추가},rules: {
...eslintConfigPrettier.rules,// Prettier와 충돌하는 ESLint 규칙 비활성화'prettier/prettier': ['warn',{endOfLine: 'auto'}],// Prettier 스타일을 강제 적용 (오류 발생 시 ESLint에서 표시)'@typescript-eslint/no-unused-vars': 'warn',// 기존 TypeScript 규칙 유지'@typescript-eslint/no-explicit-any': 'off',// any 타입 사용 허용},},];exportdefaulteslintConfig;