리액트 프로젝트 시작하기

macOS 환경 기준입니다.

페이스북에서 제공해주는 도구 “create-react-app”를 통하여 프로젝트를 시작합니다.

필요한 환경

1.Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다.

[ 설치 ]

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

• nvm은 여러 종류의 Node.js 버전을 설치 할 수 있게 해주는 버전입니다. 새 버전으로의 업데이트가 쉽고, 터미널을 통해 버전 선택이 가능하여 편리합니다.

2.Yarn: Yarn은 조금 개선된 버전의 npm 이라고 생각하시면 됩니다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용하죠. 우리가 Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함입니다.

[ 설치 ]

Yarn Install에 접속하여 자신의 운영체제에 맞는 방식으로 설치

• macOS인 경우

curl -o- -L https://yarnpkg.com/install.sh | bash

또는 homebrew가 설치되어 있다면,

brew install yarn

3.코드 에디터: 주로 VSCode 를 사용. 이 외에도, Atom, WebStorm, Sublime 등.

create-react-app 설치 및 사용

npm install -g create-react-app

또는 yarn으로 설치하는 경우

yarn global add create-react-app

nvm 을 통하여 Node.js 를 설치했다면 yarn global 설치가 제대로 작동하기 위해선 다음 명령어 실행해야 합니다.

# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

사용

create-react-app hello-react

cd hello-react
yarn start

위의 명령어를 입력하면, 리액트 프로젝트가 시작 될 것입니다.

Webpack, Babel은 뭘까?

리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장 할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 됩니다.

여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용.

JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용.

참고 - https://velopert.com/3621