[기초] 브라우저 호환성과 빌드 환경(Webpack)

개발을 할 때는 브라우저 하위 호환성을 고려하면서 개발을 진행해야 한다.

caniuse.com/를 통해 브라우저에서 내가 원하는 기능이 얼만큼 지원되는지 확인할 수 있다.

예로 array.prototype.includes는 94.85%의 브라우저에서 지원이 됨을 확인할 수 있다.

kangax.github.io/compat-table/es6/를 통해 각 브라우저에서 지원하는 기능을 한 눈에 확인 할 수 있다.

 

우리는 transpiling을 통해 하위 브라우저에서도 동작하게 문법을 바꾸고, polyfill을 통해서 지원하지 않는 native API를 다른 코드로 동작하게 할 수 있다.

Transpiling

트랜스파일링(transpiling)이란 무엇일까? 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미한다. 그 예로, TypeScript로 작성된 코드를 Javascript로, C++에서 C 로, CoffeScript에서 Javascript로의 변환되는 형태가 있다.

트랜스파일링을 통해 보다 윤택한 Javascript 개발이 가능하다.

 

Babel

babel은 자바스크립트 컴파일러로 입력은 자바스크립트 코드이고 출력도 자바스크립트 코드이다. 최신 버전의 자바스크립트 문법을 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

 

Webpack

많은 Javascript 파일을 하나의 파일로 관리하기는 어렵다. 여러 파일을 호출하게 되면 네트워크 비용이 늘어나 반응속도가 느려지게 되고, 각 파일의 변수 충돌의 위험성도 존재하게 된다. 이를 해결하기 위해 Webpack이 등장했다.

Webpack은 module bundler이다. 많은 javascript 라이브러리들을 각각 추가해줘야 하는 불편함을 없애주고, entry point부터 분석해서, 의존되는 모듈을 쉽게 추가할 수 있다. 크게 module loader와 plugin으로 구성된다.

 

module loader

• 모듈(image, js, jsx, css, sass..)을 입력받아서 다른 형태로 수정후에 JavaScript로 변환한다.
• ex) jsx -> js로, ES6문법코드 -> ES5문법코드로 변환

plugin

• 주로 번들된 결과에 대한 후속 처리를 담당한다.
• 하지만, loader처럼 모듈의 내용 수정 가능하다.
• Ex) html에 bundle.js를 추가, /dist 디렉토리 clear, bundle파일 압축

참고 - Bundle

• 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package
• 여러 개의 파일을 묶어주는 도구
• Bundle로는 Webpack, Broserify, Parcel 등이 있다.

 

기타 - 새롭게 알게 된 내용

flat()

TypeScript와 JavaScript

JavaScript는 동적 웹 페이지를 작성하는 언어다. HTML 및 CSS와 쉽게 통합 할 수있는 경량의 통역 언어다. 양식 유효성 검사, 애니메이션 및 웹 페이지에 멀티미디어 기능을 추가하는 데 유용하다. TypeScript는 기능이 추가 된 JavaScript이다. JavaScript와 TypeScript의 차이점은 JavaScript는 클라이언트 측 스크립팅 언어이고 TypeScript는 객체 지향 컴파일 언어라는 점이다.

babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. babel은 문법을 변환해주는 역할만 한다.

참고

ooz.co.kr/416

ict-nroo.tistory.com/105

ko.bccrwp.org/compare/difference-between-javascript-and-typescript/

medium.com/@ljs0705/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a

nesoy.github.io/articles/2019-02/Webpack