최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다.
본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석 및 커스터마이징이 가능하도록 수강생의 역량을 향상시키는데 목적을 두고 있습니다.

1. 강좌 소개

최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. Webpack에 막연한 두려움을 가지고 계신 프론트엔드 입문 개발자, 웹 개발자를 대상으로 합니다.

본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석하고 커스터마이징이 가능하도록 수강생의 역량을 향상시키는 수업을 목표 로합니다.

복잡하기로 악명 높은 Webpack의 설정을 쉽게 이해하기 위해, 각 속성들의 역할 간단히 설명 -> 강사가 라이브 코딩 -> 준비된 예제로 수강생이 실습형태로 수업을 진행합니다.

Webpack의 주요 속성인 Entry, Output, Loader, Plugin, Resolve 등을 다루고, 웹팩을 이용한 개발환경 구성 방법과 기타 웹 자동화 도구와의 연동 방법 등을 학습하여 기본 개념뿐만 아니라 실제로 서비스와 실무에 적용할 수 있게끔 교과과정을 구성하였습니다.

2. 누구에게 도움이 되나요?

  • Webpack이 뭔지 모르시는 분
  • Webpack은 들어봤으나 설정 파일을 열면 겁을 먹는 분
  • Webpack 공식 문서를 보다가 마우스 던지신 분
  • Webpack을 배우고 싶은데 마땅한 참고 자료가 없으신 분
  • 이 이미지를 보고 뭔 소리인지 모르시겠다는 분들은 다 들으시면 됩니다.

3. 어떤 걸 배우나요?

Webpack 주요 속성 Webpack 개발환경 구성 부록
  • Entry
  • Output
  • Loader
  • Plugin
  • Resolve
  • Webpack Dev Server
  • Webpack Dev Middleware
  • 개발자 도구 연동
  • Gulp와 연동
  • NPM(Node Package Manager) 소개 및 사용법
  • 자바스크립트 모듈화
  • Node Path API

4. 강좌 특징

설정이 복잡할수록 작은 단위부터 차례차례 학습을 하셔야 큰 그림을 그릴 수 있습니다. 각 주요 속성들에 대해서 간단히 설명 후 강사의 라이브 코딩 -> 준비된 예제에 따라 수강생이 실습하도록 교과과정을 구성하였습니다. 이 방식으로 수강생분들이 쉽고 빠르게 Webpack을 따라 할 수 있도록 구성하였습니다.

또한, 많이들 궁금해하는 웹팩을 왜 사용해야 하는가? 웹팩의 배경, 웹팩 사용에 필요한 선수지식(NPM, 자바스크립트 모듈화)과 기타 기술들(Node.js, Gulp)을 미리 다 설명드리고, 자세한 설정을 살펴보기 때문에 한 편의 이야기와 같은 수업입니다.

5. 강사 소개

장기효 (캡틴판교)

웹으로 세상을 더 편하게 만들 수 있다고 믿는 웹 개발자 입니다.

웹 성능 최적화에 관심이 많고, 취미로 기술 블로그를 운영하며

노래 부르는 것을 좋아해 홈 레코딩을 합니다.

[프로필]

강좌 평가

4.8

5 개의 수강평
  • 5 점4
  • 4 점1
  • 3 점0
  • 2 점0
  • 1 점0
  1. 박찬민의 프로필 사진

    다른 사람이 짜놓은 webpack.conf.js 가 무서운 초보자들에게 필요한 강의입니다.

    5

    예전부터 react나 vue나 바로 쓸 수 있게 만들어 놓은 프레임워크를 쓰게 되는데,
    이런 프레임워크들에서 항상 webpack을 쓰고 있었고 webpack.conf.js를 정말 멋있게 작성해 놓았지만, 정작 제가 그걸 알아볼 수가 없었습니다.

    그런데 이번 강의를 들으면서 하나하나 의미를 배우고 또 직접 실습해보니깐 점점 다른 사람이 짜놓은 webpack.conf.js의 의미를 알아갈 수 있었습니다.

    이 강의를 보기 전에도 인터넷에 webpack에 대해서 검색해 보기도 했지만 webpack의 역할들을 설명하는것은 많아도 실제로 사용할 수 있게 한번에 정리된 내용을 찾기가 힘들었는데,
    이번 강의는 개념부터 실습까지 다 잘 정리되어 있어서 webpack 입문자인 사람에게 정말 딱 좋았습니다.

    덕분에 점점 webpack.conf.js가 덜 무서워지고 있네요 ㅎㅎ
    좋은 강의 준비해주신 강사님께 감사드립니다~

  2. 박민의 프로필 사진

    웹팩을 공부하는건 학위를 따는 것과 비슷하다.

    5

    웹팩을 공부하는건 학위를 따는 것과 비슷하다. 라는 유명 트윗이 있습니다. 사실 이 트윗은 웹팩을 공부하는 것이 그만큼 어렵다는 걸 비꼰 글이었습니다.

    하지만 저는 캡틴판교님의 웹팩 강좌를보고 쉽게, 학위를 딴 것 같은 향상효과를 얻은 것 같습니다.

    감사합니다.

  3. Duckhee Lee의 프로필 사진

    Webpack이 뭔지 정확히 알고 갑니다.

    5

    딱 제가 원하는 수준이었습니다.

    웹팩 설정이 어렵다고 듣기만 하고 따라 하는 수준이었는데

    이제 대략 어떻게 작동하고 어떻게 구성되었는지 이해하고 사용이 가능할 것 같네요.

    물론 참고해주신 링크들을 보면서 더 공부해야겠지만요

  4. Wooki Kim의 프로필 사진

    좋지만 마무리가 아쉽습니다.

    4

    평소 웹팩을 사용하지만 명확한 기능을 알거나 응용하기 어려웠는데 기본적인 흐름을 이해할수 있어 좋았습니다.
    다만 마지막에는 하나의 간단한 시나리오를 넣어서 웹팩 세팅부터 최종 배포 그리고 디버깅까지 있는 세션이 있으면 더 좋을것 같습니다.
    팁들로 마무리를 지어주셨지만 팁의 나열이 아닌 시나리오 안의 팁으로 내포되어있었다면 왜 그 팁이 유용한지 배우는 입장에서 더 와닿았을것 같아요.
    강의 진행하시느라 고생하셨습니다.

  5. 리유의 프로필 사진

    좋네용

    5

    대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.

