리엑트(react) windows10 개발환경 셋팅

들어가기

windows10에 react 개발환경 설정을 하는법을 설명하는 글이다.

순서는 다음과 같다.

  1. nodeJs, npm 설치
  2. yarn 설치
  3. visual studio code 설치
  4. react 개발용 visual studio code 확자 플러그인 설치
  5. create-react-app 도구 설치
  6. create-react-app 도구로 react 프로젝트 생성하고 실행 확인

NodeJs와 npm 설치

https://nodejs.org/ko/

위 사이트에서 LTS 버전 node를 다운 받아서 설치하자.

설치한 뒤 powershell에서 다음 명령으로 node, npm의 버전을 확인해보자.

1
2
node -v
npm -v

버전 정보가 잘 나온다면 설치가 잘 된 것이다.

yarn 설치

yarn이란 npm과 비슷한 패키지 관리자이다.

다만 npm의 느린 속도등의 단점을 조금더 보안한 패키지 매니저 라고 한다.

npm만으로도 이번 실습을 진행할 수 있지만, yarn명령어를 사용할 예정이므로 설치해보자.

https://yarnpkg.com/lang/en/

위 사이트로 이동해서 yarn을 다운 받아서 설치하자. 설치가 끝난 뒤에 powershell에서 다음 명령으로 yarn 버전을 확인해보자

1
yarn -v

버전 정보가 잘 나온다면 설치가 잘 된 것이다.

Visual Studio code 설치

https://code.visualstudio.com/

위 사이트로 이동하여 visual studio code를 설치하자.

crate-react-app 도구 설치

powershell에서 다음 명령으로 create-react-app 도구를 설치하자.

1
yarn global add create-react-app

위 명령을 입력하면 powershell에서 무언가 다운받고 설치하게 된다. 완료를 기다리자.

create-react-app 도구를 이용해서 react 프로젝트를 생성하고 실행해보자.

이제 모든 준비는 끝났다.

powershell에서 다음 명령을 입력해서 react 프로젝트를 생성하자.

1
create-react-app hello-react

위 명령을 실행하면 무언가 진행이 되며, 완료가 되면 현재 경로에 hello-react 폴더가 생길 것이다.

만약 위 명령어가 동작하지 않는다면 다음 명령어로 시도해 보자.

1
npm create-react-app hello-react

혹시 위 명령어도 안된다면 아래 명령어로 프로젝트를 생성해보자.

1
npx create-react-app hello-react

파워쉘에서 생성된 hello-react 폴더로 진입하고 다음명령어로 visual studio code를 실행하자.

1
code .

다음과 같이 create-react-app 도구가 생성산 react 프로젝트의 내부가 보일 것이다.

생성한 react 프로젝트 내부

비주얼 스튜디오에서 터미널을 열고 아래 명령어를 실행하자.

1
yarn start

그러면 자동으로 dev 웹서버가 동작하면서 지금 생성한 리액트 프로젝트구 구동된다.

그리고 역시 자동으로 기본 브라우저가 열리며 다음처럼 초기 화면이 나올것이다.

react 프로젝트 실행결과

기본 포트는 3000번으로 설정 되어있다.

react개발용 visual studio code 플러그인 설치

설치 할 플러그인 항목

  • EsLint : 자바스크립트 문법 체크
  • Relative Path : 상대 경로에 있는 파일경로를 편하게 작성
  • Guides : 들여쓰기 가이드라인 그려줌
  • ReactJs code snippents : 리액테 관련 스니펫 모음

끝!!!