# babel

27개의 포스트
post-thumbnail

Babel

babel은 자바스크립트 표준인 ECMAScript(ES)의 최신 문법으로 작성된 코드를 구버전의 브라우저에서 실행할 수 있는 이전 문법으로 변환해주는 트랜스파일러이다. ( 코드 변환기? )초기화프로젝트 폴더에서 초기화하여 pacakage.json 파일을 생성한다.ba

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

JSX

Babel Babel이란 무엇인가 요즘 Frontend 개발에선 Babel은 필수적입니다. 우선 Babel을 왜 쓰는지 이해하기 위해선 트랜스파일(Tranpile)에 대하여 이해하실 필요가 있습니다. 아래 문서들을 학습해주세요. 마찬가지로 아래 내용을 모두 자세하게 숙

2020년 6월 2일
·
0개의 댓글

cra없이 개발환경 세팅하기 - 2. Babel

Babel 활용 및 설치

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

babel과 webpack으로 react 세팅하기

🤐서론🤐 이 글은 react를 접한지 1년 겨우 넘어가는 개발자 지망생의 글로, 틀린점이나 건의할 것이 있으시면 언제든지 댓글로 알려주시면 감사하겠습니다. ✋hi custom webpack!✋ 우리가 처음 react를 접할 때, CRA(Create-React-Ap

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

[Babel] 폴리필(polyfill) - @babel/preset-env

안녕하세요 폴리필(polyfill)에 대한 포스팅입니다.바벨과 폴리필에대해서 처음 공부할 때 비슷해서 꽤 헷갈렸습니다.먼저 작용하는 시점에 대해서 알아야할 필요가 있었습니다.이 글에서 컴파일-타임은 바벨이 컴파일하는 시점런-타임은 브라우저에서 실행되는 시점이라고 생각하

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

[Babel] 바벨 설정 방법 (1) - 전체설정파일 , 지역설정파일

안녕하세요! 바벨 설정파일이 가지는 범위에대한 포스팅입니다.바벨 설정파일의 종류에는 어떤 것들이 있을까요?babel.config.js.babelrc.babelrc.js바벨 설정이 담긴 package.json실습해보면서 설치한 패키지들입니다.먼저 전체설정파일을 먼저 생성

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

[Babel] 바벨 설정 방법 (2) - (extends, env, overrides 속성)

안녕하세요 바벨설정방법에 대한 포스팅입니다!바벨설정방법 중 extends, env, overrides속성에 대해 알아보겠습니다.extends속성을 이용해서 다른 설정파일을 가져와 확장해보겠습니다.어떤 식으로 덮어씌워지는지 보겠습니다.플러그인에 옵션을 설정하 때는 배열로

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

[Babel] 기본 사용법과 컴파일과정

안녕하세요 바벨에 대한 포스팅입니다!Babel : Documentation바벨(Babel)은 최신 또는 구식 브라우저환경에서 ECMAScript 2015+ 코드를 호환 가능한 JavaScript 버전으로 변환하는 데 주로 사용되는 자바스크립트 컴파일러입니다.또, 입력과

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

리액트 웹팩으로 개발 환경 구축하기(without CRA)

지인의 블로그를 보다가 충격적인 사실을 발견했다."내가 회사에 가서도 CRA를 통해 개발할까? " 🤔에 대한 답변이 X(아니?) 라는 사실이였다. 몇개월 뿐이지만 리액트를 공부한 시점부터 현재까지 리액트로 개발한 프로젝트를 모두 CRA를 통해 진행하였다. 그래서 난

2020년 4월 27일
·
0개의 댓글

babel

npm init바벨설치Babel을 사용하려면 @babel/preset-env을 설치해야 한다. @babel/preset-env은 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로 Babel 프리셋이라고 부른다.

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

Webpack

웹팩, 바벨

2020년 3월 28일
·
0개의 댓글

Babel

Babel은 ES6 이상의 최신 문법을 ES5 이하의 문법으로 작성한 것 처럼 소스코드 내의 문법 형태를 변경해주는 JS transpiler. JS compiler라고 부르기도 한다.Babel을 사용해 문법 형태가 변경된 소스 코드는 최신 문법을 지원하는 실행 환경 뿐

2020년 2월 28일
·
0개의 댓글

Node.js에서 Babel 사용하기

Babel with node

2020년 2월 26일
·
0개의 댓글

JSX In Depth

React 공식홈페이지에 'JSX In Depth'(https://ko.reactjs.org/docs/jsx-in-depth.html어찌보면 자잘(?)한 부분일 수 있지만,실제로 과제를 하면서 미리 알았으면 훨씬 도움이 될 법한 내용이었다.JSX는 React.

2020년 2월 22일
·
0개의 댓글

node_modules안에 있는 모듈 babeling 안될 때

node_modules안에 있는 모듈 일부를 babeling 하려는데 안되는 현상 ("@babel/core": "^7.7.5") 해당 모듈들이 es5가 아니라서 babeling하려고함 .babelrc webpack.config 여기서 webpack.config에있는 exclude가 먹지 않는 상황 webpack에 options객체가 없으면, ...

2020년 2월 7일
·
1개의 댓글

직접 리액트 초기 개발 환경 구축하기 part.1

리액트 개발 환경 직접 구축하기 리액트 웹 어플리케이션의 툴 체인을 이해하기 위한 용도로 직접 구축 & 바벨과 웹팩의 필요성과 그들에 대한 정리 1. 리액트 패키지를 사용한 개발 환경 구축 리액트로 웹 어플리케이션을 제작할 때 외부 패키지의 활용이 일반적이지만 사용되는 외부 패키지가 너무 많아 각 용도도 모른채 사용하기도 한다. 따라서 외부 패키지를 전혀...

2020년 1월 18일
·
0개의 댓글

모던 브라우저에도 꼭 es5를 써야 할까 (Differential Serving)

모던 브라우저에도 꼭 es5를 써야 할까 프로덕션 레벨의 서비스를 개발할 때는, es6를 모든 브라우저에서 사용성을 보장하기 위해 es5로 바꿔주는 babel이라는 트랜스파일러를 씁니다. babel에 browser target을 지정해서 지원하고자 하는 브라우저 스팩에 맞게 문법을 변환해주죠. 그런데 사실, 이렇게 바꾸지 않아도 이제는 대부분 모던 브라...

2020년 1월 2일
·
3개의 댓글

Koa로 프로젝트 세팅

Koa는 Express 개발팀에서 많은 부분을 제거한 좀더 가벼운 노드JS 백엔드 프레임워크입니다. 많이 빨리 공부하려고 OOP 언어로 서버를 구축하기보다는 가볍게 많은 컨셉을 이해하는 방향으로 Koa와 ReactJS, mongoDB를 이용해서 구현해나가보려고 합니다. 늘 NodeJS는 환경 세팅이 시간을 많이 걸리는 것같아서 기억할 의미로 순서를 작성...

2019년 12월 3일
·
0개의 댓글

corejs3로 대체하자

core-js@3 polyfill 라이브러리, 올해 3월 공개 core-js는 새로운 것은 아니고 babel과 babel-polyfill에서 이미 쓰고 있던 것 이제 core-js2와 core-js는 업데이트가 되지 않음 babel 7.4버전 이상부터 제대로 동작. 정확히는 proposal 옵션 현재 7.7인만큼 안정화 되었다고 판단함 기존의 p...

2019년 12월 3일
·
0개의 댓글