[React] 프로젝트 만들기

기존의 프로젝트 생성 방식, CRA

• 기존에는, META에서 제작한 create-react-app 으로 프로젝트를 생성.
• 오랜 기간 동안, React의 생태계에서의 표준으로 자리잡았음.

1. 프로젝트를 위한 폴더 생성 후, 해당 위치로 이동

   

2. create-react-app 설치

    npx create-react-app .
   

   

   → 옵션 y 입력(최신 버전 설치)

3. 프로젝트 생성 확인

   

4. 프로젝트 개발 서버 실행

    npm run serve  
   

   

   

• [추가] 전역으로 설치된 패키지 확인 후, 원하는 패키지 삭제

    npm list -g --depth=0  # 전역으로 설치된 패키지 확인
  

  

    npm uninstall -g 패키지명  # 원하는 패키지 삭제
      
    sudo npm uninstall -g 패키지명  # 원하는 패키지 삭제 (권한 필요시)
  

  

더 이상 지원하지 않는 Create-React-App

• Create-React-App 공식 문서를 확인하면, 더 이상 지원을 하지 않음.

  Getting Started, Create React App

  Sunsetting Create React App – React

  

• 또한 js문법을 사용하여, 근래의 JSX 문법의 동향에 미치지 못함.

  

⇒ 따라서, 사용하지 않도록 한다!

---

현재 프로젝트 생성 방식, Vite

• 최근에 사용하는 방식으로, Vite로 프로젝트를 생성. → 프로젝트 빌드 도구 1위
• 기본적으로, JSX 문법을 사용하여 근래 동향에 미침.

1. 프로젝트를 위한 폴더 생성 후, 해당 위치로 이동

   

2. vite@latest 패키지 최신 버전 설치 → [React] → [TypeScript]

    npm create vite@latest . 
   

   

   

3. 패키지 설치 진행

    npm install
   

   

4. 프로젝트 생성 확인

   

5. 프로젝트 개발 서버 실행

    npm run dev 
   

   

   

SWC는 사용하나요?

• Vite가 SWC를 최신 지원을 하지 않기에 사용 안함.

  

---

보일러 플레이트

• 반복적이고 기본적으로 필요한 코드나 설정 파일들을 빠르게 생성해주는 템플릿
• 예: Create-React-App, Vite, Next.js, Remix, Gatsby 등..
• 따라서, React와 같은 프로젝트를 생성 시에 사용.

• [추가] 어떤 프레임워크를 사용해야하는가?

  • 공식문서에는, Vite를 사용하라고 명시되어 있지 않음

    

  • But, 여전히 Vite는 인기 있는 툴.

---