리액트를 배우기전에 환경 세팅 방법을 알아보고 가겠습니다.

Node.js

먼저 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js포스트에서 Node.js에 대한 간략한 지식과 설치법을 읽어주세요.

그래도 여기서 Node.js를 간략히 설명 드리자면 자바스크립트 런타임으로 자바스크립트를 가지고 이런저런 기능들을 이용할 수 있게 해줍니다.

사실 Node.js는 서버역할을 할 수 있는 런타임이기 때문에 뷰만을 관리하는 리액트와는 큰 상관이 없어보입니다. 하지만, 나중에 서버가 필요한 개발을 할 수도 있고 잠시뒤에 설치할 yarn을 깔기 위한 도구로 npm을 이용하기 위해서 설치하는 것입니다. npm이라는 생소한 단어가 또 등장했는데 npm은 Node.js에 포함되는 패키지 관리 도구입니다.

yarn

다음으로, yarn을 설치할 차례입니다. yarn은 npm같은 패키지 관리 도구인데, npm보다 더 효율적인 성능을 가진 시스템이므로 yarn을 사용하기로 합니다. 물론 npm을 이용해도 되지만, 여러곳에서 npm보다는 yarn을 이용하고 있기때문에 yarn을 설치해서 이용하도록 하겠습니다.

window 운영체제를 기준으로 명령 프롬프트(cmd)를 열고 다음과 같이 입력하면 yarn이 설치됩니다.

npm install --global yarn

리액트 프로젝트 생성

이제 기본 준비물들은 준비가 끝났으니 리액트 프로젝트를 하나 생성해보겠습니다. yarn을 이용해서 리액트 프로젝트를 생성하는 방법은 간단합니다.

yarn create react-app 프로젝트명

create react-app을 이용하면 리액트 프로젝트에 필요한 다양한 패키지들을 자동으로 구축할 수 있습니다.

잘 설치되었는지 확인하려면 커맨드 창에서 cd 명령으로 프로젝트 파일로 이동한뒤 yarn start 명령어를 입력하면 리액트가 구동되면서 웹 페이지가 하나 뜨게됩니다.이와 같은 그림이 웹 페이지에 나타났다면, 성공적으로 리액트 프로젝트를 생성한 것 입니다.