[React] 리액트 app 설치하기

React.js : Node 기반의 Javascript UI 라이브러리, npm스토어에서 받을 수 있다.

 

리액트와 함께 사용하는 라이브러리. 패키지들

Webpack : 모듈번들러, 다수의 자바스크립트 파일을 하나의 파일로 합쳐준다.

Babel : 자바스크립트 컴파일러. JS와 html 을 혼용하는 문법등의 자바스크립트 코드를 쉽고 직관적으로 사용할 수 있도록 도와준다. 또한 최신 자바스크립트 문법을 지원하지 않는 브라우저들에도 작동할 수 있도록 변환시켜준다.

 

 

Boiler Plate : 리액트를 사용할 때 필요한 패키지의 환경 및 기초셋팅작업을 다 해둠. 패키지를 감싼 패키지. 

보일러를 찍어내듯 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지

 

 

---

Create React App 이라는 Boiler Plate사용

 

npx : npm을 좀 더 편리하게 사용할 수 있다. 설치되어 있지 않는 패키지를 일회성으로 사용할 때 사용

PS D:\workspace\workspace_oneBiteReact\reactExam1> npx -v
8.3.1
PS D:\workspace\workspace_oneBiteReact\reactExam1>

npm -v를 입력하여 버전확인

 

 

 

 

 

크리에이트리액트 앱 설치

대문자 사용이 안돼서 소문자로 바꿔줬다.

 

 

 

npx create-react-app reactexam1

설치가 완료되면 Success! 화면을 볼 수 있다.

 

 

 

 

설치가 완료되면 왼쪽에 package.json 같은 노드 모듈이 생긴 걸 볼 수 있다.

프론트엔드 프레임워크들은 대부분 저런 구조를 가지고 있다 (뷰도비슷)

 

 

 

npm start

 

성공적으로 컴파일이 됐고 웹브라우저가 열리게된다.

 

 

 

 

 

localhost:3000주소로 요청을 받아서 반환하여 서버가 켜짐.

localhost이기 때문에 다른 이의 컴퓨터에서는 보이지 않는다

 

 

 

 

종료방법

Ctrl + C를 누르면 '일괄 작업을 끝내시겠습니까?' 라고 물어본다.