리액트 공부를 시작하기에 앞서, 준비를 하기위한 사전 작업을 하도록 하자.
VS Code
공식 홈페이지 링크 로 들어가서 설치를 진행하자
Node.js
Webpack과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js를 설치한다. 공식홈페이지에서 LTS 버전을 설치하자.
Node.js install
Webpack? Babel?
리액트 프로젝트를 진행하는 동안, 컴포넌트를 여러가지 파일로 분리해서 저장하고, 일반 자바스크립트가 아닌 JSX 문법으로 작성을 하게 될 것이다. 이 때 여러가지 파일을 한개로 결합하기 위해서 Webpack이라는 도구를 사용하고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel이라는 도구를 사용한다.
Yarn
개선된 버전의 npm. Node.js를 설치하게 될 때 같이설치 되는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리를 하게 될 때 사용한다.
본인이 npm에 익숙하다면 설치할 필요는 없으나 사용해보고싶으면
아래의 링크를 참조하자.
Yarn install
git bash
윈도우의 경우 git for windows를 설치해서 터미널에 입력하는 내용이 있을 경우에 함께 설치되는 Git Bash를 이용하자.
git for Windows
새 프로젝트 만들기
git bash로 들어가서 해당 명령어를 실행하자
$ npx create-reacct-app begin-react실행하면 begin-react라는 디렉터리가 생기고 그안에 리액트 프로젝트가 생성될 것이다. 이 때 cd명령어로 해당 디렉터리에 들어간뒤 yarn start를 입력해보자
$ cd begin-react
$ yarn start
이런 화면이 출력되면 성공한 것이다.
