이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 <script src="..."><script> 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그 대신에, 리액트 프로젝트를 제대로 작업 하려면 여러분의 컴퓨터에 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정해주어야 합니다.
리액트 프로젝트를 바닥부터 설정하는 것은 초심자에겐 꽤나 복잡한 작업입니다. 다행히도, 페이스북에서 제공해주는 도구create-react-app를 통하여 이 작업을 간단하게 준비해줄 수 있답니다.
Webpack, Babel 은 무슨 용도인가요?
리액트 프로젝트를 만들게 되면서, 컴포넌트 를 여러가지 파일로 분리해서 저장 할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 됩니다. 여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고, JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용합니다.
아직까진 컴포넌트와 JSX~ 라는 개념이 익숙하지 않을 것입니다. 조만간 배우게 될 테니까 걱정하지마세요!
준비사항
앞으로 계속해서 튜토리얼을 진행하기 전에, 다음 항목들을 설치해주어야 합니다.
- Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치합니다.
- Yarn: Yarn 은 조금 개선된 버전의 npm 이라고 생각하시면 됩니다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용하죠. 우리가 Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함입니다.
- 코드 에디터: 그리고, 코드 에디터를 준비하세요. 여러분이 좋아하는 에디터가 있다면, 따로 새로 설치하지 않고 기존에 사용하시던걸 사용하셔도 됩니다. 저는 주로 VSCode 를 사용합니다. 이 외에도, Atom, WebStorm, Sublime 같은 훌륭한 선택지가 있습니다.
- 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용하세요.
Node.js 설치하기
Node.js 를 현재 기준 LTS 버전인 v8 버전을 설치하세요. 윈도우의 경우에 노드 공식 홈페이지 다운로드 페이지 에서 설치를 하면 됩니다.
그리고, macOS, Linux 의 경우 다음과 같이 nvm 을 통해서 설치하는것을 추천드립니다. nvm 은 여러 종류의 Node.js 버전을 설치 할 수 있게 해주는 버전입니다. 나중에 새 버전이 나왔을 때 업데이트 하기도 쉽고, 터미널을 통해 어떤 버전을 사용 할지 설정 할 수도 있어서 편리합니다.
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
nvm install --lts
Yarn 설치하기
Yarn 설치는 Yarn Installation 페이지에서 여러분의 운영체제에 맞는 방식에 따라 설치하시면 됩니다.
VSCode 설치하기
여러분이 이미 익숙한 에디터가 있으시다면 무조건 VSCode 를 사용하라고 권하지는 않겠습니다. 하지만, 사용해본적이 없다면 한번쯤 사용해보시길 바랍니다. 꽤 가볍고 편하고 예쁜 에디터입니다.
다운로드는 Visual Studio Code 에서 하실 수 있습니다.
create-react-app 설치 및 사용
설치
create-react-app 은 이름이 뜻하듯이, 리액트 앱을 만들어주는 도구입니다. 다음 명령어를 입력하여 설치 할 수 있습니다.
npm install -g create-react-app
만약에 yarn 을 통하여 설치하고 싶다면 다음과 같이 입력하시면 됩니다.
yarn global add create-react-app
윈도우라면 상관 없지만, 만약에 여러분이 리눅스, 혹은 macOS 유저여서 nvm 을 통하여 Node.js 를 설치했다면 yarn global 설치가 제대로 작동하기 위해선 다음 커맨드를 사전에 입력해주셔야 합니다:
# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
# Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc
사용
사용방법은 굉장히 간단합니다.
터미널에서 다음 명령어를 입력하세요.
create-react-app hello-react
성공적으로 설치되면 위와 같은 결과가 뜹니다. 위에서 나타난대로 다음과 같이
cd hello-react
yarn start
를 입력하시게 되면, 리액트 프로젝트가 시작 될 것입니다.
그러면 이렇게 브라우저창에서 다음과 같은 페이지가 나타나게 됩니다.
자, 그러면 이제 본격적으로 공부를 시작해봅시다.