인텔리제이(Intellij) react 사용하기.

순서는

1. nvm 설치
2. node.js 설치(최신 버전 중 안정화 버전 설치)
3. yarn 설치
4. 프로젝트 생성
5. 인텔리제이에서 react 실행.
6. 프로젝트 실행

 

1. nvm 설치

- 해당 사이트에서 OS에 맞는 버전을 다운 받아 설치.(https://www.npmjs.com)

 

2. node.js 설치(최신 버전 중 안정화 버전 설치)

nvm install -lastest

- node 버전 확인은

node -v

- [nvm use 버전] 으로 node 버전을 세팅해줄 수 있다. 

nvm use 8.10.0

 

3. yarn 설치

- 속도와 보안성 측면에서 npm 보다 좋다.

yarn install -g yarn

 

4. 프로젝트 생성

- CLI 를 이용해서 생성 (vue or anguler도 cli를 통해서 간단하게 프로젝트 생성이 가능하다.)

- npx는 npm 패키지 실행 도구.

npx create-react-app my-app

 

5. 인텔리제이에서 react 실행.

- Open 을 눌러서 방금 생성한 프로젝트를 클릭해준다.

- Ctrl+ Alt + S 를 눌러서 환경설정을 해줘야한다.

- Javascript 설정

Javscript languages version 을 위와 같이 설정하거나 ECMAScript 6 으로 설정한다.

- Node & Npm 설정

node path와 package manager가 yarn을 참고 하고있는지 확인하고, 경로가 다르다면 이 전에 설치한 yarn 경로로 변경해주면 된다.

- Run 설정

Scripts는 package.json 안에 "scripts" 안에 설정되어 값으로 설정할 수 있다.

Environment는 여러가지 환경을 설정할 수 있다.

BROWSER를 설정 안하면 IE가 default로 뜨며, 나는 크롬에서 하길 원해서 크롬으로 설정해줌.

Scripts 부분에 start를 선택, Environment에 BROWER=[사용하고싶은브라우저] 를 설정하면된다.

 

6.프로젝트 실행

우측 상단에 실행 버튼 클릭 윈도우 기준으로 단축키는 Shift + F10

실행이 되면 다음과 같은 초기 페이지가 뜰 것이다.

끝.