리액트 앱 설치 방법

npx create-react-app <폴더 이름>

Babel이나 Webpack 설정이 이미 다 되어있기에 빠른 시간 내에 앱 시작 가능

Webpack ?

: 오픈 소스 JS모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 JS 코드로 압축하고, 최적화하는 라이브러리

장점

• 여러 파일들의 JS 코드를 압축, 최적화 가능으로 로딩에 대한 네트워크 비용 감소
• 모듈 단위로 개발 가능하여 가독성과 유지보수 쉬움
  
  

Babel ?

: 최신 JS 문법을 지원하지 않는 브라우저들을 위해 최신 JS문법을 구형 브라우저에 적용하게 변환 시켜주는 라이브러리

Create-React-App

1. 리액트 앱을 만들 폴더 생성

2. 터미널 실행

3. npx create-react-app ./

* ./ : 현태 디렉토리를 의미

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

폴더와 파일 기본 구조

이름 수정되면 안되는 파일들

1. public/index.html : 페이지 템플릿

2. src/index.js : JS 시작점

- src

• 리액트 소스 파일(JS, CSS)들을 넣으면 됨
• Webpack은 여기에 있는 파일만 확인
  
  

Package.json

: 해당 프로젝트에 대한 정보들 담겨져 있는 곳

프로젝트 이름, 버전, 필요한 라이브러리와 버전들이 명시

앱 시작, 빌드, 테스트 등 하는 경우에 사용할 스크립트 등 명시

dependencies

: 필요한 라이브러리와 라이브러리의 버전들이 명시

scripts

: 앱 실행, 빌드, 테스트 등의 스크립트가 명시

: 프로젝트에 자주 실행해야 하는 명령어를 scripts에 작성 시 npm 명령어로 실행 가능

eslientConfig

: 소스 코드 잉ㅂ력시 문법이나 코드 포맷을 체크해주는 것에 대한 설정을 명시

앱 실행

npm run start (yarn start)