JS-Developer 프론트엔드 개발세팅

프로젝트 진행 전 디렉토리 구조 및 설치 환경세팅

---

프로젝트 생성

1. npm create vite@latest

CRA는 기본적으로 웹팩을 사용하여 빌드 및 번들링을 수행
Vite는 빠른 핫 모듈 리로딩(HMR)과 빌드 시간을 최소화하기 위해 ES 모듈을 사용

• CRA -> Vite로 프로젝트 진행이유
  • 번들링을 생략하여 개발 서버를 빠르게 구동
  • 더 빠른 리로딩과 캐싱을 위해 HTTP 상태 코드를 활용
  • HMR을 위해 native ESM을 사용한다. 따라서 앱에 대한 변경사항이 빠르게 반영
  • Vite가 설정한 최소한의 config로도 사용가능

참고자료
https://velog.io/@jaewoneee/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B3%B4%EC%9D%BC%EB%9F%AC%ED%94%8C%EB%A0%88%EC%9D%B4%ED%8A%B8-Create-React-App-vs-Vite

2. TypeScript - SWC

SWC는 "Speedy Web Compiler"의 약자로, Rust에서 개발된 초고속 JavaScript/TypeScript 컴파일러

• TypeScript -> TypeScript+SWC 옵션
  • 빠른 컴파일 속도와 효율적인 개발 환경으로 대규모 프로젝트에 적합
  • 단 타입 검사를 별도로 설정해야하는 단점이 있지만, 기존에 사용하지 않았던 방식으로 시도해봄

참고자료
https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://swc.rs/

총정리

1) npm create vite@latest

2) Project Name 입력
    - Project Name

3) Package Name 입력
    - Project Name

4) Framework 선택
    - react

5) Variant 선택
    - TypeScript - SWC

---

추가 라이브러리

1. Axios

브라우저와 Node.js에서 사용할 수 있는 Promise 기반의 HTTP 통신 라이브러리

• Axios 사용이유
  • Promise 기반으로 비동기 통신을 쉽게 처리 가능
  • 요청 인터셉터 / 응답 인터셉터 기능을 통해 공통 로직 처리 용이 (ex: 토큰 삽입, 에러 처리)
  • JSON 자동 변환

2. Zustand

리액트 전용 상태 관리 라이브러리

• Zustand 사용이유
  • 가볍고 빠름: 압축 시 1KB 이하
  • Redux처럼 복잡한 reducer/action 등의 함수가 없어 간단히 사용가능 (소규모 프로젝트 적합)

3. eslint, prettier

ESLint는 자바스크립트/타입스크립트 코드에서 문법 오류, 잠재적인 문제, 스타일 규칙 위반 등을 검사
Prettier는 코드의 형식(포맷)을 자동으로 맞춰주는 도구 (들여쓰기, 세미콜론, 따옴표, 줄바꿈 등등...)

• eslint, prettier 사용이유
  • 협업 시 코드 통일
  • 코드 품질 + 형식 모두 관리

• 그 외 설정
  

총정리

Axios (서버 통신)
    - npm install axios

Zustand (상태 관리)
    - npm install zustand

React Router (라우터)
    - npm install react-router-dom

React I18n (다국어)
    - npm install react-i18next i18next

# 수정됨
eslint, prettier
    - npm i -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

---

디렉토리 구조

src
├── assets
│   ├── img
│   └── styles
├── components
│   ├── layout
│   └── ui
├── hooks
│   └── useNetwork.ts
├── i18n
│   ├── en.json
│   ├── ko.json
│   └── index.ts
├── pages
│   ├── demo
│   ├── error
├── routes
│   └── index.tsx
├── shared
│   ├── constant.ts
│   └── util.ts
├── stores
│   └── userInfo.ts
└── type
    └── userInfo.ts

---