제목은 React로 하겠습니다. 근데 Vite를 곁들인

Jay·2025년 1월 9일
ASACTILWEB 기초공부

ASAC_07

목록 보기
10/13

NVM

Node Version Manager의 줄임말이다.
로컬마다 설치되어있는 Node의 버전이 다를텐데, 그에 따른 dependency 관리가 되지 않을 것이다.

내 컴퓨터는 돌아가는데 너껀 왜 안돼???? 금지

npm --version
node --version
node -v

위 코드로 버전 확인이 가능하다.

Mac 사용중이므로, homebrew를 통해 쉽게 해결

다음 설정을 한다

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

Deeper Shell Integration

경로 내 .nvmrc 파일을 확인하고 자동으로 node 버전을 install, use해준다.

# 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

mac 기준이며, 위 스크립트를 ~/.zshrc에 입력해둔다.

  • .nvmrc 파일 : nvm install / nvm use 명령어 호출 시 본 .nvmrc 파일 내 명시된 node 버전 선택
  • .npmrc 파일 : engine-strict = true 옵션 명시 시 어긋난 node / npm 버전 사용 시 에러 발생
  • package.json 내 "engine" 옵션 : 프로젝트 설치 및 구동을 위해 필요한 node / npm 버전 명시

Vite를 통한 React 프로젝트 생성

CRA 아니에요??
과도한 라이브러리 생태계의 Dependency를 책임지지 않고, Depreceated 되었다.
Vercel에서는 CNA(Create-Next-App)을 추천하지만, 현재는 React만 다룰 것이기 때문에, Vite를 통해 React.js를 생성한다.

Vite

Vite : 빠른 개발 서버와 번들링을 제공하는 Build Tool
(React 프로젝트 초기화 시 자동 설치됨)

  • 이유
    Webpack과 같은 기존 번들러 대비 빠른 속도와 간편한 설정 제공
    • 개발 서버 구동 속도가 빠름 (ES 모듈 기반)
    • Hot Module Replacement (HMR) 지원으로 코드 변경 시 즉각 반영
    • 운영 환경에서 최적화된 번들링 제공
    • 플러그인 시스템으로 확장성 보장
  • Vite 설정 파일: vite.config.* 사용
    • 설정 파일 종류
      • vite.config.js: CommonJS 형식 사용 시
      • vite.config.cjs: ESM 사용 시 (package.json 내 "type": "module" 명시 시)
      • vite.config.ts: TypeScript 형식 사용 시
    • 주요 설정 옵션
      • plugins: React 플러그인 등 추가
      • server: 개발 서버 설정 (e.g., 포트, 프록시)
      • build: 운영 환경 번들링 설정 (e.g., 출력 경로, 코드 분리)
      • resolve: 모듈 경로 별칭 설정
  • 추가 파일 및 폴더
    • index.html
      • Vite의 진입점 파일
      • React의 root 요소와 스크립트 태그 (main.js / .jsx) 포함
    • src 폴더
      • 프로젝트 소스 코드 디렉토리
      • 기본적으로 main.js 또는 main.jsx를 통해 React 컴포넌트를 렌더링
    • node_modules 폴더
      • Vite 및 기타 의존성 라이브러리 저장
  • 추가 팁
    • React 플러그인: @vitejs/plugin-react 설치 필요
    • VSCode 사용 시 Vite와 관련된 익스텐션 설치 추천
    • 운영 환경 최적화 시 Vite의 build 옵션 세부 조정 고려 
npm create vite@latest react-tutorial -- --template react

하면 아래와 같이 프로젝트가 생성된다.

Vite-React 프로젝트 시작 시 파일 설명 (역순)

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

Formatter & Linter & IntelliSense 설정 파일들

  • jsconfig.json
    VSCode IntelliSense 인식 설정
  • .prettierrc
    Formatter 중 하나인 Prettier 설정

ESLint

VS Code에 설치하자

ESLint : 문법 오류를 지적해주는 Linter 적용
(Vite로 React 프로젝트 시작 시 ESLint는 자동으로 설치됨)

  • 이유
    JS는 컴파일 과정이 없는 인터프리터 언어라 런타임 에러가 자주 발생함 → 사전 에러 확인 필요
    • 당장은 개발 속도가 느려지는 것처럼 느껴지겠지만, 문법 오류로 시간을 날리는 상황을 줄임
    • 코딩 스타일 관련 특정 Lint 오류가 귀찮다면 예외 규칙 등록 가능
      • 예외 규칙 등록을 통해 자신만의 ESLint 설정 파일을 만들 수 있음
  • 8 버전과 9 버전의 ESLint 설정 파일 명칭과 문법 다름
    학습 시 8 버전 .eslintrc.cjs 사용
    • 8 버전 설정 파일: .eslintrc.*
      (Deprecated 상태지만, 현업에서 널리 사용되고 있어 이걸 사용)
      • .eslintrc.json: 정말 라떼 시절 설정 파일
      • .eslintrc.js: 그나마 최신
      • .eslintrc.cjs: ESM 사용 시 (package.json 내 "type": "module" 명시 시)
        • 예외 규칙 추가
        • .eslintignore 파일에 명시
        • 또는 설정 파일에 ignorePatterns 추가
        • 파일 내 예외 규칙 라인 설정
          • 일부 라인: // eslint-disable-next-line
          • 전체 파일: /* eslint-disable */
    • 9 버전 설정 파일: eslint.config.*
      (e.g., eslint.config.js, eslint.config.cjs)
        • 예외 규칙 추가: ignores 설정 추가

Formatter - Prettier

Prettier : 코드 스타일을 자동으로 정리해주는 Formatter
(Vite 프로젝트에 자동 설치는 되지 않으니, 필요 시 별도 설치 필요)

npm install -D -E prettier
npm install -D eslint-config-prettier//이제 안씀

VS Code에도 설치하자

  • 장점
    코딩 스타일을 일관되게 유지하여 협업 시 코드 가독성을 높이고 리뷰 시간을 단축함
    • 개인적으로는 한 줄로 길게 쓰거나 괄호를 대충 넣은 코드도 자동 정리되어 편리
    • ESLint와 함께 사용하면 더 강력한 코드 품질 관리 가능
      • 충돌 시 eslint-config-prettier 설치하여 Prettier 설정이 우선하도록 설정
  • Prettier 설정 파일: .prettierrc.* 사용
    • 설정 파일 종류
      • .prettierrc
      • .prettierrc.json
      • .prettierrc.js
      • .prettierrc.cjs: ESM 사용 시 (package.json 내 "type": "module" 명시 시)
      • .prettierrc.yml 또는 .prettierrc.yaml: YAML 형식 사용 시
      • .prettier.config.js 또는 .prettier.config.cjs로도 설정 가능
    • 예외 규칙 설정
      • 특정 파일/디렉토리 제외: .prettierignore 파일에 명시
      • Prettier가 적용되지 않길 원하는 코드 블록: // prettier-ignore
        • 다음 줄에 적용됨
  • 추가 팁
    • VSCode 사용 시 Prettier 플러그인 설치 → 저장 시 자동 포맷 설정 가능
    • 팀 내 스타일 통일 위해 설정 파일 공유 필수
    • Prettier와 ESLint를 동시에 사용할 경우 충돌 방지를 위해 Lint 규칙 조정 필요

출처: ASAC 07기 강의자료

profile
Jay
FE
이전 포스트

JSX, (단방향, 양방향) 바인딩

다음 포스트

await

0개의 댓글