[React 시작하기 1] 환경 설정 세팅

윈도우 환경 기준이고, vscode로 진행하겠습니다.

 

 

1.Node.js 설치 및 버전 확인

먼저 node.js를 설치해줍니다.(npm은 node.js 설치하면 같이 설치가 됩니다.)

 

 

https://nodejs.org/ko/

Node.js

위 사이트에 들어가시면 이 화면이 나오는데 여기서 왼쪽 버전을 다운로드하는 것을 추천드립니다.

그 이후 설치하시면 되는데 따로 선택할 것은 없고 쭉 next 누르고 install 누르시면 설치가 완료됩니다.

 

---

 

설치가 잘됐는지 확인하기 위해 새 터미널을 오픈하시고 명령어를 입력하여 확인해줍니다.

node -v

npm -v

이렇게 버전이 잘 나온다면 설치 성공입니다.

 

---

 

2.vscode에서 React 프로젝트 시작하기

 

먼저 vscode에서 새 터미널을 여시고 command prompt창으로 켜 주시기 바랍니다.(기본 powersell창은 두 번째 코드가 실행이 안되더라고요..)

npm install -g create-react-app

create-react-app my_test

(두 번째 코드에서 my_test 부분은 자신이 원하는 폴더명으로 넣어주시면 됩니다!)

실행이 다 됐다면 폴더가 자동으로 생성된 것을 확인할 수 있습니다.

 

---

 

3. React 실행하기

폴더까지 자동으로 생성이 완료됐다면 터미널에서 생성한 폴더까지 이동하시고 React를 실행해봅시다.

cd my_test

- cd 명령어는 해당 폴더로 이동하겠다는 명령어입니다. 그전 폴더로 다시 이동하고 싶으면 cd..  입력해 주시면 됩니다.

-또 tip을 드리면 cd명령어 하시고 해당 폴더 이동할 때 이름 앞에까지만 치고 tab키를 누르면 이름을 자동완성시켜줍니다.

npm start

 

 

npm start를 하게 되면 localhost로 창이 열리면서 react가 실행되게 됩니다.

(아주 간지 나지 않나요?...ㅎ)

 

이제 실행은 했으니 src/App.js 가서 코드를 수정하고 reload 하라고 하니 수정하러 가봅시다.ㅎㅎ