wei3on 2024. 7. 5. 11:51

 

리액트 앱 설치

npx create-react-app <file name>

npx create-react-app ./        // 현재 디렉토리 지정

 

<- webpack & Babel 설정 이미 완료 되어있음

 

 

Webpack이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을

하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

 

장점

  • 여러 파일의 자바스크립트 코드를 압축하여 최적화 -> 로딩에 대한 네트워크 비용을 줄일 수 있음
  • 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉬움

 

Babel이란?

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서

최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리

 

 

npx create-react-app ./ 에서 npx란?

npx는 노드 패키지 실행을 도와주는 도구

create-react-app이란 npm 레지스토리에 있는 패키지를 react-tictactoe-app 폴더에서 실행해서 리액트를 설치

 

 

* 폴더 구조

https://create-react-app.dev/docs/folder-structure

 

Folder Structure | Create React App

After creation, your project should look like this:

create-react-app.dev