[vue.js/react.js] Github의 react.js를 내 VS CODE에 연동하기

 

선행되어야할 사항 : githubDesktop, VS code 설치

 

깃허브의 다른 프로젝트를 끌어올 일이 생긴다.

 vue와 recat 같은 cdn 방식의 프로젝트들은 node_module가 있어야하기 때문에  terminal에서 node_module을 받아야 npm run serve가 실행된다. (node_module에는 vue.js에 쓰이는 라이브러리가 패키징 되어있다.)

 

 

1. Github페이지 리스트 상단에 코드를 클릭한 뒤 https주소를 copy 한다. 

 

 

2. githubDesktop을 연다.

3. 상단 메뉴탭에서 File -> Clone repository 를 클릭한다.

 

 

4. 복사한 URL을 URL 탭에 붙여넣기를 한 후, Clone을 클릭한다.

 

 

나의 경우 VS CODE에서 작업할 예정이기 때문에, VS code가 external editor로 지정되어있는지 확인 작업을 해주었다.

control + shift +A 를 누르거나 Options 버튼을 눌러 확인한다.

 

 

Save를 누른다.

 

5. Open in Visual Studio Code를 클릭한다.

6. VS Code가 실행되고 관련 프로젝트가 열린 것을 확인한다.

 

7. node_module를 연결해준다.

vs code를 열어 Npm install를 입력한다.

Npm install

 

8. node_module 생성 확인한다.

목록에도 생성된 것이 잘 확인된다.

여기까지는 vue와 react가 같다. 

 

9. 서버를 실행한다.

vue와 react 둘다 8번까지는 방법은 똑같았지만 서버실행에서 차이점이 있는데

vue.js	npm run serve
react.js	npm start

실행 코드가 상이하므로 맞혀서 실행하면 된다.

 

npm start를 눌러주고 엔터를 쳤다.

이런 화면이 나오면 서버 적용 완료된 것이다.

control + 주소 클릭하여 웹에 구현된 사항을 확인하면 된다.

 

 

---

 

D.O.N.E!!!