Vite

원하는 폴더를 만들고 폴더에서 새로운 터미널 열기

npm create vite board-app 실행

프레임워크와 언어 선택

하라는 대로 만든 app로 이동하고
npm install
npm run dev 실행

http://localhost:5173/ 로 이동하면 아래 화면이 나옵니다 😉

---

CRA(create-react-app), CNA(create-next-app)

리액트 기반 웹 애플리케이션 개발에 필요한 모든 설정 상태의 프로젝트를 만들어 주는 도구

CNA(create-next-app)

mmkdir c:\react && cd c:\react
터미널에서 react 디렉토리 만들고 이동

code .
비주얼 스튜디오 실행

npx create-next-app

🧶 프로젝트명 설정 🧶
√ What is your project named? ... my-next-app

각종 설정 
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in c:\react\my-next-app.

비주얼 스튜디오에서 프로젝트가 생성된 걸 확인할 수 있다

프로젝트 디렉토리로 이동 ➡️ 개발 서버 실행

c:\react> cd my-next-app

c:\react\my-next-app> npm run dev

다음과 같이 뜨면 성공!

로컬에서 http://localhost:3000 으로 이동하면 아래와 같은 화면이 나온다

CRA(create-react-app)

c : \ react> npx create-react-app my-cra-app

호환성 문제로 오류 발생 시 ➡️ 필요한 패키지 수동 설치

c:\react> cd my-cra-app

c:\react\my-cra-app> npm install react@18 react-dom@18
c:\react\my-cra-app> npm install web-vitals
c:\react\my-cra-app> npm install ⇐ package.json 파일에 명시된 의존 패키지를 설치'

역시 비주얼 스튜디오에서 프로젝트가 생성된 걸 확인할 수 있다

c:\react\my-cra-app> npm run start

다음과 같이 뜨면 성공!

로컬에서 http://localhost:3000 으로 이동하면 아래와 같은 화면이 나온다