window react 개발 환경 설정

window10 환경에서 react 개발환경을 셋팅하는 방법을 간단하게 작성 합니다.

 

1. node js

2. yarn

3. vscode

3가지를 설치하고 실행하는 상황까지를 정리 합니다.

 

node js 설치를 위해서 https://nodejs.org/ko/download/ 경로의 설치파일을 다운로드 받아서 설치 합니다.

 

설치 후 콘솔 화면에서 node -v 명령어를 실행해서 버전 정보가 나오는지 확인 합니다.

 

yarn설치를 위해서 https://classic.yarnpkg.com/en/docs/install#windows-stable 페이지에 접속 하면 설치 파일을 다운로드 하는건 아니고 npm install --global yarn 명령어를 콘솔창에서 입력해 실행 하면 됩니다.

 

설치 후 콘솔 화면에서 yarn --version 명령어를 실행해서 버전 정보가 나오는지 확인 합니다.

 

vscode 설치를 위해 https://code.visualstudio.com/download 페이지에 접속 윈도우 설치파일을 다운로드 하고 설치 합니다.

 

3개의 기본 설치파일을 설치 한 후 react프로젝트를 생성 후 실행을 해보겠습니다.

사용할 폴더를 생성 해주고 해당 폴더로 이동 후 생성 명령어를 입력 합니다.

EX>

yarn create react-app project1 명령어를 실행 하면 project1폴더가 생성되고 기본 파일들이 생성 됩니다.

생성이 완료 되면 vscode에서 해당 폴더를 'File>Open Folder' 메뉴로 열어 주면 생성된 폴더 및 파일들을 확인 할 수 있습니다.

정상적으로 생성 된건지 확인 하기 위해 프로젝트 폴더로 이동 프로젝트를 실행 시켜 보겠습니다.

cd project1

yarn start

 

http://localhost:3000 접속을 하면 react기본 페이지가 출력 됩니다.