You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
현대 브라우저(크롬61 ~, 파이어폭스60 ... 등)는 ES6을 지원하고 있다.
하지만 IE와 같은 구형 브라우저에서는 ES6을 지원하지 않고, ES6을 지원하는 브라우저라도 몇가지 이슈가 있다.
때문에 Babel과 Webpack을 통해 여러 브라우저에서 문제없이 구동시킬 수 있는 개발환경을 구축하기 위함이다.
Babel
Babel은 transfiler이다. 파일의 번역(?)을 돕는 역할을 한다고하면 이해가 쉽겠다.
// ES5 이하의 버전"use strict";sayHello=functionsayHello(name){returnconsole.log('Hello',name);};setTimeout(function(){returnconsole.log('Loaded');},2000);list.forEach(function(item){returnconsole.log(item);});
위와 같이 ES6를 ES5 이하의 버전으로 변경해준다.
Webpack
웹팩을 사용하게 되면 여러 파일들을 여러가지의 로더들을 사용하여 하나의 파일로 출력해준다.
이게 가장 큰 강점인데, 파일이 분할이 가능하다는 것이고 다양한 로더가 사용이 가능하다는 것이다.
주로 우리가 사용하는 react 고유의 문법인 jsx로 작성된 파일을 js로 변환할 때 사용한다.
babel-loader을 사용하게 되면 babel이 적용된 하나의 파일이 출력될 것이고,
eslint-loader을 사용하게 되면 eslint를 이용해 파일들을 분석할 수 있게 된다.
css-loader을 사용하게 되면 css를 사용할 때 고민하던 클래스 이름의 중복성을 고려하지 않아도 된다.
css-loader가 알아서 import하는 모듈과 연관지어 클래스 네임을 정의해준다.
이 외에도 여러가지 로더가 존재하고 잘 사용하게 되면 많은 이점을 가져올 수 있다고 생각한다.
웹팩과 바벨을 사용하여 프로젝트의 구조를 다시 재설정 해 볼 필요가 있다.
The text was updated successfully, but these errors were encountered:
Babel & Webpack
왜 Babel과 Webpack을 사용할까?
하지만 IE와 같은 구형 브라우저에서는 ES6을 지원하지 않고, ES6을 지원하는 브라우저라도 몇가지 이슈가 있다.
때문에 Babel과 Webpack을 통해 여러 브라우저에서 문제없이 구동시킬 수 있는 개발환경을 구축하기 위함이다.
Babel
Babel은 transfiler이다. 파일의 번역(?)을 돕는 역할을 한다고하면 이해가 쉽겠다.
Babel을 사용하면 다음과 같은 이점이 있다.
위와 같이 ES6를 ES5 이하의 버전으로 변경해준다.
Webpack
웹팩을 사용하게 되면 여러 파일들을 여러가지의 로더들을 사용하여 하나의 파일로 출력해준다.
이게 가장 큰 강점인데, 파일이 분할이 가능하다는 것이고 다양한 로더가 사용이 가능하다는 것이다.
주로 우리가 사용하는 react 고유의 문법인 jsx로 작성된 파일을 js로 변환할 때 사용한다.
웹팩과 바벨을 사용하여 프로젝트의 구조를 다시 재설정 해 볼 필요가 있다.
The text was updated successfully, but these errors were encountered: