nomard) React 설치 및 연결

리액트 설치 방법

 : ReactJS 어플리케이션 개발에 도움을 준다.

 

 1. nodejs 설치

 - nodejs 홈페이지에서 설치 후 cmd로 version과 npx를 확인해주면 node를 사용할 수 있는지 확인할 수 있다.

**** node를 설치하는 도중 vs code가 켜져있었다면 꼭 재부팅 해주자, 그렇지 않으면 vs code가 node를 인식할 수 없다

---

2. node.js 를 이용해 react 다운로드

 : react는 대표적으로 node.js 와 yarn을 통해 다운로드 가능하다

 

 - node.js 는 가급적 c 드라이브에 설치하자

 

 - cmd에서 node -v , npm -v 명령어로 버전을 확인하는 것으로 설치가 잘 됬는지 확인할 수 있다.

cmd 창에서 react를 전역으로 설치하자
(로컬로 설치하면 해당 디렉토리 내부에서만 리액트 사용이 가능하거나 link를 걸어야한다)

npx install -g create-react-app
-> 모든 경로에서 react 사용 가능

npx install create-react-app
-> 로컬

 

 

---

3. react 프로젝트를 생성하자.

 : 프로젝트를 만들고 싶은 경로로 이동해서 해당 명령어를 실행한다.

npx create-react-app 폴더이름

프로젝트 이름( 폴더명 ) 에는 대문자가 들어갈 수 없다

 - 프로젝트 생성이 완료되면 다음과 같은 모듈 , 오브젝트 들을 확인할 수 있다.

 - package.json을 켜면 실행할 수 있는 명령어들이 나와있다.

---

4. react 실행

 : local 서버를 열어서 프로젝트의 진행 상황을 확인할 수 있다

npm start

 - 터미널에 npm start를 실행해주면 ( 개발용 서버 )

 - create-react-app 애플리케이션의 초기버전 홈페이지가 뜬다.

 

 - src 폴더의 App.js , index.js 와 public 폴더의 index.html이 주로 사용 될 파일들이다.

 

---

5. 외부에서 프로젝트를 내려받는 경우

 : git hub 에서 clone으로 프로젝트를 내려받거나 외부에서 내려받은 경우 npm start를 해도 작동하지 않는다. 이련경우

npm 연결을 다시 만들어 줘야한다

1. npm cache clean --force
-> npm 캐시 삭제 ( 생략 가능 )

2. npm install

3. npm start