React.js Project 개발 환경 설정하기 2편 : Yarn 설치 & IntelliJ IDEA로 개발 시작하기

❗️이 시리즈는 React.js로 이미 작성된 프로젝트의 업무 인수인계 및 개인 기록용으로 작성되었습니다.
React.js 프로젝트를 새로 만드는 과정은 담겨있지 않습니다.
혹시 잘못된 내용이 있다면 언제든지 댓글 부탁드립니다! 😁

Node.js 설치가 끝났다면 Yarn 패키지 매니저를 설치해보겠습니다.
JavaScript 생태계에는 대표적인 패키지 매니저로 NPM(Node Package Manager)과 Yarn이 있습니다.
NPM은 Node.js를 설치하면 기본으로 포함되어 있어 별도 설치가 필요없고
Yarn은 다양한 방법으로 설치 할 수 있습니다.

NPM이 이미 있는데 왜 Yarn을 사용하는가에 대한 질문은 이미 많은 글들이 있으므로 참고바랍니다.

NPM과 Yarn의 차이를 설명한 글들
Npm vs Yarn
Node.js 패키지 모듈 NPM과 Yarn

• 2020년 현재 주 목적은 yarn.lock 파일을 활용한 디펜던시 버전 고정과 보안성에 있다고 봐야할 것 같습니다.

Yarn 설치

1. 명령줄 도구를 이용한 설치

Yarn의 설치 방법은 여러가지가 있는데 macOS의 경우 brew를 사용하는 것을 권장하는 것 같습니다.
설치 안내 문서에서 brew가 가장 상단에 있기 때문입니다.
그 외에도 다양한 설치 방법이 존재합니다.

$ brew install yarn 					# using Homebrew

$ sudo port install yarn 				# using MacPorts

$ curl -o- -L https://yarnpkg.com/install.sh | bash	# using Installation Script

$ npm i -g yarn 					# using NPM global installation

마음에 드시는 방법으로 설치를 하신 후 .zshrc 파일에 PATH를 설정해줍니다.

# yarn PATH config
$ export PATH="$(yarn global bin):$PATH"

이제 패키지 매니저 설정은 끝났습니다.

• 2020.11.22일 수정

  이걸로 끝난 줄 알았는데 이번에 새로운 SSD를 사서
  macOS 11 - Big Sur를 클린 설치한 후 개발 환경 설정을 하다보니
  brew install yarn을 하게 되면 homebrew가 node.js 최신 버전을
  의존성으로 판단하여 이중 설치하는 것을 발견하였습니다.
  그 이전의 macOS에서도 동일 한 문제가 있는 것을 확인하여
  그 해결법을 담은 문서를 링크로 남겨 놓습니다.

  이 문제는 당장 yarn을 사용하는데 문제는 없을 수도 있으나
  혹시나 모를 충돌을 방지하고자 테스트 후 남겨놓습니다.

해결 내용 참고 링크
Install NVM, NodeJS, Yarn via Homebrew

프로젝트 통합개발환경(IDE) 설정

IntelliJ로 개발 시작하기

이제 git을 통해 해당 프로젝트를 clone 받습니다.
프로젝트의 루트 디렉토리를 IntelliJ로 Open합니다.

IntelliJ에 만약 Node.js 플러그인이 설치되어 있지 않다면 설치합니다.

설치가 완료되면 IDEA를 Restart 해줍니다.
그러면 화면 우측 하단에 yarn install에 대한 안내가 자동으로 나옵니다.

여기서 Run yarn install을 클릭해주시면
package.json과 yarn.lock파일에 맞추어 의존성 모듈들을 받아옵니다.
혹은 터미널로 직접 yarn명령어만 입력하시면 yarn install과 같은 효과가 있습니다.

이후에 IDEA가 프로젝트 인덱싱을 진행하며 개발환경이 갖춰지게 됩니다.

개발 환경용 설정을 위한 .env.development 파일

현재 저희 웹 클라이언트 프로젝트에는 dotenv 라이브러리로 환경변수 설정을 통제할 수 있습니다.
.env.* 파일을 통해 환경에 따라 달라지는 HTTPS 설정이나 API주소 등을 설정합니다.
로컬 개발 환경에서는 .env.development라는 파일을 각자 만들어서 설정합니다.

dotenv 라이브러리에 관한 정보는 아래에서 확인해주세요.

Node.js 기반에서 환경변수 사용하기 (dotenv, cross-env)
dotenv github page

❗️env.development 파일은 개발 정책에 따라 다를 수 있으나
개발 참여자 각자의 로컬에서만 사용하는 것을 권장합니다.

# .env.development
http=false 			# 브라우저에서 리액트 실행 서버에 요청시 https를 사용하지 않음.
REACT_APP_API_HOST 		# 개발시 사용할 API 서버의 주소

프로젝트 실행

이제 프로젝트를 실행 해보겠습니다.
터미널에서 다음 명령줄을 실행합니다.

$ node scripts/start.js   # 로컬 환경에서 개발 서버를 실행합니다.

자동으로 브라우저에서 localhost:3000 페이지가 실행됩니다.
다음 3편에서는 ESLint와 Prettier를 활용한 Linting on Save에 대해 알아보겠습니다.