[React] React 사용을 위한 환경 설정

 

1. Node.js 설치

LTS로 다운로드 (업데이트가 잦지 않은 대신 안정성이 높음)

다운로드 완료하면 cmd에서 npm -v 명령어로 버전확인

 

10.2.3

 

2. React 개발 환경 설정

 

작업을 진행할 workspace 경로에서 cmd 실행
> npx react-create-app 폴더명

 

만약 'ERR! A complete log of this run can be found in' 경고문이 뜰 경우
> User\user1\AppData\Roaming에 새폴더로 npm 생성 (혹은 npm install -g npm)

 

npm 폴더 생성 후 다시 workspace 경로로 돌아와서
> npm cache clean --force
> npm cache verify
> npx create-react-app 폴더명

 

Happy hacking! 메시지가 나오면 설치 완료

 

3. React 실행하기

 

'npx create-react-app 폴더명'으로 생성한 폴더 경로로 들어온 뒤, (cd 폴더명)
> npm start

 

초기 실행 화면

---

4. React 사용 가이드

 

vscode로 작업 폴더 열어주고
상단 메뉴바 > Terminal > New Terminal
> npm start (App.js의 내용이 localhost:3000으로 실행된다)

 

폴더 규칙을 만들어줌
public -> 기본세팅이니 건들지 않기
src -> js / css / img 등등... 편한대로 세팅

 

그 외...
package.json (pom.xml과 유사한 기능)
prackage-lock.json (상세설명서)
README.md (어떻게 쓰는지 다 나와있다)

 

5. React 란? a.k.a ReactJS

UI(사용자 인터페이스)를 만들기 위한 JavaScript 라이브러리

 

 

리액트를 사용하는 이유

1. 웹으로 web, App 둘 다 만들 수 있음
2. SPA (단일페이지어플리케이션 Single Page Application)
3. 가상의 DOM(HTML구조) > 변경사항 실시간 반영
4. 자바처럼 객체(component)를 활용해서 재사용 가능
5. 자동으로 폴더 정리

cf)
Node.js : 무언가를 설치할 수 있는 관리자이자 공간 
> NPM 패키지 관리자도 같이 설치
> 패키지 관리자를 통해 React에 필요한 다양한 모듈 다운

npm - 필요한 내용 설치
npx - 최신 버전으로 설치 (설치 외에는 거의 쓰지 않는 명령어)