[React] MacOS zsh 터미널에서 초기 환경 설정

Homebrew 설치

Homebrew 홈페이지에서 명령어를 복사해 터미널에 붙여 넣어준다 (https://brew.sh/index_ko.html)

Homebre는 MacOS에서 패키지들을 쉽게 설치하고 관리할 수 있도록 도와주는 패키지 매니저다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

설치가 끝나면 위와 같은 메세지가 뜨는데, 해당 명령어를 실행시켜주면 brew 설치가 완전히 끝난다.

Node.js 설치

Node.js를 여러 버전으로 설치하고, 관리해줄 수 있는 nvm 도구를 먼저 설치한다.

brew install nvm

만약 설치 후에도 nvm이 실행되지 않고 zsh: command not found: nvm 가 뜰 경우에는 환경변수 설정을 해주어야 한다.

vi ~/.zshrc

편집기가 나오면 i를 눌러 편집 상태로 만들고, 아래 코드를 치고 저장해준다.

이때 esc를 눌러 편집 상태를 나오고 :wq로 저장하고 종료해준다. (wq는 write and quit 임)

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

이후 아래 명령어를 쳐 환경변수를 터미널에 적용한다.

source ~/.zshrc

다시 확인 해보면 nvm 명령어가 제대로 실행되는 모습을 볼 수 있다.

이후 Node.js LTS (Long Term Support) 버전을 설치해준다.

nvm install --lts

 

React 프로젝트 만들기

먼저 yarn 패키지 매니저를 설치한다

brew install yarn

이후, 아래 명령어로 원하는 폴더에서 react 프로젝트를 만든다.

yarn create react-app <프로젝트 이름>

프로젝트가 만들어졌으면, 해당 프로젝트로 이동하여 아래 명령어로 리액트 개발전용 서버를 구동한다.

yarn start

이러한 페이지가 띄워지는 것을 확인할 수 있다.

주소는 http://localhost:3000 로, 3000 포트에 띄워져 있다.