[React] 리액트 시작하기

리액트 프로젝트를 생성하고 실행해보기

작업환경

Mac OS

환경 설정

리액트 프로젝트를 만들때는 `Node.js`가 필요하다고 한다. `Node.js`는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임 환경이다. 리액트와 직접적인 연관은 없지만 프로젝트 개발 시 필요한 주요 도구가 Node.js를 사용하기에 설치해주도록 한다.

Node.js 설치

우선 `Node.js`가 설치되어있는지 확인하기 위해 터미널에 `node -v`를 입력해보았다. 이전에 설치를 한 적이 없다면 이 부분은 넘어가도 된다.

예전에 이미 설치한 버전이 존재한다. 최근 나온 LTS 버전은 22.x이므로 기존 버전을 삭제하고 다시 설치하자. 홈브루를 이용해 `brew unistall node`를 입력하여 삭제하고, 다시 한번 node와 npm 버전을 확인하여 제대로 삭제됐는지 확인한다.

 

window

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

윈도우 사용자의 경우 공식 사이트에서 내려받는다. 맥 이용자도 사이트에서 받아도 된다.

mac

맥 이용자의 경우 Node.js를 여러 버전으로 설치하여 관리할 수 있는 nvm 도구를 권장한다고 한다. nvm은 경로나 환경문제가 발생할 수 있기때문에 권장하는 권장 설치방법을 이용해 설치하도록 하자

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

위 명령어를 통해 nvm을 설치하고 터미널을 재시작하도록 한다. 그 후 버전 확인을 통해 잘 시작됐는지 확인해본다.

만약 터미널을 재시작해도 버전이 나타나지 않는다면 쉘 설정 파일에 아래와 같은 명령어를 추가해야한다.

우선 사용하는 쉘을 확인하는 명령어는 `echo $SHELL`이다. 

nano ~/.zshrc 		#zsh: ~/.zshrc 
nano ~/.bashrc		#bash: ~/.bashrc 또는 ~/.bash_profile

쉘을 확인하고 아래 명령어 중 맞는 쉘에 따라 설정 파일에 아래 스크립트를 추가한다.

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

 

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

nvm을 설치했다면 아래 명령어를 통해 Node.js LTS 버전을 설치한다.

nvm install --lts

#참고 - nvm 명령어

nvm install 22			#nvm install (버전): 특정 버전 설치
nvm use 22				#nvm use (버전): 특정 버전 사용
nvm ls					#nvm ls: 설치된 버전 목록 확인
nvm alias default 22	#nvm alias default (버전): 기본 버전 설정
nvm uninstall 22		#nvm uninstall (버전): 특정 버전 삭제

 

설치 후 버전 확인을 통해 Node.js가 잘 설치 됐는지 확인한다. `node -v`

 

yarn 설치

Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치된다. 하지만 참고하는 책을 따라 yarn 패키지 관리자 도구를 설치한다.

npm install --global yarn
yarn --version

 

프로젝트 생성하기

프로젝트 생성을 원하는 위치에서 아래 명령어를 통해 프로젝트를 생성한다.

yarn create react-app study01_hello-react

`study01_hello-react`라는 이름으로 리액트 프로젝트를 생성했다.

프로젝트 폴더로 이동 후 프로젝트를 실행해본다.

cd study01_hello-react
yarn start

리액트 서버를 실행했다면 자동으로 페이지가 열리는데, 열리지 않았다면 웹 브라우저에 http://localhost:3000/ 링크를 연다면 아래와 같이 초기 페이지를 볼 수 있다.