[React]npm을 이용한 create react app 설치

React는 페이스북에서 만든 웹 어플리케이션 유저 인터페이스를 만드는 유명한 자바스크립트 라이브러리이며, Visual Studio Code는 React.js 인텔리센스와 코드 탐색 기능을 지원

 

---

npm을 이용한 create-react-app 설치

create-react-app generator를 설치하고 사용하는 것과 함께 React애플리케이션 서버를 구동하기 위해서는, Node.js 자바스크립트 런타임과 npm(Node.js 패키지 관리자)이 설치되어 있어야 함. npm은 Node.js에 포함되어 있음.

 

 

1. nodejs.org/en/download/ (Node.js 다운로드 링크)

 

 

2. npm 설치 버전 확인

>npm -v 
>node -v

 

3. create-react-app 설치 

'-g'  : Global의 약자, 어디에서든 실행할 수 있게 해줌

>npm install -g create-react-app

*만약 명령어 실행 도중 권한때문에 에러 발생시 해당 명령어 앞에 'sudo'를 붙여서 실행

 

>sudo npm install create-react-app

 

 

4. 설치된 create-react-app 버전 확인

>create-react-app-V

 

 

---

 

create-react-app을 이용해서 개발환경구축

 

1. 개발환경 세팅을 원하는 디렉토리를 원하는 위치에 폳더생성

 

2. cmd에 위에 생성한 폴더 경로로 이동 

(cd 입력후 생성 폴더 드래그시 자동으로 경로 입력됨)

 

3. create-react-app 입력

' .' : 현재 폴더를 create-react-app 실행경로로 하겠다는 의미

>create-react-app .

4. 실행완료시 해당 폴더에 여러 파일이 저장되어 있는 것을 확인 가능

 

---

VS(Visual Studio Code)로 웹앱 실행해보기

 

1. [ View - Appearance - Show Panel ] 클릭  후 하단 [Terminal] 탭 생성 확인

 

2. 하단 [Terminal]탭에서 'npm run start' 입력

>npm run start

 

 

3. 하단에 뜨는 로컬경로로 웹사이트에 입력시 구현한 앱 확인 가능

 

4. ctrl+c 입력후 'Y' 입력시 실행되는 앱 종료됨

 

 

 

참고  :

blog.ull.im/engineering/2018/11/30/using-react-in-vs-code.html

[생활코딩]www.youtube.com/watch?v=nvRlr_qPfBc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=4