설치
- Node.js : Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져 있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치한다.
- Yarn : Yarn 은 조금 개선된 버전의 npm 이라고 생각하면 된다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리를 하게 될 때 사용한다. Yarn 을 사용하는 이유는 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함이다.
- 코드 에디터 : 주로 VS Code 를 사용한다. 이 외에도 Atom, WebwStorm, Sublime 이 있다.
- Git bash : 윈도우의 경우 Git for windows 를 설치해서 앞으로 터미널에 무엇을 입력하는 내용이 있으면 함께 설치되는 Git Bash 를 사용한다. 윈도우가 아니라면 설치하지 않아도 된다. 설치는 기본 옵션으로 진행하면 된다.
*설치확인: node --version / yarn --version 터미널에 입력
Wepback, Babel 은 무슨 용도인가?
리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 된다. 여러가지 파일을 한 개로 결합하기 위해서 우리는 Wepback 이라는 도구를 사용하고, JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용한다.
새 프로젝트 만들기
Git Bash를 열고 다음 명령어를 실행한다.
$ npx create-react-app begin-ract위의 명령어를 통해 begin-react 라는 폴더가 생기고 그 안에 리액트 프로젝트가 생성된다.
생성이 끝나면 cd 명령어를 통해 해당 폴더로 들어간 다음 yarn start 명령어로 실행한다. (yarn 이 없다면 npm start)
$ cd begin-react
$ yarn start명령어를 실행하고 나면 브라우저에 http://localhost:3000/ 이 열리고, 돌아가는 리액트 아이콘이 보인다.
자동으로 페이지가 열리지 않는다면 브라우저에 주소를 직접 입력하여 들어가면 된다.
VS Code에서 터미널 띄우기
VS Code내부에서 터미널을 띄울 땐 해당 프로젝트 폴더를 연 뒤, 상단 메뉴의 View > Terminal 을 연다.
윈도우 사용자의 경우, 위 작업을 하기 전에 VS Code에서 cmd 대신 Git Bash를 사용하기 위하여 Ctrl+, 를 눌러 설정에 들어간 후, terminal을 검색 후 Terminal > External > Windows Exec 부분에 Git Bash의 경로인 C:\Program Files\Git\bin\bash.exe 를 넣어준다.
