프런트엔드 개발 환경

dictionary-app 저장소를 기준으로 설명한다.

기술 스택

프레임워크

React 19 (React Compiler 활성화)

빌드 도구

Vite (Rolldown)

Chakra UI v3 + Emotion

상태/통신

TanStack Query · React Router · React Hook Form + Zod · Zustand · axios

패키지 매니저는 pnpm만 사용한다(npm/yarn 금지, pnpm-lock.yaml 기준).
Terminal window
```
pnpm install
```
dictionary-api(백엔드)가 형제 디렉토리(../dictionary-api)에 클론되어 있어야 API 연동이 된다.
백엔드 API 주소를 .env.local에 설정한다(VITE_APP_API_URL). 로컬 백엔드 기본 포트는 8080. nvm/pnpm 설치부터 환경변수 파일 자동 생성까지 전체 절차는 프런트엔드 개발 환경 설정 참고.
개발 서버 실행:
Terminal window
```
pnpm dev
```

명령	설명
`pnpm dev`	개발 서버 실행
`pnpm build`	타입체크(`tsc -b`) + 프로덕션 빌드
`pnpm lint`	oxlint 실행
`pnpm preview`	빌드 결과 미리보기
`pnpm test`	vitest로 `tests/*/.test.ts` 실행(`src/utils`의 순수 함수 대상)
`pnpm exec tsc -b --noEmit`	타입만 빠르게 검사(`pnpm build`가 `tsc -b`를 포함해 별도 스크립트는 없다)
`pnpm gen:api-types`	백엔드 OpenAPI 스펙(`localhost:8080/v3/api-docs`)에서 `src/types/schema.ts` 생성

JWT가 아니라 세션 쿠키로 인증한다. axios는 VITE_APP_API_URL을 baseURL로 쓰고, withCredentials: true로 세션 쿠키를 실어 보낸다(src/hooks/useAxiosInterceptor.ts 참고).

디렉토리 네이밍(케밥 케이스, index.ts 배럴 export), 훅 접미사(Api/Query/Mutation/Store) 등 세부 규칙은 프로젝트 디렉토리 구성 참고.

Prettier/oxlint가 자동으로 강제하는 규칙과, 화살표 함수·handle 접두사·export default 금지처럼 직접 신경 써야 하는 규칙 전체는 코딩 컨벤션 참고.

husky pre-commit 훅이 포맷·린트·빌드를 검사해 실패하면 커밋을 막는다 — --no-verify로 우회하지 않는다. 자세한 내용은 깃훅 가이드 참고.