[React] Vite로 React 초기 앱 설정

 

React 개발 환경 설정

---

1. Vite를 통한 React 앱 설정

과거에는 CRA(Create-React-App)을 사용해 React앱을 생성했으나, 현재는 Deprecated 되었다. React 공식 홈페이지에서 CRA 대신 CNA(Create-Next-App)을 추천하지만, 아직 Next.js 실습단계가 아니기 때문에 Vite로 React 앱을 설정할 예정이다.

 

1-1. Vite로 프로젝트를 설정하는 명령어

npm create vite@latest react-tutorial -- --template react

 

1-2. Node 버전 관리 및 nvm 설치

1. nvm 설치 명령어

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

 

2. nvm 명령어 사용을 위한 환경 설정

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

• Mac: `~/.zshrc`에 설정 추가 후 `source ~/.zshrc`
• Windows: `~/.bashrc`에 설정 추가 후 `source ~/.bashrc`

3. nvm을 통한 Node 설정 및 npm 사용

자주 사용하는 명령어:

• `nvm list`: 설치된 Node 버전 확인
• `nvm install 18`: Node 18 버전 설치
• `nvm install --lts 18`: 18 버전 중 가장 최신의 LTS 버전 node 설치
• `nvm use 18`: Node 18 버전 선택
• `nvm install`: 현재 위치한 프로젝트의 `.nvmrc`파일 내 명시되어있는 node 버전 자동 설치
• `nvm use`: 현재 위치한 프로젝트의 `.nvmrc`파일 내 명시되어 있는 node 버전 자동 선택

Deeper Shell Integration: `.nvmrc` 기준의 `install`/`use` 자동 사용 위한 쉘 스크립트 등록

 

• Windows `~/.bashrc`

