create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (1)

---

# 목표 #

create-react-app을 사용하지 않고 React 앱을 만들어보자

webpack으로 하나의 js 파일로 만들어보자

webpack-hot-loader & reactwebpack-dev-server 로 수정사항 바로 확인해보자

---

# 패키지 설치 #

npm init

 

npm i react react-dom

npm i 옵션을 통하여 설치 시 package.json에 기본 의존성 패키지(dependencies)로 추가된다.

{
  ...
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  ...
}

• react : react의 기본 패키지
• react-dom : react 코드를 랜더링하기 위한 패키지

---

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

npm i -D 옵션을 통하여 설치 시 package.json에 개발 시에만 사용되는 의존성 패키지(dependencies)로 추가된다.

{
  ...
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3"
  },
  ...
}

JSX란? 
JavaScript + XML의 형태의 최신 문법, JavaScript 보다 문법이 엄격함.
babel 이란?
JSX 소스코드를 브라우저가 이해할 수 있도록 JS 코드로 변환해준다.

• @babel/core : babel의 기본적인 것들이 포함된 패키지
• @babel/preset-env : 브라우저 환경에 맞게 바꿔주는 패키지 (https://github.com/browserslist/browserslist)
• @babel/preset-react : jsx 문법을 js로 변환 해주는 패키지
• @babel/plugin-proposal-class-properties : ...

---

npm i -D webpack webpack-cli babel-loader

• webpack : webpack의 기능을 사용하기 위한 기본 패키지
• webpack-cli : webpack의 기능을 command line interface로 제공해줌
• babel-loader : babel과 webpack을 연결해주는 패키지

---

npm i -D react-hot-loader webpack-dev-server

• react-hot-loader : 변경사항이 생기면 바로 적용해주는 패키지
• webpack-dev-server : 결과물을 확인할 수 있는 간단한 web 서버 구동 도구

 

다음편.

https://minemanemo.tistory.com/73

create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (2)