react - react.js 프로젝트 만들기

2020. 3. 15. 23:28

react.js 프로젝트 만들기

react.js를 개발을 처음부터 공부하는 입장에서 시작을 한다면, 처음에는 헷갈리지만 나중에 별 것 아닌 부분이 개발환경 세팅하는 부분이다. 본 포스팅에서는 react.js 환경을 세팅하는 방법 중 하나를 설명한다. 아래처럼 react.js를 위한 기본 프로젝트를 만든 후, component, action, redux, redux-saga 등을 사용해서 구조를 하나씩 잡아가면서 개발을 하면 된다. 거의 모든 세팅과정이 터미널 위에서 명령(command)들을 사용해서 설명했기 때문에, 아래에서 설명할 때 사용하고 있는 IDE인 IntelliJ가 아니라 Visual Studio Code 등의 다른 것을 사용하는 것도 어렵지 않을 것이라고 생각한다.

개발환경

OS : macOS

IDE : IntelliJ

개발순서

nvm 설치
NodeJS 설치
yarn 설치 (option)
ReactJS 설치
ReactJS 프로젝트 생성
ReactJS 프로젝트 실행

개발순서 따라하기

1. nvm 설치 (참고, 링크)

// 1. 설치
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

// 2. 환경변수 NVM_DIR 추가
$ vi ~/.bash_profile

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

// 3. 환경변수 적용
$ source ~/.bash_profile

// 4. 설치 확인
$ nvm ls

2. NodeJS 설치

// 1. 최신 버전 NodeJS 설치
$ nvm install node

// 2. 설치 확인
$ nvm ls

// advanced
// 1. 원하는 버전 NodeJS 설치
$ nvm install 10.16.3

// 2. 설치 확인
$ nvm ls

// 3. 원하는 버전 NodeJS로 설정
$ nvm use 10.16.3

// 4. 설정된 NodeJS 버전 확인
$ node --version

3. yarn 설치 (option)

// 1. yarn 설치 
$ brew install yarn

// 2. 설치 확인
$ yarn --version

참고, npm install 로 설치하면 직접 터미널을 열어서 yarn이 잘 작동되지만, Intellij에서 터미널을 열어서 yarn을 실행하면 "zsh: command not found: yarn" 에러가 발생하면서 작동이 안되는 상황에 마주하면서 추가적인 환경설정이 필요하게 되는데, 이러한 과정이 번거로우니 작성자는 yarn 설치는 npm이 아닌 brew로 설치했다.

참고, 현재 포스팅에서 설명할 때는 yarn을 사용했지만, (yarn 이전에 설치되는) npm을 사용해도 상관없다. 다만, 사람들이 yarn을 많이 사용하고, 보통 프로그램을 혼자 개발하는 것이 아니기에 이를 따라줘야 하기도 하고, npm보다 yarn이 장점들이 많기 때문에 이를 사용하기 위해 yarn을 사용한 것 뿐이다. 만약, 현재 ReactJS를 공부하는 입장에서 yarn때문에 더 혼란스럽다면, yarn을 설치하지 않고 npm만을 사용해도 상관이 없다.

4. ReactJS 설치

// 1. (CLI 형태) ReactJS 설치
$ npm install -g create-react-app

// 2. 설치 확인
$ npm ls -g | grep create-react-app

5. ReactJS 프로젝트 생성

// 1. ReactJS 프로젝트 생성
$ npx create-react-app joker

// 2. 설치 확인
$ ls

6. ReactJS 프로젝트 실행

[실행 방법 1] 인텔리제이(Intellij) 사용

ReactJS 프로젝트 열기
1. IntelliJ 실행 > "Open" 버튼 > "joker" 프로젝트 클릭 > "Open"
ReactJS 프로젝트 yarn 설정
1. IntelliJ 상단 메뉴 > Preferences > Languages & Frameworks > Node.js and NPM
2. Node interpreter : "node" => "~/.nvm/versions/node/v10.16.3/bin/node" 으로 변경 (그림1 yarn 설정 전, 그림2 yarn 설정 후 참고)
3. "OK" 버튼
ReactJS 프로젝트 run 설정
1. IntelliJ 상단 메뉴 > Run > Edit Configuration > 왼쪽 상단의 "+" 클릭 > npm 선택
2. Scripts : "" => "start" 으로 변경 (그림3 script 설정 전, 그림4 script 설정 후 참고)
3. "OK" 버튼
ReactJS 프로젝트 run 실행
1. [ 방법1 ] IntelliJ 상단의 녹색 "▶" 버튼 (그림5 최종 출력화면 참고)
2. [ 방법2 ] IntelliJ 하단의 터미널(Terminal) 에서 "yarn start" or "npm start" 명령문 실행