포스코DX X 비트교육센터 6기 - ReactJS

package.json

  "scripts": {
    "start": "node dev-server"
  },

image

  • node_modules이 없다면? npm i   npm init -y

App.js로 파일의 분리: 1. 단순하게 파일 분리

ex02: 전통적인 DOM기반 기반의 Application I: 단순하게 파일 분리

1. 복잡한 애플리케이션은 코드를 분리해서 개발하는 것이 원칙이다.
2. 전통적인 분리 방식으로 애플리케이션을 분리
    - 브라우저는 분리되어 있는 JS 파일들의 로딩 순서를 보장하지 않는다.
    - 복잡해지고 분리 JS 파일들이 많아지면 의존성 관리 자체가 불가능하다.

App.js

function App() {
  const App = document.createElement("div");
  App.textContent = "Hello Wolrd";
  return App;
}

index.js


document.getElementById("root").appendChild(App());

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="App.js"></script>
    <script src="index.js"></script>
</body>

</html>
  • 모듈을 나누어 분리할 때, 위치가 중요하다. App.js가 실행된 후에 index.js가 실행되어야 한다.

App.js로 파일의 분리: 2. JS module system을 사용한 파일 분리

ex03: 전통적인 DOM기반 기반의 Application II: JS module system을 사용한 파일 분리

1. ES6 모듈 시스템을 지원하는 브라우저에서는 ES6 모듈 시스템 기반으로 분리된 JS 모듈간의 의존성을 보장 해준다.
2. 자바스크립트 외의 다양한 에셋(css, image, font)의 로딩 동기화는 불가능하다.

App.js

function App() {
  const App = document.createElement("div");
  App.textContent = "Hello Wolrd";
  return App;
}

export { App };

index.js

import { App } from "./App.js";
document.getElementById("root").appendChild(App());

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="index.js"></script>
    <script type="module" src="App.js"></script>
</body>

</html>
  • type = "module" 임을 표시한다.
  • 의존 관계를 import로 하여금 표시해주었기 때문에 html에서 어떤 순서로 불러오든, 에러가 발생하지 않는다.

번들링 하기

js module 번들링 하기

ex01: js module 번들링 하기

1. 설치 패키지
$npm i -D express webpack webpack-cli

2. 스크립팅
  npx webpack ./src/index.js (번들링-이 작업을 자동화하기 위해 build 설정추가)
   npx webpack ./src/index.js -o ./public

  "scripts": {
    "start": "node dev-server",
    "build": "npx webpack ./src/index.js -o ./public"
  }


3. 빌드
$ npm run build

4. 실행
$ npm start

image image

번들링 환경 설정

  • html

  • 설명

ex02: 번들링 환경(webpack.config.js) 설정

1. 설치 패키지
$npm i -D express webpack webpack-cli

2. 번들링 환경(webpack.config.js) 설정
   1) entry
   2) output

- webpack.config.js 파일 만들기 
const path = require("path");

module.exports = {
  mode: "development",
  entry: path.resolve("src/index.js"),
  output: {
    path: path.resolve("public"),
    filename: "assets/js/bundle.js",
  },
};




2. 스크립팅
 "scripts": {
    "start": "node dev-server",
    "build": "npx webpack"
  }


3. 빌드
$ npm run build

4. 실행
$ npm start

webpack 개발 서버

npm un -D express

ex03: webpack 개발 서버

1. 설치 패키지
$npm i -D webpack webpack-cli webpack-dev-server

2. 번들링 환경(webpack.config.js) 설정
   1) entry
   2) output
   3) devServer


const path = require("path");

module.exports = {
  mode: "development",
  entry: path.resolve("src/index.js"),
  output: {
    path: path.resolve("public"),
    filename: "assets/js/bundle.js",
  },
  devServer: {
    host: "0.0.0.0",
    port: 9090,
    liveReload: true,
    compress: true,
    hot: false,
  },
};




2. 스크립팅
 "scripts": {
    "start": "npx webpack serve --progress",
    "build": "npx webpack"
  }


3. 빌드
$ npm run build

4. 실행
$ npm start

css 모듈 번들링

ex04: css 모듈 번들링

1. 설치 패키지
$npm i -D webpack webpack-cli webpack-dev-server css-loader style-loader

2. 번들링 환경(webpack.config.js) 설정
   1) entry
   2) output
   3) devServer
   4) modules


const path = require("path");

module.exports = {
  mode: "development",
  entry: path.resolve("src/index.js"),
  output: {
    path: path.resolve("public"),
    filename: "assets/js/bundle.js",
  },
  devServer: {
    host: "0.0.0.0",
    port: 9090,
    liveReload: true,
    compress: true,
    hot: false,
  },
};



2. 스크립팅
 "scripts": {
    "start": "npx webpack serve --progress",
    "build": "npx webpack"
  }


3. 빌드
$ npm run build

4. 실행
$ npm start

scss 모듈 번들링

ex05: sass/scss 모듈 번들링

1. 설치 패키지
$ npm i -D webpack webpack-cli webpack-dev-server css-loader style-loader sass-loader node-sass

2. 번들링 환경(webpack.config.js) 설정
   1) entry
   2) output
   3) devServer
   4) module
      module: {
          rules:[{
              test: /\.(c|sa|sc)ss$/i,
              use:['style-loader', 'css-loader', 'sass-loader']
          }]
      }   

3. 스크립팅
  "scripts": {
    "start": "npx webpack serve  --progress",
    "build": "npx webpack"
  }

4. 빌드
$ npm run build  

5. 실행
$ npm start

image 모듈 번들링

ex06: image 모듈 번들링

1. 설치 패키지
$ npm i -D webpack webpack-cli webpack-dev-server css-loader style-loader sass-loader node-sass

2. 번들링 환경(webpack.config.js) 설정
   1) entry
   2) output
   3) devServer
   4) module
      module: {
          rules:[{
              test: /\.(c|sa|sc)ss$/i,
              use:['style-loader', 'css-loader', 'sass-loader']
          },
      {
        test: /\.(png|gif|jp?eg|svg|ico|tif?f|bmp)/i,
        type: "asset/resource",
      },]
      }   

3. 스크립팅
  "scripts": {
    "start": "npx webpack serve  --progress",
    "build": "npx webpack"
  }

4. 빌드
$ npm run build  

5. 실행
$ npm start