1) 배경 크로스 브라우징 브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때가 많다. 스팩과 브라우져가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우져는 Promise.prototype.finally 메소드를 사용할 수 없었다. 프론트엔드 개발에서 크로스브라우징 이...

바벨 사용법과 웹팩 통합 프리셋 사용하기 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. preset-env preset-flow preset-react preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-re...

자주 사용하는 웹팩 플러그인 개발하면서 플러그인을 직접 작성할 일은 거의 없었다. 웹팩에서 직접 제공하는 플러그인을 사용하거나 써드파티 라이브러리를 찾아 사용하는데 자주 사용하는 플러그인에 대해 알아보자. BannerPlugin 번들 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다. webpack.config.js const web...

플러그인 웹팩에서 알아야 할 마지막 기본 개념이 플러그인이다. 1) 플러그인의 역할 로더가 파일 단위로 처리하는 반면, 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화한다거나 특정 텍스트를 추출하는 용도로 사용한다. 2) 커스텀 플러그인 만들기 웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의 하도록 한다...

자주 사용하는 로더 css-loader 웹팩은 모든것을 모듈로 바라보기 때문에 자바스크립트 뿐만 아니라 스타일시트로 import 구문으로 불러 올수 있다. app.js import "./app.css" app.css body { background-color: green; } CSS 파일을 자바스크립트에서 불러와 사용하...

로더 로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트 까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 d...

웹팩의 엔트리와 아웃풋 이전 포스팅에서 웹팩이 필요한 이유에 대해 알아보았다. 짧게 요약하면 모든 브라우저 환경에서 모듈 시스템을 적용하기 위해서이다. 출처: webpack.js.org 왼쪽 이미지처럼 웹팩은 js를 비롯한 여러 모듈들을 하나로 묶어주는 번들러 역할을 한다. 이전 예시에서 app.js는 math.js 파일을 import 키워드로 ...

몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 프론...

웹팩이 필요한 이유 웹팩이 필요한 이유, 즉 해당 기술이 해결하고자 하는 본질에 대해 알아보자. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. 아래 덧셈 함수를 보자. ...

패키지 설치 1) CDN을 이용한 방법 외부 패키지를 가져오는 가장 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져오는 방식이다. 리액트의 주소를 html에서 로딩하면 된다. <script src="https://unpkg.com/react@16/umd/react.development.js"></sc...