[프론트엔드] REACT 프로젝트 초기환경 구성

1. 프로젝트 초기설정

 

이번에는 react 앱을 생성하고 실행하는 방법에 대하여 작성할 에정이다.

 

여기서는 yarn을 사용할 예정이다.

'yarn'이란  Facebook에서 만든 자바스크립트 패키지 매니저

yarn은 패키지와 모듈을 관라하기 위하여 페이스북에서 만든 라이브러리로 node-modules에 포함되는 모듈을 관리하기 쉽다는게 강점이다.

 

먼저 원하는 위치에 폴더를 생성하고 폴더에서 vscode를 연다.

 

2. yarn 설치

 

터미널 -> 새터미널 실행 
아래의 명령어를 입력하자.

$ npm install -g yarn

 

react는 node 안에서 동작하기 떄문에 npm이 기본적으로 설치되어 있어야한다.

 

npm install(설치)  -g는 글로벌(전역) yarn을 설치한다는 의미이다. 

 

3. create-react-app 리액트 앱 생성

아래와 같이 명령어를 입력한다.

yarn create react-app todo-app

 

 

todo-app은 폴더명으로 해당 폴더에 리액트 앱을 생성하겠다는 명령어다.

명렁어를 실행하면 폴더 하단에 todo-app 폴더가 생성된다.

이제 cd를 입력하고 Tab키를 눌러서 자동완성하여 폴더로 들어가자

 

4. 리액트 앱 실행

yarn start

 

폴더 하단에서 다음 명령어를 입력하면 app.js파일에 있는 내용이 아래와 같이 브라우저에 초기화면이 나타날 것이다.