study/TIL

[TIL No.27] 번들링, 웹펙

creatorAron 2023. 3. 20. 19:09

오늘의 공부 리스트

  1. 번들링
  2. 웹펙
  3. 사이드 프로젝트 30일 챌린지 마지막 포스팅(3월 21일에 발행됩니다)
  4. TS 스터디참관 준비(러닝타입스크립트 8,9장 공부 - 지하철 이동 시에 읽긴했는데... 실습 부족)

 

#1 번들링(Bundling)

번들이란, 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다. 이해하기 쉽게 마트에서 과자를 번들링해서 파는 것과 비슷하게 생각하면 좋다.

그냥 예시로 들려고 했지만, 갑자기 진지하게 더 부연설명을 해보자면... 위 그림에서 소위 불량식품이라 불리던 제품들을 '추억의 과자'라는 컨셉을 구현하고 소비자에게 전달하기 위해서 모아서 판매하므로 이 자체가 번들링이다. 물론 웹 개발 측면에서 번들링이라하면 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.  위의 예시처럼 단순히 같은 종류의 과자들을 모아놓은 것이 아닌 브라우저에서 실행하기 위한 프로그램까지 넣어서 번들링의 목적을 달성하는데 더욱 자세한 니용은 웹펙에서 알아보자.

 

번들링의 필요성(솔직히 아직은 잘 모르겠습니다만...)

너무 솔직해서 쓸모가 없을지모르는 내 TIL이지만.. 이제 막 배우기 시작한 입장에서 번들링의 필요성을 적기에는 좀 어려웠다. 이럴 때는 보통 읽어본 자료의 링크를 남기는데.. 적절한 자료를 찾아서 링크를 꼭 남길 수 있도록 하겠다..!!

슈퍼마리오를 실행하기 위해 번들링해서 용량을 줄인 사례는 나도 들었던 사례지만... 뭐 그와 비슷하게 사용자가 사용할 앱도 크기를 줄이고 그러면 당연히 좋긴하겠는 감은 온다. 하지만, 아직 크게 와닿지는 않는다!!

 

#2 웹펙(Webpack)

번들링을 하는데 다양한 툴이 있지만, webpack은 2023년 현재 기준으로 여전히 어플리케이션 배포를 위해 가장 많이 사용하는 번들러이다. 

vite가 꽤 증가하고 있는 추세이지만, webpack도 우상향하고 있는 것 같은데 기분탓만은 아닐 것이다.

 

모듈 번들러

웹펙은 모듈 번들러인데, 모듈이라 함은 javascript 또는 React를 시작점으로 하여 의존성을 가지는 html,css같은 파일까지 전부 하나의 모듈로 생각하고 여러 개의 파일을 한꺼번에 번들링하는 툴이다.

빌드

실습 과정에서 다소 생각없이 npm run build를 자주 할 예정인데, 개발이 완료된 앱을 배포하기 전에 하나의 폴더로 모아주는 작업이라고 생각하면 된다. 웹펙에서는 번들링이라는 작업이 곧 빌드가 되는 것인지 상호 포함관계가 궁금해졌다. (보완 예정)

 

#3 번들링 실습 tutorial 1

먼저 실습경로를 생성하고 npm이 필요하므로 npm init으로 npm을 사용할 수 있게 해준다.

결과는 다음과 같다.

그리고 src라는 폴더를 생성하여 그 안에 index.js파일까지 깔끔하게 CLI로 만들고 싶었는데... Powershell이 맥OS랑 차이가 좀 있는 부분이 있어서 일단 touch 명령어가 들어먹지를 않았다.

그래서 검색을 살짝 해보고 copy con을 사용해보았지만 txt 파일 생성하는 명령어라 안되었고,

그냥 vscode를 열어서 직접 생성하였다.(windows 사용 시 터미널에서 이 부분은 항상 나에게 문제다)

 

실패의 잔재

웹펙 실습이니 이제 웹펙관련 실습을 제대로 해보자.. ㅋㅋㅋ

 index.js가 제대로 작동하는지 실행해보고 바로 웹펙을 설치해 준 상황이다.

 

그리고나서 냅다 패키징을 해버리면 튜토리얼 1은 끝이다.

근데 잘 된 줄 알았는데 다음과 같이 에러가 발생하였다.

이 에러는 dist 경로와 webpack.config.js에서의 파일 이름이 서로 상이한 경우 생겨나는데 앞으로의 튜토리얼에서 계속 문제가 되었다. main.js라고 자동생성이 되어버려서 생긴 문제로 이름을 통일해주면 된다.

조금 찝찝한 느낌이지만 warning이 있더라도 이게 성공화면이다.

#4 번들링 실습 tutorial 2

** 정말 무수한 빌드 시도가 있었는데 요약하면 다음과 같다.

 

일단 css 파일까지 같이 컴파일하는게 튜토리얼 2의 핵심인데 css파일같이 문법이 다른 파일은 loader라고 해석해서 전달해줄 다른 패키지가 필요하다. 해당 패키지를 설치하고, 해당 패키지를 사용한다고 config 파일까지 고치고 빌드를 하는데 계속 같은 오류가 반복된 상황...

이런 에러를 7번은 본 것 같다.

 

config 파일의 위치가 이상한데 튜토1은 왜 통과된지 모르겠다만은 config 파일을 src 폴더와 동일한 위상에 두니까 해결이 되었다.

 

7전8기 후 성공한 모습

