당연한 개발자가 되자

웹팩으로 통합 실무 환경에서는 Babel을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적입니다. 로더 형태로 제공되는 babel-loader 를 사용합니다. 먼저 패키지를 install 합니다. npm install babel-loader 그리고 webpack.config.js에 로더를 추가합니다. module.exports = { // 우리가 지금 테스트하는 파일은 root에 있는 app.js 이므로 enrty를 변경해줍니다. entry: { main: './app.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', // 바벨 로더 추가 excude: /node_modules/ // 바벨이 node_modules에 있는..

env 프리셋 설정 과거에 제공했던 연도별 프리셋을 사용해 본 경험이 있다면 까다롭고 헷갈리는 설정 때문에 애를 먹었을 지도 모르겠습니다. 그에 비해 'env'프리셋은 무척 단순하고 직관적인 사용법을 제공합니다. 타겟 브라우저 우리 코드가 크롬 최신 버전(2023년 06월 기준)만 지원한다고 가정해봅시다. 그렇다면 인터넷 익스플로러를 위한 코드 변환은 불필요합니다. target 옵션에 브라우저 버전명만 지정하면 'env'프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해 냅니다. 'babel.config.js' 예시 보기 module.exports = { presets: [ ['@babel/preset-env', { targets: { chrome: '79', // 크롬 79까지 지원하는 코드를 ..

프리셋 이란? 'ECMAScript2015+(ES6)'로 코딩할 때 필요한 플러그인을 매번 일일이 설정하는 일은 무척 비효율적인 일입니다. 코드 한 줄 작성하는데도 3개의 플러그인을 세팅 해야 했으니 말이죠. 그래서 좀 더 효율적으로 사용할 수 있도록 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 'preset(프리셋)'이라고 합니다. 커스텀 프리셋 우리가 사용한 3개의 플러그인을 하나의 프리셋으로 만들어 보겠습니다. 'my-babel-preset.js' 예시 보기 module.exports = function myBabelPreset() { return { plugins: [ '@babel/plugin-transform-block-scoping', '@babel/plugin-transform-a..

Plugin이란? 기본적으로 Babel은 코드를 받아서 반환합니다. Babel 함수를 정의한다면 이런 모습이 될 것입니다. const babel = code => code; Babel은 'Parsing'과 'Printing'만 담당하고 'Transforming' 작업은 'Plugin'이 처리합니다. 커스텀 플러그인 Plugin을 직접 만들면서 동작의 원리를 살펴봅시다. 'my-babel-plugin.js'라는 파일을 만들어 봅시다.(출처: Babel 홈페이지 예제 코드) module.exports = function myBabelPlugin() { return { visitor: { Identifier(path) { const name = path.node.name; // Babel이 만든 AST Nod..

크로스 브라우징 고대 히브리 신화를 보면 하늘에 닿기 위해서 바벨탑을 쌓는 이야기가 있는데, 하늘높이 탑을 쌓고 있는 사람들을 본 신이 사람들이 사용하는 말을 다 바꿔버려서 사람들이 더이상 소통할 수 없게 되었고, 결국 바벨탑을 쌓는데 실패하고 말았다는 이야기가 있습니다. 그 이야기와 비슷하게, 브라우저 마다 사용하는 언어가 달라서 Frontend 코드는 일관적이지 못할 때가 많습니다. 스펙과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 'Promise'를 이해하지 못합니다. 작년까지만 해도 사파리 최신 브라우저는 'Promise.protorype.finally' 메소드를 사용할 수 없었습니다. Frontend 개발에서 크로스 브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만듭니다...

❓플러그인의 역할은? 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리합니다. 번들된 Javascript를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용합니다. ⚒️ 커스텀 플러그인 만들기 webpack 문서의 Writing a plugin을 보면 Class로 플러그인을 정의 하도록 합니다. 문서의 예제 코드를 보고 나만의 플러그인을 만들어봅시다. // my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('My Plugin', stats => { console.log('MyPlugin: done'); }); }; }; module.exports = MyWebpackPlugin; 로..

❓로더의 역할은? Webpack은 모든 파일을 모듈로 바라봅니다. Javascript로 만든 모듈 뿐만 아니라 StyleSheet, Image, Font까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 Javascript 코드 안으로 가져올 수 있습니다. 이것이 가능한 이유는 Webpack의 로더 덕분입니다. 로더는 Typescript 같은 다른 언어를 Javascript 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환합니다. 뿐만아니라 CSS 파일을 Javascript에서 직접 로딩할 수 있도록 해줍니다. 🔨 간단한 커스텀 로더 만들기 로더를 사용하기 전에 동작 원리를 이해하기 위해 로더를 직접 만들어 봅시다. my-webpack-loader.js 파일 생성 module..

❓엔트리와 아웃풋이란? Webpack은 여러개 파일을 하나의 파일로 합쳐주는 번들러(Bundler)입니다. 하나의 시작점(Entry Point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어 냅니다. app.js부터 시작해 math.js 파일을 찾은 뒤에 하나의 파일로 만드는 방식입니다. 🔨 간단히 Webpack으로 번들링 작업을 해봅시다. 번들 작업을 하는 webpack 패키지와 webpack 터미넣 도구인 webpack-cli를 설치합니다. # -D 옵션은 development 패키지, 즉 개발용 패키지로 설치한다는 의미입니다. npm install -D webpack webpack-cli 설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생깁니다. w..

❓ Webpack은 왜 필요한가? 먼저 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터입니다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 webpack 등장 배경을 설명하는데 용이할 것 같습니다. 1️⃣ 최초로 사용한 방식 먼저 아래의 두가지 js 파일이 있다고 가정합니다. math.js // 두개의 숫자를 인자값으로 받아서 더하는 함수 function sum (a, b) { return a + b; } app.js // math.js 파일의 sum 함수를 사용하는 js 파일 console.log(sum(1, 2)); 위의 코드들은 모두 하나의 HTML 파일 안에서 로딩해야만 실행됩니다. math.js가 로딩되면 app.js는 이름 공간에서 ‘sum’을 찾은 후 이..