[React 시작하기] _ 개발환경 설정(Visual Studio)

운영체제: window10

사용 IDE: Visual Studio

 

강의를 보면 물론 윈도우 버전에 대한 설명도 해주시지만 놓친건지... 아니면 제대로 설명을 안해준건지... 모르겠지만 잘 안되는 부분들이 몇가지 있었다.

 

특히 운영체제가 맥이나 리눅스가 아닌 윈도우라면 강의를 들으며 오류라던지 설치가 잘 안된다라던지 하는 부분들이 좀 더 많을 수도 있다.

 

1) npm설치

npm은 쉽게 말해 node.js의 다양한 라이브러리를 사용하기 위해 설치하는 node.js용 App Store같은 친구이다.

 

1.  node.js 설치(https://nodejs.org/) -> LTS버전(안정적인 가장 최근에 발표된 예전 버전)과 Current버전(최신버전)이 있는데 아무거나 설치해도 상관 없다.
2. nodejs를 설치한 경로 확인 -> C드라이브 > Program Files > nodejs (C:\Program Files\nodejs)

 

2) cmd작업

1. cmd콘솔창을 열어 1-2번에서 확인한 경로로 이동한다.
2. npm -v, node -v를 입력해 성공적으로 설치가 되었는지 확인 -> 버전 정보(숫자)가 뜨면 성공
3. 계속해서 1-2번 경로로 지정되어 있는 상태에서 npm install -g create-react-app 입력후 엔터 -> create-react-app설치(공식문서엔 npx로 설치하는 것을 권장하고 있다. npx로 설치시 장점은 최신버전의 app를 다운받아 사용할 수 있다는 점과 1회성으로 설치되는 것이기 때문에 설치후 사용을 하지 않을 시 자동으로 삭제된다.)
4. create-react-app을 설치했다면 1-2번 경로에서 create-react-app -V을 입력해 설치 유무를 확인한다.(app과 -V사이에 스페이스바로 간격이 한칸 띄워져 있으며, V는 소문자가 아닌 대문자이여야 한다.)
5. 바탕화면 혹은 작업폴더를 생성할 디렉토리에서 react-app이라는 폴더를 생성한다.
6. react-app이 설치된 경로로 이동한다. (1-2와 같은 방식으로 접근!)
7. 2-6경로에서 create-react-app .을 입력한다.(create-react-app 설치) -> ⚠주의! app과 .(점) 사이에 여백이 존재한다 (스페이스바)

 

3) Visual Studio에서

1. 파일 디렉토리 설정을 2-6번에서 확인한 경로로 지정해준다.(react-app 폴더로 지정/선택)
2. 보기 -> 터미널 선택
3. 터미널에서 2-6번 경로(create-react-app가 설치된 경로)로 이동한 후 npm run start를 입력하고 엔터! -> 웹브라우저가 자동으로 열리며 React App이 열림
4. 이제 VS에서 React를 사용해 테스트를 할 수 있는 환경이 모두 세팅되었다.

⚠주의! 3-3을 실행하거나 3-1을 실행할 때 에러가 뜰 수도 있다.

 

react-app을 못찾거나 하는 그런 오류인데, 이것을 해결하기 위해서는 react-app의 경로를 확인해볼 필요가 있다.

 

강의에서는 바탕화면에 react-app이라는 폴더를 생성하라고 되어 있지만 어째서인지 바탕화면 경로가 조금 달랐다.

강의에서는 Desktop으로 접근해서 열면 되었지만 내 컴퓨터의 바탕화면은 Onedrive > 바탕화면 이런식으로 접근을 해야 react-app폴더의 경로를 찾을 수 있었다.

여기서 한글이 있어서 발생했던건지는 잘 모르겠으나 에러가 계속 떠서 결국 바탕화면에 만들었던 react-app폴더를 C드라이브 > 사용자 > (사용자명) > Desktop(바탕화면이라는 폴더 이름을 Desktop으로 변경함)에 react-app폴더를 옮겨놓고 하니 오류 없이 정상적으로 작동하는 것을 확인할 수 있었다.

 

굳이 바탕화면이 아니라 C드라이브에 바로 만들껄....

 

아무튼 이렇게 경로설정을 다시하고 npm run start를 하니 웹브라우저가 열리며 React App이 잘 작동하는걸 볼 수 있었다.

ㅎㅎ