React 개발 환경 셋팅 및 프로젝트 만들기
React 개발 환경 셋팅 및 서버 실행 하는 방법에 대해서 알아보려고 한다.
개발 환경 셋팅
개발 환경 셋팅을 위해서 우선 하기에 있는 것들을 설치해준다.
Node.js
Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치한다.
Webpack, Babel 은 무슨 용도인가요?
리액트 프로젝트를 만들게 되면서, 컴포넌트 를 여러가지 파일로 분리해서 저장 할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 됩니다. 여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고, JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용합니다.
Yarn
(Yarn 은 조금 개선된 버전의 npm) npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전 관리를 하게 될 때 사용한다. Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 때문이다.
코드 에디터
보통은 VScode를 사용하지만 Atom, WebStorm, Sublime 등 다양한 코드 에디터가 있다.
Git bash
윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용해야한다.
프로젝트 만들기
터미널을 열은 뒤, 다음 명령어를 실행한다. (윈도우 사용자는 Git Bash 를 사용)
$ npx create-react-app begin-react
begin-react 라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다.
생성이 끝나면 cd 명령어를 사용하여 해당 디렉터리에 들어간 다음 yarn start 명령어를 입력한다.
(yarn 이 없다면 npm start)
$ cd begin-react
$ yarn start
명령어가 실행되면 브라우저 http://localhost:3000/ 가 열리면서 실행된다.
만약에 브라우저가 열리지 않는다면 해당 주소를 입력해본다.