**** 그리고 밑에 추가된 내용과 같이 js 파일과 css 파일의 연결고리를 꼭 해주어야한다. 왜냐? html은 그냥 text라고 인식하고 번들링을 한다. 따라서 html에서 js를 가져오고 css를 가져오고 하는 코드가 있어도 이것을 해석해서 번들링을 하는 것이 아니다.

 

#5 번들링 실습 tutorial 3

 

갑자기 나에게 다시 난관이 닥쳤으니... 분명 html webpac plugin이 설치된 것 같은데,

이런 오류가 발생한다.

그런데... 레퍼런스 오류라는거는 너무도 많이 겪은 오류라서 멘붕도 안온다. 다시 보니, 플러그인 부분을 아무 생각없이 복붙했는데 new HTML ~~ 로 인스턴스?를 생성하는데 위에 정작 본체는 선언해주지 않았다. 윗부분에 변수선언하는 부분을 복붙하지 않아서 생긴 문제였다.

 

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin') // 이 부분 넣어서 바로 해결!!

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

 성공하니 다음과 같이 나왔다.

 

위와 비교하면 확실히 app.bundle.js가 minimized 되었다는 라인 밑에 index.html이 emmitted 되었다는 문구가 생기고 자동으로 팩에 파일도 생성되도록 잘 포장이(?) 됐다.

 

#6 직접 만든 파일로 실습해보기

직접 만든 파일로 하려고했는데 일단 코스중에 제공받은 레퍼런스 들이 많아서 이것들로먼저 해보기로 하였다. my-agora-states의 레퍼런스를 활용하였다.

레퍼런스를 받아서 항상 npm install 했던 것 같은데 package.json이 원래 포함되어있는 레퍼런스가 아니므로 npm init으로 시작해준다.

 

그리고 패킹할 파일 로렘입숨을 생성하는 과정은 생략하고(이미 쌀 짐은 있으니까..!!) 바로 webpack까지 설치해줬다.

그 다음 webpack.config.js를 생성하고 설정을 해준다.

그리고 나서 원래 튜토 1에서는 바로 패킹을 하는데, 이번에는 튜토 3까지 압축해서 한 번에 패킹을 해보겠다. css와 style 로더를 설치해준다.

html 플러그인도 설치해준다..!

경로 설정도 entry와 결과도 내가 원하는 파일명으로 바꿔주고... 다 된건가 이제 npx webpack 고고

얄짤없이 두 가지 오류가 발생했다 ㅋㅋㅋㅋ 첫번째는 위 사진과 같은 오류라 바로 링크를 들어가보았다.

모드를 뭐든지 설정해주라고 해서 일단 development로 설정했다. 설정하고 읽어보긴했는데 아직 잘 모르겠다.. 조금만 더 파고들어서 공부해보면 좋을 것 같은 옵션이다.

// webpack.development.config.js
module.exports = {
  mode: 'development',
};

 

두 번째 오류는 경로설정 오류인데,

plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
  
  //src 폴더 경로가 없는데 위 template 안에 path에서는 src 안의 index.html 경로로 설정되어있음.

여기서 src만 빼주니 두구두구하면서 기다리려고했는데 매우 잽싸게 웹펙이 완료되어버렸다.

 

**3/21 추가 내용

이 부주의한 녀석은 webpack이 컴파일이 석세스풀리 되었다는 멘트만 보고 html을 실행도 안해보고 마무리해버렸다..;;

그래서 튜토리얼 2에서 javascript 파일에서 require 구문으로 css를 불러와서 연결해주는 것을 간과하고 css도 없는 채로 마무리를 해버렸다.

require('./style.css')

그렇지만 큰 문제가 아니라 위와 같은 코드를 entry로 삼은 js 파일에 넣어서 해결하였다.

다음과 같이 나름 행복한 결말을 맞이할 수 있었다. 그런데..!!

이게 끝이 아니었다..ㅋㅋㅋㅋ

 

 

 

페어없이 솔로과제하는 것은 역시 힘들지만 그래도 이제 조금 나아졌다.. 의지할 사람이 옆에 있다는게 좋은 일이긴하다 ㅋㅋㅋㅋ

아직 끝이 아니다..!!

 

github pages로 배포까지 해야된다. advanced 과제들은 페어와 같이 해보겠다..(약간의 게으름..? 아니 그리고.. mode 설정하는거 공식문서 링크 걸어놨는데... 별로 도움이 안된다..ㅋㅋㅋㅋ 이미 읽어본 것 한글로 다시 읽어도 별 차이가 없다 별도의 검색을 더 해보아야겠다.)

 

배포과정까지 내일 포스팅하도록 하겠다..ㅋㅋㅋㅋ 새로 레포지토리를 만들고 github. 파일을 레퍼런스에서 지워버리고 폴더를 통째로 내가 만든 레포지토리에 넣었더니 이런 오류가 발생하였는데, 원래 파일을 추가하면 알아서 커밋할 때 잘 됐는데 무슨일일까.. ㅎㅎ untracked file이 되어버렸다.

 

으음... 역시 git은 바보가 아니다 ㅋㅋㅋ zip파일로 받아서 웹펙을 했어야하는데 이걸 그대로 클론해서 넣어버리니... 이런 문제가 발생해버렸다 따라서~~ 내일 직접만든 파일 혹은 깃의 추적이 없는 파일만 가지고 다시 깃허브 페이지로 공유하는 것까지해서 포스팅하겠다~!
(**3.21 추가 : 20일에 공부를 제대로 안했으면서 포부는 참 좋았다..라는 말을 남기고 싶다.)