[React] React App생성하기

Vite라는 차세대 프론트엔드 개발 툴을 사용하면 기본설정이 적용된 React app을 생성하는게 가능하다. Vite은 리액트 공식 문서에서도 권장하고 있기 때문에, 오늘날 대부분의 리액트 앱은 vite를 사용해 만들어졌다고 생각해도 무방하다.

vite 이용해서 리액트 앱 생성하기

npm create vite@latest

위와 같은 커멘드 라인을 작성하고 엔터를 치면 진행할건지 묻는 문장이 나온다. y를 입력하면 된다.

그 다음에 엔터를 누르면 차례대로 프로젝트 이름, 프레임 워크, 앱의 버전을 묻는데, 원하는 대로 설정해주면 된다.

√ Project name: ... section04
√ Select a framework: » React
√ Select a variant: » JavaScript

다 하고나면 폴더가 생성되는데, 여기에는 package.json 파일만 있고 Node_modules와 lock.json 파일이 없다. 설치가 아직 안된 것이므로, 직접 package.json 정보를 기반으로 라이브러리를 설치해야 한다.

npm i

 

 

package.json 파일을 들어가 보면 스크립트 항목에 아래와 같이 적혀있다. 이 네 개는 리액트 앱을 실행시킬 수 있는 네 가지 명령어이다.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }

 

dev를 사용하여 리액트 앱을 개발용으로 실행시킬 수 있다.

npm run dev

 

숏컷 명령어도 제공된다.

press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit

 

*이정환 강사님의 [2024]한 입 크기로 잘라먹는 리액트 : 4-1)강 React.js를 소개합니다를 정리한 내용입니다.*