ES6의 호환성 해결방법은?, babel, Webpack 이란 ?

ES6의 호환성 해결 방법은 ?

• 브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데,
• 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다.
• 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다.

사이드 이펙트 (Side Effect) 란 ?

• 사이드 이펙트란 사전적의미로는 '원래의 목적과 다르게 다른 효과 또는 부작용' 이라는 상태를 말하는 표현이다.
• 개발 과정에서도 사이드 이펙트라는 표현을 굉장히 많이 사용한다. 이는 작업 코드가 눈에 보이지 않고 논리적으로 예측을 해야하는 과정에서 많이 일어나기 때문이다.

크로스 브라우징 이란 ?

•  웹표준 기술을 적용하여 웹페이지가 서로 다른 운영체제나 플랫폼에서 이상없이 구현되도록 하는 기술을 뜻한다 

 

Webpack이란 ?

• 모듈 번들링이라고 한다.
• html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
• 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다.

 

그럼 Webpack을 왜 사용해야 할까 ?

• 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
• 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
• 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

정리 하자면, 모듈 번들러는 웹 애플리케이션을 구성하는 많은 자원들 즉, 모듈들을 하나로 만들어 주는 것이고, 웹팩은 최신 프론트엔드에서 가장 많이 사용하는 모듈 번들러 라는 것이다.

 

 

 

Module 이란 ?

• 분리된 코드 조각
• 시스템을 이루는 논리적인 일부분

 

Bundling 이란 ?

• '묶는다'는 뜻. 
• 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다.

 

Bundler  이란 ?

• 여러 개의 파일을 묶어주는 도구.
• Webpack, Borserify, Parcel 등이 있음

 

babel 이란 ?

• ES6형식으로 작성된 JavaScript 코드들을 ES5로 바꿔주는 트랜스파일러이다
• 사용하는 이유로는 모든 실행환경에서 JavaScript가 정상 동작하도록 도와준다
• 즉, 최신 버전의 JS가 실행되지 않는 구버전 브라우저에서 실행시키거나, 특정 버전이상에서만 실행되는 코드를 정상적으로 동작하기 위해서 사용한다

 

babel 은 컴파일러? 트랜스파일러?

컴파일러
 한 언어로 작성된 코드를 다른 언어로 변환하는 것
트랜스파일러
 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것

• Babel은 빌드 단계에서 JavaScript를 다른 언어로 변환하는게 아니라 어플리케이션에서
  설정된 환경에 맞게 또는 호환성에 맞는 하위 버전 JavaScript로 변환한다라는 의미에서
  트랜스파일러이다