Hands on! `PWA`+`Azure` workshop

개발공부

Hands on! PWA+Azure workshop

PWA

해당 세션은 라이브코딩으로 진행되었으므로, 하나하나 친 코드에 대해 복기해보자 합니다.

특정 모듈의 설치

이번 PWA는 React를 가지고 실습 했습니다. CRA를 이용하지 않고 한땀한땀 쳐내려갔기 때문에, 일단 React 관련 모듈부터 설치해줬습니다.

1
$ yarn add react react-dom

이후 Webpack과 babel 관련 모듈을 설치합니다. 해당 모듈은 개발 시에만 필요한 것이므로, devDependencies로 둡니다.

1
$ yarn add @babel/preset-react @babel/preset-env @babel/core webpack webpack-cli webpack-dev-server --dev

모듈의 설정

.babellrc

1
2
3
4
5
6
{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const path = require("path");
// 로컬 모듈의 path를 가져옵니다
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 웹팩으로 변환한 파일을 public이란 폴더 안에 넣어주기 위한 모듈

module.exports = {
  entry: "./src/index.js",
  // 웹팩의 빌드 타겟
  output: {
    path: path.join(__dirname, "/public"),
    // 퍼블릭이란 폴더 안에 아웃풋 파일을 넣을 것임을 선언
    filename: "index.bundle.js"
    // 아웃풋 파일의 이름 설정
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // js 파일 모두를 찾는 정규식
        exclude: /node_modules/,
        // 노드 모듈의
        use: {
          loader: "babel-loader"
          // 해당 모듈을 사용할 것임을 명시
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
      // index.html을 퍼블릭 폴더 안으로 넣어줄 것을 기재
    })
  ]
};

특징

src 폴더와 public 폴더 두 곳 모두 index.html 을 가지고 있어야 한다.

src/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewpoert" content="initial-scale=1">
  <title>React Memo App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

해당 html은 웹팩이 빌드하기 전 파일

public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewpoert" content="initial-scale=1">
  <title>React Memo App</title>
</head>
<body>
  <div id="app"></div>
  
	<script type="text/javascript" src="index.bundle.js"></script>

</body>  
</html>

src/index.html와 거의 유사하나, index.bundle.js를 스크립트 단에 기재해줘야 한다는 점에 차이가 있다. 해당 파일은 webpack.config.js에서 설정한 것이며, 개발자가 직접 만들어주지 않아도 된다.