당연한 개발자가 되자

웹팩으로 통합 실무 환경에서는 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 개발에서 크로스 브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만듭니다...