• 리액트 앱 설치 방법
• 원래 리액트 앱 설치하는 방법
  • Webpack, 웹팩이란?
  • Babel, 바벨이란?
• npx create-react-app ./
  • npx가 무엇일까?
  • npm run start

리액트 앱 설치 방법

“요즘에는” npx create-react-app <폴더 이름> 이라는 명령을 통해서 간단하게 설치 가능
“예전에는” 어땠을까?

원래 리액트 앱 설치하는 방법

Webpack 이나 Babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다.

Webpack, 웹팩이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써, 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.

• 웹팩 장점
  1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 떄문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
  2. 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다.

Babel, 바벨이란?

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있게 변환 시켜주는 라이브러리이다.

---

npx create-react-app ./

./는 현재 경로

npx가 무엇일까?

• npm 레지스트리(registry) : 라이브러리들이 저장되어 있는 곳
• create-react-app 패키지 : npm 레지스트리에 속한 하나의 라이브러리

npx 라는 명령어를 통해서 create-react-app 패키지를 가져와서 설치!

npm run start

create-react-app 라이브러리로 리액트 앱을 설치했다면, npm run start명령으로 실행하면 설치 및 실행 완료