[React] vite React설치

[React]

1. [React] vite React설치
   • SWC 설명
2. Project initial setting
   • [React] Prettier, ESLint 세팅
   • [React] ts 세팅 tsconfig.json tsconfig.app.json, tsconfig.node.json 멀까?
   • [React] vite config 설정하기
3. Hooks && Library
   1. [React] Javascript 파일을 Typescript Import해보자
   2. [React] react-router-dom 알아보고 사용하자
   3. [React] child 컴포넌트에서 함수호출하기
   4. [React] useCallback
   5. [React] framer-motion 알아보고 사용하자
   6. [React] Context API
   7. [React] react lazy 지연로딩 예제
   8. [React] react에서 캐싱처리를 위한 react queryd와 indexDB 비교분석
      • [FRONT] Web cache
   9. [React] 스타일 라이브러리 styled-components stitches 비교
4. [React] 프론트 에러추적 도구 Sentry 사용해보기
5. [React] React 19 주요 변경점
6. [React] DOM이란 무엇이고? 가상 DOM이란 무엇인가?
7. [React] preact 알아보기

참고문서
vite 공식홈페이지
SWC 설명 레쓰꼬

Vite?

1. 빠른 서버 시작: Vite는 필요할 때만 코드를 번들링하므로, 특히 큰 프로젝트에서 첫 서버 시작 속도가 매우 빠릅니다.
2. 즉각적인 HMR: 코드 변경 시 페이지 전체를 리프레시하는 대신 변경된 부분만 업데이트하여 빠른 개발 경험을 제공합니다.
3. 모듈 기반 개발: ES 모듈을 직접 사용하므로, 브라우저가 모듈을 즉시 처리할 수 있어 번들링이 필요하지 않습니다.
4. 빌드 성능: 프로덕션 환경에서 ES 모듈을 번들링하고 최적화하여 성능을 극대화합니다.

Vite React 설치

1. 터미널을 열고 아래 명령어를 실행하여 Vite와 React를 함께 설치합니다.

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
    npm create vite@latest
   
    Need to install the following packages:
    create-vite@5.5.3
    Ok to proceed? (y) ? #y입력
   
    > npx
    > create-vite
   
    ? Project name: › #프로젝트이름입력
   
    ? Select a framework: › - Use arrow-keys. Return to submit. #리엑트선택
      Vanilla
      Vue
      React
      Preact
      Lit
      Svelte
      Solid
      Qwik
      Others
   
    ? Select a variant: › - Use arrow-keys. Return to submit. # 타입스크립트 또는 js선택
      TypeScript
      TypeScript + SWC
      JavaScript
      JavaScript + SWC
      Remix ↗
   
    ? #완료
    Scaffolding project in /Users/soon/Desktop/ttttttt/vite-project... # init된 경로
   
    Done. Now run: # 설치방법
   
      cd vite-project
      npm install
      npm run dev
   
   

   설치중에 SWC 궁금해서 정리 SWC 설명 레쓰꼬

2. 프로젝트 폴더로 이동합니다.

   1
   cd your-project-name
   

3. 필요한 의존성을 설치합니다.

   1
   npm install
   

4. 개발 서버를 시작합니다.

   1
   npm run dev
   

마무리

설치는 쉽다 다음에는 react Hooks? 또는 Prettier, ESLint 등 궁금한거 올려야겠다.

• Previous
  [DB] SQL 종류별 비교및 장단점
• Next
  [Compiler] SWC