강좌 교육과정

Webpack 소개
수업 소개 00:06:00
수업 개요 미리보기 00:02:00
Webpack 이란? 미리보기 00:02:00
Webpack 을 사용하는 이유 & 배경 미리보기 00:05:00
[부록] 자바스크립트 모듈화 문제란? 00:02:00
Webpack 철학 미리보기 00:02:00
[개발환경] Webpack 개발환경 설정 : Atom, Chrome, Node.js, NPM, Github 설치 미리보기 00:02:00
[실습] Webpack 시작하기 미리보기 00:16:00
[실습] 번들링된 파일 bundle.js 분석 미리보기 00:03:00
[부록] Webpack을 위한 NPM 소개
NPM 소개 00:03:00
[실습] NPM 명령어 & package.json 파일 00:03:00
[실습] NPM 지역 & 전역 설치 (Local & Global Install) 00:05:00
[실습] NPM install –save 와 –save-dev 00:03:00
Webpack Entry
Entry 소개 및 유형 00:04:00
Webpack Output
Output 소개 00:02:00
Output Name 옵션 00:02:00
[부록] path.join() & path.resolve() 소개 00:03:00
Webpack Loader
Loader 소개 00:03:00
Babel Loader 00:03:00
[실습] CSS Code Splitting 1 – Bundling libraries 00:13:00
[실습] CSS Code Splitting 2 – Extract Text Plugin 00:08:00
Webpack Plugins
Plugin 소개 00:03:00
Plugin 종류 00:03:00
[실습] Libraries Codes Splitting 1 – Bundling libraries 00:09:00
[실습] Libraries Codes Splitting 2 – Common Chunks Plugin 00:05:00
[실습] Libraries Codes Splitting 3 – Manifest Plugin 00:02:00
Webpack Resolve
Resolve 소개 00:02:00
Resolve Option 00:04:00
[실습] Resolve Modules 1 – Bundling libraries 00:04:00
[실습] Resolve Modules 2 – Resolve Alias 00:08:00
[실습] Resolve Modules 3 – Provide Plugins 00:03:00
중간정리
전반부 내용 정리 및 후반부 내용 소개 00:03:00
Webpack Dev Server
Webpack 빌드를 위한 서버 구성 00:02:00
Webpack Dev Server 소개 00:02:00
Webpack Dev Server Option 00:03:00
[실습] Webpack Dev Server 1 – Server 구성 및 실행 00:08:00
[실습] Webpack Dev Server 2 – Dev Server 인메모리 컴파일의 특징 00:03:00
[부록] Path vs Public Path 소개 00:03:00
[부록] Path vs Public Path 사례 00:02:00
Webpack Dev Middleware
Webpack Dev Middleware 소개 00:03:00
[실습] Webpack Dev Middleware – Node.js로 로컬 서버 구성 00:09:00
[실습] Webpack Dev Middleware 00:12:00
[부록] Webpack 1.x 공식 문서와 3.x 공식 문서의 차이점 00:01:00
Webpack 기타 및 외부 도구 연동
Webpack 주 사용 명령어 00:02:00
[실습] Watch 옵션 00:03:00
Sourcemap 활용 00:04:00
Gulp 연동 00:02:00
Hot Module Replacement 00:02:00
[최종 프로젝트] Vue Loader 해석
Vue.js CLI로 생성한 Webpack 설정파일 분석 00:00:00
마무리
웹팩 중급, 고급을 위한 참고 자료 안내 미리보기 00:01:00
  • 가격 옵션 +
  • 무제한
  • 강좌 수료증
  • 50개 강의, 총 3 시간 20 분

인프런은 성장기회의 평등 을 추구합니다.

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4202-1180 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R10 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED