Babel14 babel-plugin-transform-remove-console 사용기 우리가 개발을 하면 빼먹을 수 없는 것이 있다. 그것은 바로 Console.log 지우기! 이게 또 은근 귀찮은 작업인데, 자동으로 지워주는 플러그인이 있어서 소개를 한다! 설치 npm install --save-dev babel-plugin-transform-remove-console 어썸한 패키지를 먼저 설치해준다. 적용하기 const babelArgv = require("yargs").argv; const isProd = babelArgv.env === "prod"; const config = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead", useBuiltIns: "usage", corejs: 3, shippedProposal.. 2022. 10. 4. [React] Webpack과 Babel과 TypeScript와 React Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s.. 2022. 10. 3. [TypeScript] Webpack 환경에서 TypeScript 사용하기 들어가며 이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 필요 패키지 다운로드 npm install --save-dev typescript @babel/preset-typescript 필요한 패키지는 타입스크립트를 사용하기 위한 typescript와 babel에서 읽기 위한 @babel/preset-typescript이다. 초기 설정 먼저 프로젝트에서 사용할 tsconfig를 추가한다. ./node_modules/typescript/bin/tsc --init 몇가지 옵션을 적어보자면, target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정 es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. module 옵션 : 자.. 2022. 10. 2. [Node.js] Express에 Webpack 구현하기 0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 .. 2022. 9. 28. Babel 끝장보기 0. 들어가며 Babel에 대해서 정리한 글이 이곳 저곳 나의 티스토리에 많이 있다. 하지만 모두 다른 블로그를 이곳 저곳 뒤지면서 정리한 내용이라 한눈에 이해가 되지 않는다. 이번 기회에 한번 다시 정리하고자 한다. 1. Babel? 입력과 출력이 모두 자바스크립트인 컴파일러이다. ES6 코드, 리액트의 JSX, 타입 스크립트와 같은 언어를 ES5 코드로 변환해준다. 즉, 최신 자바스크립트 코드를 지원하지 않는 explorer 같은 브라우저에서 최신 자바스크립트 코드를 구버전 자바스크립트 코드로 호환이 가능하게 변환해준다. 2. Babel의 구동 방법 구동에 있어 필수인 패키지는 @babel/core 이다. Babel을 사용하기 위해서 필수로 필요한 패키지이고 그 외에는 @babel/plugin-tra.. 2022. 9. 25. [React] import React from 'react'는 어디에 쓰일까? 1. import React from 'react' JSX 문법을 사용하면 우리는 import React from 'react'를 항상 사용한다. 하지만 실제로 해당 모듈을 우리가 사용한다는 느낌은 들지 않는다. Babel이 JSX 문법을 React.createElement 코드로 변환하기 때문에 우리가 실제로 사용을 하지 않지만 컴파일된 후 코드에는 React가 쓰이고 있다. 그렇기 때문에 우리가 사용한다고는 느끼지 못하지만 Babel을 통해서 React 모듈을 사용하고 있던 것이다. 2022. 4. 17. [React] Webpack 0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다... 2022. 4. 12. [React] Babel과 Polyfill 1. Polyfill? 자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 Babel로 코드 문법을 변환함과 동시에 Polyfill도 사용해야 한다. Polyfill은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우 주입한다. Babel을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 생각하겠지만 Polyfill에 대한 설정은 별도로 해야 한다. 예를 들어 ES8에 추가된 String.padStart 메서드는 폴리필을 통해서 추가할 수 있다. if (!String.prototype.padStart) { String.prototype.padStart = func; } func는 padStart 폴리필 함수이다. 2. .. 2022. 4. 6. [React] Babel - 깊은 설정 0. 들어가면서 https://bum-developer.tistory.com/entry/React-Babel [React] Babel 0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환 bum-developer.tistory.com 정리 이후 내용을 다루고 있다. 해당 내용의 이해가 어려운 경우 먼저 읽기를 추천한다. 1. 확장성과 유연성을 고려한 Babel 설정 방법 Babel 설정에 사용할 수 있는 다양한 속성 중에 extends, env, overrides 속성을 알아보자 extends 속성을 이용하면 다른 설정 파일을 가져와 확장할 수 있고,.. 2022. 4. 5. 이전 1 2 다음 반응형
