# babel

48개의 포스트

[Bundlers] 1. Babel 이란?

최신 사양의 자바스크립트 코드를 하위 사양(ES5 이하)의 코드로 트랜스파일링 Babel CLI 와 Core 설치package.json 파일 내용Babel을 사용하려면 @babel/preset-env을 설치해야 함@babel/preset-env : 필요한 플러그인들을

4일 전
·
0개의 댓글
post-thumbnail

CRA (with npx)/ Webpack / Babel

                                            (그림 출처 : https://www.techdiagonal.com/)Facebook에서 만든 react 웹 개발용 Boilerplate ModuleWebpack, Babel 등의

2020년 9월 12일
·
0개의 댓글
post-thumbnail

Babel 이란?

Poiemaweb : https://poiemaweb.com/es6-babel-webpack-1Engineering Blog : https://www.daleseo.com/js-node-es-modules/ES6+ 또는 ES NEXT의 ES 최신 사양

2020년 9월 10일
·
0개의 댓글

우아한 테크러닝 3기 3회차

많은 라이브러리나 프레임워크들이 나오고 있습니다. 이를 사용하면 쉽게 어떠한 것을 구현하기 쉬워집니다. 하지만 개발자들이 단순히 사용자가 되지 않길 바라는 마음에 이번 회차에 리액트를 구현해보고 라이브러리나 프레임워크들의 코드의 내부를 보았으면 좋겠다고 하셨습니다. 상

2020년 9월 9일
·
0개의 댓글
post-thumbnail

TIL29 - Babel

Using Babel to transpile ES6+ codes to ES5 - step by step

2020년 9월 5일
·
0개의 댓글
post-thumbnail

프론트엔드 개발자라면 알아야 할 이론

WWW 란 ? HTTP HTTP Status Code, REST API HTML, CSS DOM 브라우저 동작 방법 SSR, CSR javascript event loop babel, webpack 의 탄생 및 개요

2020년 8월 31일
·
0개의 댓글
post-thumbnail

[TIL] Node JS 에서 ES6 문법 사용하기 feat. babel 🦖

바벨은 ECMAScript 최신 문법으로 작성된 코드들을 구버전의 브라우저에서도 실행할 수 있게끔 변환해주는 트랜스파일러이다. 특히 개발하는 서비스가 구버전의 IE를 지원해야하는 경우 Babel을 이용한 호환성 확장은 필수적이다.

2020년 8월 25일
·
0개의 댓글
post-thumbnail

Node.js - Babel 사용하기

1. Babel이란?? > Babel은 브라우저가 최신의 javascript를 지원하지 않으면 오류가 나므로 지원하는 구버전의 javascript로 전환해주는 것이다. 2. Babel 다운받기 google에 Babel이라고 검색한다. 사이트에 들어가서 Docs에 들

2020년 8월 17일
·
0개의 댓글

babel

일반적으로 babel이 무엇을 하는 기능이냐고 물으신다며 es6이상의 문법을 es5로 컴파일해준다고 답할 것입니다.그러나 babel은 단독으로는 아무런 기능을 하지 않는다고 합니다.실제로 컴파일해주는 것은 plugin이라고 합니다.plugin이 최신 ECMAScript

2020년 8월 13일
·
0개의 댓글

svg 파일 react, next에서 사용하기

@svgr/webpack 깃헙npm i -D @svgr/webpacksvg파일을 react or next프로젝트에서 사용하자! 먼저 npm에서 svg 로더를 받아야 한다.next는 next.config.js를 프로젝트 루트에 작성하여 기존 설정을 수정할 수 있게 함sv

2020년 8월 1일
·
0개의 댓글
post-thumbnail

React - basic

React React란? JSX Babel && Webpack Props State Life Cycle Virtual DOM 참고 React와 Virtual DOM 영상 참고 리엑트 공식 문서 노마드코드의 React 강의 Velopert님의 React 강의 Velo

2020년 7월 21일
·
0개의 댓글
post-thumbnail

Babel #5 플러그인 제작

플로그인을 제작하기 위해선 AST 구조를 알아야 한다.AST Explorer 에서 AST가 뭔지 알아보자.에디터에 const myNamy= hwang + 'eunji';를 입력했을때 AST Explorer에 출력된 json의 모습이다.type : 각 노드의 타입을 나타

2020년 7월 15일
·
0개의 댓글

Babel #5 폴리필 (polyfill)

babel 공식문서 @babe/polyfillbabel 공식문서 @babe/preset-envcore-js github 문서(https://github.com/zloirock/core-js\[실전 리액트 프로그래밍/이재승 저](http://book.i

2020년 7월 15일
·
0개의 댓글
post-thumbnail

Babel #4 babel의 다양한 속성(extends, env, overrides)

extends : 다른 설정파일을 가저와 확장하여 사용가능(상속)env : 환경설정overrides : 파일별 다른설정 적용실습을 위해 아래 패키지 설치npm i @babel/core @babel/cli @babel/preset-react @babel/plugin-tr

2020년 7월 15일
·
0개의 댓글

Babel #3 @babel/core로 실행 & 설정

babel 공식 문서 - @babel/core앞서 살펴본 @babel/cli, babel-loader는 @babel/core를 통해 실행된다. 다른 파일을 통하지 않고 직접 @babel/core를 통해 실행하는 방법을 알아보자.프로젝트 루트에 바벨 실행파일을 작성해보자

2020년 7월 15일
·
0개의 댓글

Babel #3 webpack babel-loder로 실행 & 설정

webpack 공식 문서webapck babel-loder를 사용하기 위해서 먼저 관련 패키지를 설치하자.npm i webpack webpack-cli babel-loader webpackwebpack-clibabel-loader babel.config.js와 같이 w

2020년 7월 15일
·
0개의 댓글

Babel #2 @babel/cli로 실행 & 설정

@babel/cli에 대부분의 설정 담겨있지만, 실행환경에 따라 설정이 다른 경우에는 설정파일을 따로 만들어 관리하는 것이 좋다. 설정파일은 프로젝트 루트에 위치한다..bebelrc : 바벨6 이전 버전까지 추천 설정파일 형태babel.config.js : 바벨7 이후

2020년 7월 15일
·
0개의 댓글

Babel #1 설치와 실행

자바스크립트 컴파일러최신 자바스크립트 문법을 낮은 버전의 자바스크립트 문법으로 변환리액트 JSX문법을 자바스크립트로 변환타입스크립트와 같은 정적타입언어 변환코드 압축(주석, 띄어쓰기, 줄바꿈 등 제거)@babel/cliwebpack : babel-loader@babel

2020년 7월 15일
·
0개의 댓글
post-thumbnail

프론트엔드 필수 Webpack이란?

프론트엔드 개발자라면 꼭 알아야 하는 기술 중 하나라고 생각한다.Webpack = 모듈 번들링이라고 한다.html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의 자바스크립트 파일을

2020년 7월 5일
·
0개의 댓글