npm package: @remember-web/eslint-config
Description: eslint config for remember web
Author: dramancompany
Latest version: 0.0.1

# @remember-web/eslint-config

Remember 프로젝트 ESLint 설정

## 설치

### 기본 설치
```bash
yarn add -D @remember-web/eslint-config
```

### Yarn PnP 프로젝트 추가 설정
Yarn PnP(Plug'n'Play)를 사용하는 프로젝트에서는 TypeScript ESLint 의존성을 추가로 설치해야 합니다:

```bash
# Yarn PnP 프로젝트에서 필수 추가 설치
yarn add -D typescript-eslint @typescript-eslint/types @typescript-eslint/type-utils
```

**Yarn PnP 프로젝트 확인 방법:**
- 프로젝트 루트에 `.pnp.cjs` 파일이 있으면 Yarn PnP 사용 중
- `yarn --version`이 4.x 이상이고 `.yarnrc.yml`에서 `nodeLinker: pnp` 설정이 있으면 PnP 사용 중

## 마이그레이션 가이드

### 1. 현재 상태 확인

먼저 프로젝트의 현재 ESLint 설정을 확인하세요:

```bash
# 현재 사용 중인 ESLint 버전 확인
yarn list eslint

# 현재 설정 파일 확인
ls -la | grep eslint
# .eslintrc.js, .eslintrc.json, .eslintignore 등이 있는지 확인
```

### 2. 기존 패키지 제거

현재 설치된 ESLint 관련 패키지들을 제거하세요:

```bash
# 기존 ESLint config들 제거
yarn remove eslint-config-airbnb
yarn remove eslint-config-airbnb-typescript  
yarn remove eslint-config-react-app
yarn remove eslint-config-prettier

# 기존 ESLint 플러그인들 제거
yarn remove eslint-plugin-react
yarn remove eslint-plugin-react-hooks
yarn remove eslint-plugin-import
yarn remove eslint-plugin-jsx-a11y
yarn remove @typescript-eslint/eslint-plugin
yarn remove @typescript-eslint/parser

# Next.js 관련 (사용하는 경우만)
yarn remove @next/eslint-config-next
yarn remove eslint-config-next
```

### 3. ESLint 버전 업데이트

```bash
# ESLint 9.3+ 설치
yarn add -D eslint

# 새로운 config 설치
yarn add -D @remember-web/eslint-config
```

### 4. 기존 설정 파일 제거

```bash
# 기존 설정 파일들 삭제
rm .eslintrc.js
rm .eslintrc.json
rm .eslintignore

# 또는 한번에
rm .eslintrc.* .eslintignore
```

### 5. 새로운 설정 파일 생성

프로젝트 루트에 `eslint.config.mjs` 파일을 생성하세요:

#### React + TypeScript 프로젝트
```javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: [
      'node_modules/**',
      'build/**',
      'dist/**', 
      'public/**',
      '*.min.js'
    ],
  },
  ...config.configs.react,
  ...config.configs.typescript
];
```

#### Next.js 프로젝트
```javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: [
      'node_modules/**',
      '.next/**',
      'out/**',
      'build/**',
      'public/**'
    ],
  },
  ...config.configs.react,
  ...config.configs.typescript,
  ...config.configs.next
];
```

### 6. 설정 테스트

```bash
# 설정이 제대로 적용되는지 확인
yarn eslint --version
yarn eslint src/ --max-warnings 0

# 자동 수정 실행
yarn eslint src/ --fix
```

### 7. package.json 스크립트 업데이트

```json
{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix"
  }
}
```

## 마이그레이션 전후 비교

### Before (.eslintrc.js)
```javascript
module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'prettier'
  ],
  plugins: ['react', '@typescript-eslint', 'import'],
  rules: {
    // 많은 커스텀 규칙들...
  },
  parserOptions: {
    project: './tsconfig.json'
  }
};
```

### After (eslint.config.mjs)
```javascript
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: ['node_modules/**', 'build/**', 'dist/**'],
  },
  ...config.configs.react,
  ...config.configs.typescript
];
```

## 자주 발생하는 문제

### "Cannot resolve configuration" 에러
```bash
# Node.js 버전이 18+ 인지 확인
node --version

# 캐시 삭제 후 재설치
rm -rf node_modules yarn.lock
yarn install
```

### "Parsing error" 발생시
```javascript
// eslint.config.mjs에 TypeScript parser 설정 확인
export default [
  // ... 기존 설정
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json'
      }
    }
  }
];
```

### 기존 커스텀 규칙 유지하기
```javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  ...config.configs.react,
  ...config.configs.typescript,
  
  // 프로젝트별 커스텀 규칙
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': 'warn',
      'prefer-const': 'error',
      // 기존에 사용하던 규칙들 추가
    }
  }
];
```

## 설정 옵션

### 기본 구성

| 설정 | 설명 | 사용 시점 |
|------|------|-----------|
| `react` | React 관련 규칙 | React 프로젝트 필수 |
| `typescript` | TypeScript 규칙 | TypeScript 사용시 필수 |
| `next` | Next.js 규칙 | Next.js 프로젝트 |
| `fsd` | FSD 아키텍처 강제 | FSD 패턴 사용시 |
| `reactCompiler` | React Compiler 최적화 | React 19+ |

### 추가 설정 예시

```javascript
// 모든 기능 사용
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: ['node_modules/**', 'build/**'],
  },
  ...config.configs.react,
  ...config.configs.typescript,
  ...config.configs.next,
  ...config.configs.fsd,
  ...config.configs.reactCompiler,
  
  // 테스트 파일별 규칙
  {
    files: ['**/*.test.{js,jsx,ts,tsx}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off'
    }
  }
];
```