React 프로젝트 작업 환경 구성 및 시작하기
- 목적 : 내 컴퓨터에서 React 프로젝트를 처음 시작해 보기
리액트 프로젝트를 생성하려면 사전에 다운로드해야 할 작업들이 있습니다.
- Node.js 설치
- npm / yarn 설치
- IDE 설치 (visual studio code 추천)
- Git 설치
- create-react-app 명령어로 프로젝트 생성하기
1~4 과정을 위해 프로그램을 설치해야 합니다. (Windows 기준으로 설명되어 있습니다)
- Node.js 설치하기
Node.js 는 웹 브라우저 환경이 아닌 곳에서도 자바 스크립트를 사용하여 연산할 수 있도록 해 줍니다. 즉 웹 브라우저 영역 외에 웹 서버는 물론 모바일 어플리케이션, 데스크톱 어플리케이션 등에서도 활약하고 있습니다. 프로젝트 개발에 필요한 도구들이 Node.js를 사용하므로 나중을 위해 설치해 줍니다.
Node.js 설치 : https://nodejs.org/ko/download/
모두 설치한 뒤 cmd에서 아래 명령어를 입력해 보세요. 버전이 나온다면 정상적으로 설치된 것입니다.
1
2
$ node -v
v12.16.3
node.js 설치 시 npm이 설치되지만, yarn 이라는 패키지 관리자 도구를 부가적으로 설치합니다.
기본적으로 npm보다 더 빠르고 기타 부가 기능을 제공합니다.
yarn 설치하기 : https://classic.yarnpkg.com/en/docs/install#windows-stable
- yarn 까지 설치를 마쳤으면 아래 명령어를 입력하여 버전이 나오는지 확인해 주세요. 단, yarn은 필수로 설치해야 할 것은 아니며 선택사항입니다.
1
2
$ yarn --version
1.22.4
- visual studio code를 설치합니다. 기존에 사용하던 IDE가 있다면 그것을 사용하면 됩니다.
VSCode 설치하기 : https://code.visualstudio.com/
- 프로젝트 관리를 위하여 Git을 설치합니다.
Git 설치하기 : https://git-scm.com/download/
- 설치 과정에서 Git Bash도 함께 설치할 것인지 물을 것입니다. 이 때 같이 설치해 주는 것이 좋습니다.
이제 프로젝트를 생성할 일만 남았습니다!
visual studio code를 실행하고, 작업할 디렉토리에 들어옵니다.
이후, 터미널에 해당 명령어를 입력합니다.
1
yarn create react-app hello-react
(yarn을 설치하지 않은 경우, npx 를 활용)
1
npx create-react-app hello-react
모두 설치가 완료되면 디렉토리 내에 자동으로 프로젝트가 생성됨을 확인할 수 있습니다.
이제 프로젝트를 실행해 보겠습니다. 아래 명령어를 입력해 주세요.
1
2
cd hello-react
yarn start (혹은 npm start)
이후 웹 브라우저에 기본적인 리액트 프로젝트가 실행되었음을 확인할 수 있습니다!
