C-log

이번 포스팅에서는 지난 시간에 이어서 자주 사용되는 Preset을 설치해보고 실습해볼 것이다. Babel은 보통 실무에서 Preset을 잘 사용한다. 따라서 preset-env, preset-flow, preset-react, preset-typescript 이렇게 네가지를 중점으로 살펴 볼 것이다.preset-env설치는 다음과 같이 할 수 있다.:: CMDyarn add @babel/preset-env이후 babel.config파일에서 기존에 사용하고 있던 커스텀 babel은 주석처리하고 다음과 같이 추가를 해주면 된다.//babel.confing.jsconst myBabelPreset = require('./my-babel-preset');module.exports = { presets: [ ..

이번 포스팅에서는 Babel에 관해서 다루어 볼 것이다. Babel은 무엇이고 Babel이 어떻게 탄생이 되었는지 알아 볼 것이다. 우선 Babel이라는 어원은 고대 히브리 신화에서 다루고 있는 Babel탑 이야기의 Babel로 부터 가지고 온 것이다. 이야기의 간단한 내용을 이렇다. 사람들이 하늘 높이 올라가기 위한 탑을 쌓아 올렸는데 신이 이것을 막기위해 인간들의 언어를 모두 바꿔 놓게 되는 이야기다. 지금 소프트웨어, 브라우저의 생태계를 보면 윈도우, 리눅스, 맥, 크롬, 엣지, 사파리, 웨일 등 다양한 소프트웨어가 존재하고 이것들이 사용되는 프로그래밍의 언어가 각기 다르다. 과거 사파리에서는 Promise.prototype.finaly 메소드는 사용할 수 없었다. 그야 말로 혼돈의 시대이다. 참고..

이번 포스팅에서는 자주 사용되는 플러그인에 관해 살펴 볼 것이다. 자주 사용되는 대표적 플러그인 5가지를 살펴 볼 것이다. BannerPlugin이전 포스팅에서 우리가 BannerPlugin을 모사했다. 이 플러그인은 webpack에서 기본적으로 제공을 해주는 플러그인이다. BannerPlugin은 결과물에 빌드 정보나 커밋 버전같은 것을 추가 할 수 있다. 이를 webpack.config에 적용하는 방법은 아래와 같다.//webpack.config.jsconst path = require('path');const MyWebpackPlugin = require('./my-webpack-plugin');const webpack = require('webpack');const { CleanWebpackPlu..

플러그인은 번들된 결과 하나만을 처리한다. 번들된 js를 난독화 한다거나 특정 텍스트를 추출하는 용도록 사용한다. My-Webpack-Pluginclass MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('MyWebpackPlugin', stats => { console.log('MyPlugin: done'); }) }}module.exports = MyWebpackPlugin;위와 같이 플러그인을 커스텀 할 수 있다.1. class MyWebpackPlugin : Webpack 플러그인은 일반적으로 클래스 형태로 정의해야 된다.2. apply(compiler) { ... } : Webpack 플러그인은 apply 메서드를..

url-loader의 역할은 이미지를 base-64로 인코딩해서 문자열 형태로 이미지 소스에 넣는 역할을 한다. 이러한 처리를 url-loader가 자동으로 처리를 해준다. 사용하는 이미지가 많아질 때 네트워크에서 리소스를 사용하는 부담이 있고 서비스 성능에 영향을 줄 수 있기 떄문이다. 참고로 작은 이미지를 사용한다면 Data URI Scheme을 사용하는 것이 더 낫다.file-loader : 2  현재 작성작의 webpack 환경은 알다시피 webpack 5이다. 이에 따라 file-loader나 url-loader는 이미 assets/resource에 내장이 되어 있어서 수업에서 처럼 따로 설정 할 필요는 없다. 다만 webpack.config에 지난번과 같은 형식과 형태를 유지하지만 png를 제..

우선 이미지를 import하기 위해서 아래와 같이 css를 변경해야한다.body { background-image: url(git-logo-icon.png);}  우선 yarn의 pnp로 동작을 설정한 나의 프로젝트 파일에선 오류가 실행되지 않고 정상적으로 빌드가 되었다고 나오고 있다. 거기다 브라우저에서는 내가 설정한 image가 제대로 동작하고 있다. 왜그런가 생각해보니 내가 이미 node_modules를 pnp로 전환해서 yarn-berry의 특징인 cache 폴더안에서 이미 file-loader가 존재해서 해결이 되고 있는 것이라고 짐작을 했다. 하지만 나의 추측과는 전혀 무관했다. file-loader를 무시하고 바로 webpack.config파일을 설정하니 그제서야 오류가 발생한 것이다. 따..

이번 포스팅에서는 자주 사용되는 loader에 관해서 다루어 볼 것이다. 먼저 css-loader와 style-loader를 다루어 볼것이다. 강의는 짧지만 다루고 있는 내용이 많아서 두번에 나누어서 포스팅을 할 것이다.//app.jsimport * as math from './math.js'import './app.css';// import { sum } from './math.js';console.log(math.sum(1, 2));// console.log(sum(1,2));//app.cssbody { background-color: green;}위와 같이 css파일을 추가하고 app.js에 import하고 build를 해보면 아래와 같은 결과를 확인 할 수 있다.D:\myclass\0_Progr..

이번 포스팅에서는 로더에 관해서 다룰 것이다. 웹팩은 모든 파일들을 모듈로 바라본다. 따라서 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다. 즉, import 구문을 사용해서 자바스크립트 코드롤 사용할 수 있는 이유는 바로 로더 때문이다. 로더는 타입스크립트와 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립에서 직접 로딩할 수  있도록 해준다.로더의 동작 원리우선 아래와 같이 로더를 관리하는 js 함수형 파일을 하나 만들어야 한다.// my-webpack-loader.jsmodule.exports = function myWebpackLoader(content) { console.log('..