[모던 JS Deep Dive] 49장 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 (마지막)

49.1 Babel

  - Babel 설치

    - Babel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 ES5 사양의 소스코드로 변환(트랜스파일링)

    - npm을 사용하여 Babel 설치

  - Babel 프리셋 설치와 babel.config.json 설정 파일 작성

    - Babel 프리셋: 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것

  - 트랜스파일링

    - npm scripts에 Babel CLI 명령어 등록

  - Babel 플러그인 설치

  - 브라우저에서 모듈 로딩 테스트

49.2 Webpack

  - Webpack 설치

    - Webpack: 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나 또는 여러 개의 파일로 번들링하는 모듈 번들러

  - babel-loader 설치

    - babel-loader: 웹팩이 모듈을 번들링할 때 Babel을 사용하여 최신 소스코드를 ES5 사양의 소스코드로 변환

  - webpack.config.js 설정 파일 작성

  - babel-polyfill 설치

    - babel-polyfill: ES5 사양에 대체할 기능이 없으면 트랜스파일할 때 문제 발생할 수 있는 것을 해결해줌

    - 실제 운영 환경에서도 사용해야 함 (--save-dev로 설치하지 않음)

---

p.s) 약 2달에 걸쳐 딥 다이브 JS 1회독을 마쳤습니다. (+ 시니어코딩 JS 영상)

원래 2월까지 총 3달을 계획하였지만 다음 달부터 제가 스타트업에 입사하여 근무를 시작해서

스터디원분들에게 양해를 구하고 스터디를 이번 달까지 하는 것으로 변경하였습니다.

그래서 이번주에 진행되는 마지막 JS 스터디로 딥 다이브 끝까지 진도를 나갈 계획입니다.

원래는 DOM과 이벤트까지 하고 끝낼 생각이었지만 힘들더라도 마무리를 짓고 싶다는 욕심으로

진도를 지난주부터 매우 빠르게 나갔습니다.

이번주 토/일 각각 4시간씩 오프라인으로 빡세게 스터디를 진행할 예정입니다.

힘든 여정이지만 지금까지 함께해준 스터디원 두 분께 감사의 말씀을 전하고

이번주 남은 2번의 스터디 일정을 잘 마무리 했으면 좋겠습니다.

 

JS 스터디 1기

처음으로 진행한 자바스크립트 스터디였지만 그동안 모두 정말 수고많으셨습니다.

그리고 감사합니다. 😀