누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기


이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.

 

리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 <script src="..."><script> 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그 대신에, 리액트 프로젝트를 제대로 작업 하려면 여러분의 컴퓨터에 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정해주어야 합니다.

리액트 프로젝트를 바닥부터 설정하는 것은 초심자에겐 꽤나 복잡한 작업입니다. 다행히도, 페이스북에서 제공해주는 도구create-react-app를 통하여 이 작업을 간단하게 준비해줄 수 있답니다.

Webpack, Babel 은 무슨 용도인가요?

리액트 프로젝트를 만들게 되면서, 컴포넌트 를 여러가지 파일로 분리해서 저장 할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 됩니다. 여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고, JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용합니다.

아직까진 컴포넌트와 JSX~ 라는 개념이 익숙하지 않을 것입니다. 조만간 배우게 될 테니까 걱정하지마세요!

준비사항

앞으로 계속해서 튜토리얼을 진행하기 전에, 다음 항목들을 설치해주어야 합니다.

  1. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치합니다.
  2. Yarn: Yarn 은 조금 개선된 버전의 npm 이라고 생각하시면 됩니다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구입니다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용하죠. 우리가 Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함입니다.
  3. 코드 에디터: 그리고, 코드 에디터를 준비하세요. 여러분이 좋아하는 에디터가 있다면, 따로 새로 설치하지 않고 기존에 사용하시던걸 사용하셔도 됩니다. 저는 주로 VSCode 를 사용합니다. 이 외에도, Atom, WebStorm, Sublime 같은 훌륭한 선택지가 있습니다.
  4. 윈도우의 경우, 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

를 입력하시게 되면, 리액트 프로젝트가 시작 될 것입니다.

그러면 이렇게 브라우저창에서 다음과 같은 페이지가 나타나게 됩니다.

자, 그러면 이제 본격적으로 공부를 시작해봅시다.

  • 즐기면서공부하자

    webpack은 따로 설치를 안하시네요,
    vscode에 내장되어있나요??

    • 제가알기론 vscode에 내장되어 있는건 아니고, create-react-app에 내장되어있습니다.

  • 김동만

    webpack으로 설정하는 방법도 정리된게 있으면 좋겠습니다. 요새 세팅에 맞는 걸루…

  • Watson Harry

    Https 설정은 어떻게 하는가요? Letencrypt의 SSL 인증서를 이용해야 하는데 어떻게 설정해야 할가요? Nginx Proxy를 이용하는것이 좋을지 아니면 ssl 인증서를 직접 이용해야할지 만약 한다면 어떻게 해야 할지 .???. package.json에서 설정하는 proxy 에 대한 포스팅이 있으면 좋겠습니다. ㅎㅎ

  • 즐기면이긴다

    안녕하세요. 신입입니다.
    명령어를 어디서 치는거예요?

  • 고건주

    감사합니다.

  • taein

    취미로 리액트 네이티브 공부하다가 졸업한 선배님 추천으로 왔습니다. 강의들이 매우 깔끔하고 알아보기 좋네요. 좋은 지식 나눔해주셔서 감사합니다.