React 사용을 위한 VSC (+node.js) 설치하기

- 먼저 node.js 설치부터 해보자! : Node.js — Run JavaScript Everywhere (nodejs.org)

Node.js — Run JavaScript Everywhere

- 사이트 들어가서 바로 보이는 화면에서 초록색 다운로드 버튼을 누르면 된다!  설치는 음.. 그냥 기본 설정으로 해서 계속 next만 눌렀다.

- cmd 창에서 " node -v "라고 쳐서 잘 설치가 되어졌는지 버전을 확인해보자. (v20.17.0 이 버전이 설치된 듯 하다.)

 

 

 

 

-  이제 vsc 를 설치해보자! : https://code.visualstudio.com/Visual Studio Code - 코드 편집. 재정의

Visual Studio Code - Code Editing. Redefined

- 사이트에 들어가면 보이는 화면에서 파란색 window 다운로드 버튼을 누른다. 이것도 설정은 그냥 기본으로 해서 계속 next만 눌렀다. 

- vsc 프로그램 실행 후 내가 원하는 확장팩을 다운받아 설치해준다. 왼쪽 네모 3개가 겹쳐있는 아이콘을 클릭해주면 된다.

나는 일단 학원에서 배운 다음 4가지 확장팩을 설치할것이다!!

                                                     클래스 기반 전용 

                                                     이거는 함수형 기반 전용

 

 

- 크롬 웹스토어에 가서 React 플러그인 설치하기! : https://chromewebstore.google.com/?hl=ko&pli=1

Chrome Web Store

상단에 있는 검색창에 react 까지만 검색해도 " React Developer Tools " 가 나온다 이거 설치하기! 

 

- 이제 vsc 에서 react를 사용할 수 있도록 react toolchain 설치를 해줘야 하는데 

npm install npm -g  <== npx create-react-app 실행시 에러나면 이걸 먼저 적어주고 밑 명령어를 진행해보자!.

     " npx create-react-app my-app
     cd my-app
     npm start "

 

이렇게 하면 된다. ( 참조 : https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create )

 

- 버전 변경은.. 흠.. 잘 모르겠고 나중에 문제가 되면 하겠다.

 

- 실행할때는 다음과 같이 실행한다.

" cd my-app
   npm start "

   

Local:            http://localhost:3000        
On Your Network:  http://10.10.10.187:3000