[React.js] React 개발환경설정

개인 프로젝트를 위해 리액트를 공부해보려 한다.

리액트 + 스프링부트 REST API

[리액트 초기 설정]

1. 리액트는 jQuery처럼 <script...></script> 의 형태로 사용하지 않는다.
2. Node.js, Yarn, Webpack, Babel 등의 도구를 이용해 프로젝트를 설정한다.
3. 페이스북에서 제공하는 create-react-app을 통해 프로젝트 설정을 진행한다. 

- Webpack?

리액트 프로젝트는 컴포넌트를 파일로 분리해 저장한다. 이를 한개로 결합하기 위해 사용하는 도구가 Webpack이다.

 

- Babel?

리액트 컴포넌트는 JSX라는 문법으로 작성되는데, 이러한 문법을 사용하기 위해서 Babel이라는 도구가 필요하다.

 

[설치파일]

• Node.js: Webpack, Babel과 같은 도구들을 사용하기 위해 필요.
• Yarn: 패키지 매니저 도구, NPM에 비해 더나은 속도와, 더나은 캐싱시스템을 지원.
• VSCode
• Git Bash

[create-react-app]

$ npm install -g create-react-app
$ yarn global add create-react-app

npm, yarn 두개의 패키지 매니저를 통해 리액트 앱을 만들어 주는 도구인 create-react-app을 글로벌로 설치한다.

 

$ create-react-app hello-react

몇분후 프로젝트 생성 완료

그리고 다음의 명령어로 create-react-app 명령어를 사용할 수 있다.

$ cd hello-react 
$ yarn start 
//리액트 프로젝트 시작

포트번호 3000번으로 로컬 위에 프로젝트 구동완료