Skip to content
민트초코비즈

프런트앤드 개발 환경 설정

dictionary-app(React 19 + TypeScript + Vite) 프로젝트 기준으로 정리한다.

기술 스택

Section titled “기술 스택”
  • 프레임워크: React 19(React Compiler 활성화)
  • 빌드 도구: Vite(Rolldown)
  • 언어: TypeScript
  • UI: Chakra UI v3 + Emotion, Heroicons
  • 데이터: TanStack Query, axios
  • 폼: react-hook-form + zod
  • 상태: zustand
  • 그리드: ag-grid
  • 린트/포맷: oxlint, Prettier
  • 커밋 규칙: commitlint(Conventional Commits) + husky pre-commit

nvm

Section titled “nvm”

  1. 설치

    홈페이지에서 최신 버전을 확인 후 링크의 버전을 변경하여 설치한다.

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

  2. 설치 확인

    Terminal window
    nvm -v

  3. node.js 설치

    Terminal window
    nvm list available
    nvm install ${NODE_JS_VERSION}

  4. node.js 버전 전환

    Terminal window
    nvm use ${NODE_JS_VERSION}

pnpm

Section titled “pnpm”
  1. 설치
    Terminal window
    npm install -g pnpm@latest-10
  2. 버전 확인
    Terminal window
    pnpm -v
  3. 라이브러리 설치/제거
    Terminal window
    pnpm add ${PACKAGE_NAME}
    pnpm add -D ${DEV_PACKAGE_NAME}
    pnpm remove ${PACKAGE_NAME}

webstorm / vscode

Section titled “webstorm / vscode”
  1. WebStorm — Homepage에서 설치. Vim 플러그인은 선택.
  2. VSCode — Homepage에서 설치. Prettier(필수), Vim(선택) 플러그인 설치.

개발 명령어

Section titled “개발 명령어”
  1. 개발 서버 실행
    Terminal window
    pnpm dev
  2. 빌드(타입체크 tsc -b 포함)
    Terminal window
    pnpm build
  3. 린트 / 프리뷰 / 테스트
    Terminal window
    pnpm lint
    pnpm preview
    pnpm test

로컬 환경변수 (.env.local)

Section titled “로컬 환경변수 (.env.local)”
  1. 스크립트로 자동 생성(권장) — .env.local이 없을 때만 VITE_APP_API_URL=http://localhost:8080으로 새로 만든다.
    Terminal window
    pnpm run setup:env
    로컬 백엔드가 다른 포트라면 인자로 넘긴다.
    Terminal window
    pnpm run setup:env -- http://localhost:9000
  2. 수동 생성 — 이미 있는 값을 바꿀 때는 직접 수정한다.
    .env.local
    VITE_APP_API_URL=http://localhost:8080
  3. 설정 후 pnpm dev를 재시작한다.

API 타입 생성 (Swagger/OpenAPI)

Section titled “API 타입 생성 (Swagger/OpenAPI)”

백엔드(dictionary-api)의 Swagger 스펙에서 DTO 타입을 TypeScript로 자동 생성한다.

  1. 백엔드 서버를 로컬(localhost:8080)에서 실행한다.
  2. 타입 생성 스크립트를 실행한다.
    Terminal window
    pnpm run gen:api-types
    내부적으로 http://localhost:8080/v3/api-docs 스펙을 읽어 src/types/schema.ts를 생성하고 prettier --write로 포맷팅한다.
  3. 생성된 타입은 components["schemas"]["DtoName"] 형태로 참조한다. 
    import type {components} from '@/types'
    

    type DomainResponseDto = components['schemas']['DomainResponseDto']