cdnvm() {
    command cd "$@" || return $?
    nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

    # If there are no .nvmrc file, use the default nvm version
    if [[ ! $nvm_path = *[^[:space:]]* ]]; then

        declare default_version
        default_version="$(nvm version default)"

        # If there is no default version, set it to `node`
        # This will use the latest version on your machine
        if [ $default_version = 'N/A' ]; then
            nvm alias default node
            default_version=$(nvm version default)
        fi

        # If the current version is not the default version, set it to use the default version
        if [ "$(nvm current)" != "${default_version}" ]; then
            nvm use default
        fi
    elif [[ -s "${nvm_path}/.nvmrc" && -r "${nvm_path}/.nvmrc" ]]; then
        declare nvm_version
        nvm_version=$(<"${nvm_path}"/.nvmrc)

        declare locally_resolved_nvm_version
        # `nvm ls` will check all locally-available versions
        # If there are multiple matching versions, take the latest one
        # Remove the `->` and `*` characters and spaces
        # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
        locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\->*' | command tr -d '[:space:]')

        # If it is not already installed, install it
        # `nvm install` will implicitly use the newly-installed version
        if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
            nvm install "${nvm_version}";
        elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
            nvm use "${nvm_version}";
        fi
    fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit

 

• Mac `~/.zshrc`

# place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] && [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc

Vite-React 프로젝트 내 파일 설명 : Vite 통한 React 초기 앱 시작 및 ESLint 확인

 

 

스크린샷에서 역순으로 파일 설명

처음 Vite-React 프로젝트를 시작하면 존재하는 설정파일들

• `vite.config.js`: 개발용 런타임 설정 + 운영용 번들링 설정
• `package.json`: 개발용 + 운영용 라이브러리 버전 + 스크립트
  • Semantic Version: 메이저.마이너.패치 + ^ 혹은 ~ 범위
• `package-lock.json`: 디펜던시 트리(라이브러리 설치 순서)
• `index.html`: React에서 렌더하기 위한 시작 HTML
  • `root`: React 렌더링 되는 기준 HTML(크롬으로 보기)
  • `main.js` / `.jsx`: Reac 렌더링하는 JS 
• `.nvmrc`: nvm에서 자동 사용/설치하기 위한 node 버전 명시
• `.npmrc`: 프로젝트에서 npm 시 사용해야하는 node 버전 강제
• `.gitignore: Git 사용 시 관리하지 않을 파일들의 예외 규칙
• `eslintrc.cjs`: 컴파일 설정 = 문법 오류 규칙

아래 진행할 Formatter & Linter & IntelliSense 설정 파일들

• `jsconfig.json`: VSCode 내 IntelliSense 인식 설정
• `.pretterrc`: Formatter 중 하나인 Prettier 설정

---

2. ESLint 설정 (Linter)

ESLint: 문법 오류를 지적해주는 Linter 적용 (Vite를 통해 React 시작 시 ESLint는 기본으로 설치 되어있다.)

• 이유: JS는 컴파일 과정이 없는 인터프리터 언어이기에 런타임 에러가 자주 발생해 사전 에러 확인이 필요
  • 당장은 개발 속도가 느려지는 것 처럼 느껴지겠지만, 문법을 잘못써서 시간을 날리는 상황이 파다하다.
  • 코딩 스타일에 관련된 특정 Lint 오류를 신경쓰기 싫다면 예외 규칙 등록이 가능하다.

ESLint 8 버전 설정파일 인 `.eslintrc.cjs` 초기 설정 코드

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.3" } },
  plugins: ["react-refresh"],
  rules: {
    "react/jsx-no-target-blank": "off",
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
};

• plugins: 추가할 수있는 Rules 리스트를 제공하는 라이브러리, 원하는 것들을 선택하여 적용 가능
• extends: 실제로 Rules 들을 추가해주기 때문에, 원하는 것들을 고를 수 없고 선택지 없이 그대로 적용
  • plugins에서 제공하는 Rules 집합을 그대로 넣을 수 있다.
• rules: plugins에서 제공하는 Rules 중 원하는 것들을 선택하여 적용 가능
  • 일반적인 규칙은 extends를 활용하고, 예외 규칙만 rules 이용

⚠️VSCode 확장 프로그램 중 ESLint를 꼭 설치해야함

---

3. Prettier 설정 (Formatter)

Prettier: 코딩 시 일관된 포맷을 갖게해주는 Formatter 적용

• 이유: 팀 프로젝트 진행 시 각자 로컬에서 공동 코드를 개발할텐데 각자 로컬의 포맷팅에 의한 오염 방지
• ESLint와 Prettier 간 충돌을 방지하기 위해 설정이 필요.

Prettier 설치 명령어

npm install -D -E prettier

• `--save-dev` or `-D`: `devDependencies` 내 라이브러리 추가 및 배포가 아닌 개발시에만 사용
• `--save-exact` or `-E`: 정확한 SemVer 버전 사용 시 (`^5.1.3`이 아닌 `5.1.3`)

npm install -D eslint-config-prettier

• `eslint-config-prettier`: ESLint와 Prettier가 충돌하지 않게하는 ESLint 플러그인
• `prettier-plugin-tailwindcss`: 추후 Tailwind 사용 시 유틸리티 클래스명 순서로 나열하는 플러그인

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
    // Make sure it's always the last config, so it gets the chance to override other configs.
    ➕'eslint-config-prettier',➕
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.3' } },
  plugins: ['react-refresh'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
  },
}

• 8 버전 설정파일  `.eslintrc.cjs` 예시에서 앞서 설치한 `eslint-config-prettier` 플러그인 추가

{
  "name": "react-tutorial",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    ➕"format": "prettier --write ./src",➕
    "preview": "vite preview"
  },
  ...
}

• `package.json` 내 `"format": "prettier --write ./src",` 추가 후 `npm run format` 실행

Prettier 설정파일 인 `.prettierrc` 초기 코드

{
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": false
}

• Prettier 라이브러리를 설치하고 설정하는 건 큰 의미가 없다. 아래처럼 VSCode와 연동하여야 의미를 갖는다.

VSCode 내 Prettier 설정에서 Editor: Format On Save 체그해야 저장 시 적용된다.

VSCode 내 Prettir 설정에서 Editor: Default Formatter 설정 필요

⚠️VSCode 확장 프로그램 중 Prettier 설치한 후, 기본 포맷터 및 저장 시 자동 포맷팅 VSCode 설정 필요

3. IntelliSense 설정 (JSConfig / TSConfig)

jsconfig.json: 개발 언어 에디터(Sublime, VSCode)에서 사용하는 LSP로 intellisense 설정에 해당

• 기존 타입스크립트 설정파일인 `tsconfig.json`을 상속받은 설정파일 `jsconfig.json`

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["esnext", "dom"],
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

• compilerOptions: 원래는 TS 컴파일 옵션이지만 JS에선 컴파일 되진 않고 설정 그대로 쓰려고 이름만 차용.
  • jsx: 본 설정을 하지 않으면 React 파일 내 다음 에러 발생
    • React는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.(ts2686)
      • React가 ESM 모듈을 사용하는데에도 불구하고, UMD 모듈로 사용하려고해서 발생하는 에러
      • 과거에는 JSX 파일에 `import React from 'react';`를 명시적으로 추가해야했지만, 최근에는 JSX 컴파일 시 자동으로 처리되므로 이 설정만으로 해결 가능
  • lib: ES(ECMA Script) 버전별로 문법을 추가할 때 사용하는 설정. 예를 들어, 특정 버전의 ES 문범이 필요할 경우 라이브러리 처럼 추가 가능
    • 예시:
      • ES2017 문법 사용 : `"lib": ["es2017.object"]`
      • ES2015 (ES6) 문법 사용: `"lib" : ["es2015"]`
      • 최신 ES 문법 사용: `"lib" : ["esnext"]
      • DOM 관련 API 사용: `"lib" : ["dom"]` (React 개발 시 필수) 
  • checkJs:
    • 이 옵션을 통해 자바스크립트에서도 타입스크립트처럼 에러를 체크하고 수정할 수 있다. 자바스크립트에서 발생할 수 있는 에러를 미리 확인하고 처리할 수 있는 유용한 도구.
  • baseUrl:
    • 프로젝트 루트를 지정. 일반적으로 `.`으로 설정하며, 이 설정 덕분에 경로 설정이 더 유연해진다.
  • paths:
    • `baseUrl`을 기준으로 절대 경로를 지정할 수 있다. 주로 절대 경로를 통해 모듈을 쉽게 import하기 위해 사용
  • types:
    • Vite는 Node.js API를 기반으로 하므로, 클라이언트 환경에서 사용할 수 있도록 타입 시스템을 추가해야한다.
    • 예를 들어, Vite의 클라이언트 환경 변수 `import.meta.env`나 `.svg`같은 에셋을 다룰 때 필요한 설정이다.
    • 예시: `"types": ["vite/client"]`
  • include:
    • 프로젝트에서 다룰 파일들을 지정하는 옵션. 예를 들어 `.jsx`, `.js` 확장자를 가진 파일들이나 타입 선언 파일을 포함할 수 있다.
  • exclude: 
    • 성능을 위해 인텔리센스가 불필요한 디렉터리나 파일을 제외할 때 사용됨. 예를 들어 `node_modules`나 `dist` 디렉터리를 제외할 수 있다.

이러한 설정들은 프로젝트에서 효율적으로 자바스크립트와 타입스크립트를 다루고, 인텔리센스와 코드 완성 기능을 최적화하는 데 유용하다.

 

⚠️아래 VSCode 확장 프로그램 중 Auto Import 설치를 해야 절대경로 import 가능

⚠️VSCode에도 설정 필요: 사용자 설정 열기 후 `typescript import module specifier` 검색

 

 

⚠️Vite에도 설정 필요: 절대 경로 사용을 위해 `jsconfig.json` 뿐만 아니라 `vite.config.js` 수정 필수

`jsconfig.json`은 VSCode를 위한 컴파일 설정이기에 `vite.config.js` 내 런타임 설정 필수

추가적으로 ESLint에게도 알려줘야한다.

 

1. vite-tsconfig-paths 설치

npm install -D vite-tsconfig-paths

 

2. vite.config.js 수정:

• `vite-tsconfig-paths` 플러그인을 추가하여 Vite에서 절대 경로를 인식하도록 설정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
➕import tsconfigPaths from 'vite-tsconfig-paths';➕

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), ➕tsconfigPaths()➕],
});

• 이 설정을 통해, `jsconfig.json`에 정의된 경로 설정을 Vite에서 그대로 사용할 수 있게 된다. 이로 인해, 매번 복잡한 경로를 설정할 필요 없이 절대경로를 손쉽게 사용가능.

3. 추가적으로 ESLint 설정:

• 절대경로를 사용할 때 ESLint가 경로를 인식할 수 있도록 ESLint 설정도 필요하다. 
  • `jsconfig.json` 파일에서 경로 설정

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
     ➕ "@/*": ["src/*"] ➕
    },
    "types": ["vite/client"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

---

ℹ️참고

[ASAC 6기 강의자료]