React Native + Expo + TypeScript + ESLint + Prettier 환경 설정

React Native 앱을 Expo와 TypeScript로 설정하고, ESLint & Prettier로 코드 관리하기

---

📌 1. Expo 프로젝트 생성

1.1 Expo CLI 설치

Docs: https://docs.expo.dev/get-started/create-a-project/
System requirements:

• Node.js (LTS).
• macOS, Windows (Powershell and WSL 2), and Linux are supported.

먼저, Expo를 설치한다.

1.2 Expo 프로젝트 생성

Expo TypeScript 프로젝트를 생성한다.

npx create-expo-app -t

Template은 Blank (TypeScript)로 설정 후 프로젝트 이름 설정 (예시로 my-app이라 지정)

cd my-app

생성이 완료되면 프로젝트 폴더로 이동

1.3 Expo router 종속성 설치

Expo-router Docs: https://docs.expo.dev/router/installation/

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

---

📌 2. TypeScript 설정

2.1 TypeScript 패키지 설치

npx expo install typescript @types/react @types/react-native -- --save-dev

// 위 명령어가 에러난다면
npm install --save-dev typescript @types/react @types/react-native

2.2 tsconfig.json 설정

tsconfig.json파일이 없다면 만들고 아래와 같이 수정합니다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "target": "esnext", // 최신 ECMAScript 문법을 사용
    "module": "esnext", // ESNext 모듈 시스템을 사용
    "lib": ["esnext", "dom"], // 최신 ECMAScript 및 DOM API 사용 가능
    "jsx": "react-native", // React Native에서 JSX를 사용할 수 있도록 설정

    "strict": true, // TypeScript의 엄격한 타입 검사를 활성화
    "noImplicitAny": true, // 암시적인 `any` 타입을 허용하지 않음 (타입을 명확히 지정해야 함)

    "moduleResolution": "node", // Node.js 스타일의 모듈 해석 방식 사용
    "allowSyntheticDefaultImports": true, // `import React from 'react'` 같은 구문을 허용
    "resolveJsonModule": true, // JSON 파일을 import 가능하게 함
    "isolatedModules": true, // 단일 파일 단위의 트랜스파일링을 강제하여 최적화
    "skipLibCheck": true, // `node_modules` 내 타입 선언 파일을 검사하지 않아 빌드 속도 향상

    "baseUrl": "./", // 기본 경로를 프로젝트 루트로 설정
    "paths": {
      "@/*": ["src/*"] // `@/components/Button` 같은 경로 단축(alias) 기능 제공
    }
  },
  "include": ["src", "App.tsx", "index.tsx", "eslint.config.mjs"], // 프로젝트에서 TypeScript가 적용될 파일들
  "exclude": ["node_modules", "babel.config.js", "metro.config.js"] // 빌드 대상에서 제외할 파일들
}

---

📌 3. ESLint & Prettier 설정

TypeScript-eslint Docs: https://typescript-eslint.io/packages/typescript-eslint/#usage
코드 스타일을 통일하고, 일관된 코딩 컨벤션을 유지하기 위해 ESLint와 Prettier를 설정합니다.

3.1 ESLint & Prettier 패키지 설치

npx expo install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks typescript-eslint @eslint/js -- --save-dev

3.2 eslint.config.js 설정

ESLint v9.0.0 부터는 default 설정 파일 이름은 eslint.config.js 로 변경되었다.
만약 .eslintrc.* 를 사용하고 있었다면 아래 Docs 참고하여 migration 해야한다.
Docs: https://eslint.org/docs/latest/use/configure/migration-guide

루트 디렉터리에 eslint.config.mjs 파일을 생성하고 아래 내용을 추가합니다.

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import prettier from 'eslint-plugin-prettier';

export default tseslint.config({
  files: ['**/*.ts', '**/*.tsx'], // TypeScript 및 JSX 파일에 적용
  extends: [
    eslint.configs.recommended, // JavaScript 기본 권장 규칙
    tseslint.configs.recommended, // TypeScript 권장 규칙
  ],
  plugins: {
    '@typescript-eslint': tseslint.plugin,
    react,
    prettier,
  },
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙 적용
    'react/react-in-jsx-scope': 'off', // React 17+에서는 JSX 사용 시 React 불필요
    '@typescript-eslint/no-explicit-any': 'warn', // any 타입 사용 시 경고
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 함수 반환 타입 명시 비활성화
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], // 사용하지 않는 변수 경고 (예외: _로 시작하는 변수)
    '@typescript-eslint/consistent-type-imports': 'warn', // `import type {}` 사용 권장
  },
});

3.3 .prettierrc.js 설정

Prettier 설정 파일을 만들어서 추가합니다.

module.exports = {
  semi: true,            // 문장 끝에 세미콜론(;)을 추가
  singleQuote: true,     // 문자열을 작은따옴표(')로 변환
  trailingComma: 'all',  // 여러 줄일 때 마지막 요소에도 쉼표 추가 (가독성 향상)
  printWidth: 80,        // 한 줄 최대 80자로 제한 (자동 줄바꿈 적용)
  tabWidth: 2, 	         // 들여쓰기 시 공백 2칸 사용
  useTabs: false,        // 들여쓰기에 공백(Space) 사용 (true로 설정하면 탭 사용)
  arrowParens: 'always', // 화살표 함수에서 매개변수가 1개여도 괄호 추가
  endOfLine: 'lf',       // 줄바꿈 형식을 LF(Line Feed)로 설정 (Windows CRLF 방지)
};

3.4 ESLint & Prettier 적용

아래 명령어를 실행하여 설정을 적용합니다.

npx eslint --fix .     // 코드 오류 자동 수정 & ESLint 규칙 적용
npx prettier --write . // 코드 스타일을 깔끔하게 정리

package.json의 scripts부분

"scripts": {
  ...
  "lint": "eslint . --fix",
  "format": "prettier --write .",
  "lint:fix": "npm run lint && npm run format"
},

npm run lint:fix : ESLint & Prettier 실행 명령어 추가

---

📌 4. VS Code 자동 적용 설정

VS Code에서 ESLint와 Prettier를 저장할 때 자동으로 적용되도록 설정합니다.

.vscode/settings.json 설정

VS Code 프로젝트 루트에 .vscode/settings.json 파일을 만들고, 아래 설정을 추가합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

이제 저장할 때 자동으로 코드 스타일이 정리된다.
만약 prettier가 잘 동작하지 않는다면 vscode를 재실행하자

---

📌 5. Expo 앱 실행

설정이 끝났다면, 앱을 실행해봅시다! 🚀

npx expo start

• 📱 iOS 시뮬레이터 실행: i
• 🤖 Android 에뮬레이터 실행: a
• 💻 웹 브라우저 실행: w

---