📚 프론트엔드 공부 일지/REACT
Create React App
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