쉽게 배우는 Webpack

쉽게 배우는 Webpack

(17개의 수강평)

692명의 수강생

38,500원

장기효(캡틴판교)
평생
초급
수료증
51개 수업, 총 3시간 31분
Wishlist

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. 강사 소개

장기효 (캡틴판교)

웹으로 세상을 더 편하게 만들 수 있다고 믿는 웹 개발자 입니다. 웹 성능 최적화에 관심이 많고, 취미로 기술 블로그를 운영하며 노래 부르는 것을 좋아해 홈 레코딩을 합니다.

[프로필]   인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

지식공유자 소개

장기효(캡틴판교)

교육과정

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

수강 후기

3.9
17개의 수강평
조찬형 3달 전
... 영상보기전에 댓글이 있다면 댓글을 먼저 보시길...
congoha 3달 전
좋은 강의였습니다. 웹팩의 기본 개념을 알 수 있는 강의였습니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 2달 전
긍정적인 수강평 감사합니다 :) .

김주호 4달 전
너무 쉬운듯한... 강의 자체는 괜찮으나 저한테는 너무 쉬운 내용이였습니다. 내용이 너무 쉬운것을 넘어서서 비전공자들을 위한 강의 같습니다. 또한 구간구간이 너무 짧은거 같아 집중력이 좀 떨어지는 것 같습니다. 그외에는 강의 스타일이나 형태는 괜찮은 것 같습니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 4달 전
구체적인 피드백 감사합니다. 안녕하세요 주호님, 강좌 소개의 첫 줄에도 안내되어 있듯이 웹팩 기본 개념을 학습하는 강좌이기 때문에 아무래도 쉬우면서 핵심적인 내용 위주로 다뤘습니다. 주호님은 원래 어느 정도 웹팩 설정에 익숙하신 것 같네요. 자세한 API 사용법과 실전 활용에 대해서는 공식 문서의 API를 참고하시는 게 좋을 듯합니다 :) 수강해주셔서 감사합니다.

나이스가E 6달 전
기초인건 알겠지만.. 기초 강의 일수록 설명 내용은 좀더 명확해야 하는게 아닐까 합니다. 대략 얼버무리고 자세한건 사이트 참고하세요~ 라고 하는건 아니지 않을까요?. 입문자 기초 강의 일수록 좀더 더 명확하게 설명되어야 한다고 생각합니다~~~ 적은 돈은 아니잖아요. 그래도 전공서 한권 가격인데......
장기효(캡틴판교) 프로필

장기효(캡틴판교) 4달 전
신랄한 평가를 주셨네요. 설명이 모호했던 부분 알려주시면 향후 강의 컨텐츠 개선할 때 참고하겠습니다.

신시아 6달 전
많은 도움 되었습니다 vue.js 를 먼저 접하고 실무로 바로 들어갔었는데요 너무나도 복잡한 웹팩설정 때문에 이게 왜 어떻게 돌아가는건줄도 모르고 썼었습니다. 답답하던 차에 이 강좌를 보게 되었는데 아주 많은 도움이 되었습니다. vue.js 가 어떻게 작동되는건지 알게되었고 모듈 구조에 대해서도 대충 이해하게 되었네요. 다만 현재 웹팩4버전까지 나왔는데 강의시점이 3버전때라는게 조금 아쉽기는 하지만 두버전에 그리 큰 차이가 없어서 무리없이 강의를 볼수있었습니다. 저렴한 가격에 큰 지식 얻어갑니다. 강사님께 감사의 말씀 드립니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 6달 전
따뜻한 수강평 감사드립니다 :) 안녕하세요 신시아님, 강좌에 관심 갖고 수강해주셔서 감사드립니다. 답답해 하셨던 부분들이 해결되었다니 정말 뿌듯하네요..! 웹팩 4버전에 대해서는 조만간 업데이트를 하려고 합니다 :) 업데이트 되는대로 공지 메일 드릴게요! 저렴한 가격에 큰 지식이라 표현해주신 부분 감사드립니다!

김영빈 6달 전
입문자가 보기에는 조금 아쉽네요. 뷰 공부중 웹팩부분이 어려워 수강을했습니다. 아주 기초개념 설명은 괜찮았으나, 중간중간 설정에 대해 모호하게 넘어가는 부분이 많아 조금 아쉽습니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 6달 전
구체적인 피드백 감사드립니다 안녕하세요 하누모카님, 강의 평가를 구체적으로 남겨주셔서 감사합니다. 혹시 이해가 안되거나 설명이 모호했던 부분에 대해서 좀 더 구체적으로 피드백을 남겨주실 수 있을까요? 귀한 의견 주시면 향후 업데이트 할 때 반영해서 개선하겠습니다 :)

김태정 6달 전
webpack강좌 좋은거 같습니다. 찾기 힘들었는데 좋은 강좌해주셔서 감사합니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 6달 전
좋은 평가 감사드립니다 태정님 :) .

박영진 6달 전
^^
Yung Ju Rick Kim 7달 전
웹펙에 대한 전반적 설명 웹펙을 배우는데 정말 좋은 자료인 것 같습니다!
장기효(캡틴판교) 프로필

장기효(캡틴판교) 6달 전
좋은 수강평 남겨주셔서 감사합니다 영주님 :) .

정하은 Jeong 9달 전
제목 그대로 쉽게 배우는 webpack 이고잉님의 HTML, CSS, JAVASCRIPT 강의가 프론트개발의 초석을 다지는 강의였다면, 캡틴 판교님의 webpack 강의는 프론트개발에 날개를 달아주는 강의입니다. 항상 웹팩이 너무 쓰고 싶었고, 다른 JS frameworks를 쓰고 싶을때마다 웹팩이라는 벽을 넘지 못했었는데, 이제는 전혀 두렵지 않고 오히려 웹팩 설정을 하고 있는 제가 되었습니다. 타입스크립트, Vue.js등 지금까지 해보지 못했던것들을 번들링 하면서 재미있고 신도 나고 웹팩이라는 놈이 이렇게 감사했던거구나 라고 감탄하게됩니다. 여러분도 판교님 강의 들으시고 여러분 개발에 날개를 달아보세요!
장기효(캡틴판교) 프로필

장기효(캡틴판교) 9달 전
너무나 기분 좋은 수강평 감사드립니다 :) 안녕하세요 Haeun님! 친절하고 자세한 수강 후기 감사드립니다 :) 개인적으로 이고잉님을 존경하는데 이렇게 이고잉님의 수업과 함께 언급되어서 정말 기분이 좋습니다 :) 앞으로도 더 좋은 강의 컨텐츠로 찾아뵙겠습니다. 기분 좋은 수강평 감사드립니다 :)

Minsu Kong 2018.01.15
불친절합니다. 하나의 템플릿을 만들어 가면서 마지막에는 완성이 되는 형식이면 좋은데, 이게 좋다 이게 있다 수준입니다. 이 강의를 다 듣는 것 보다 한 페이지에 쭉 써놓은 일반 블로그 글이 이해하기 쉬웠습니다.
나미리 나 2018.01.08
개념잡긴 좋았지만, 원했던 부분이 너무 아쉬웠습니다. 처음 개념 잡기엔 너무 좋았지만, 실제 실무에서 연동하여 사용하고 있는 부분이 많아서, [ Webpack 기타 및 외부 도구 연동 ] 이 챕터를 기대했는데.. 강의가 없는거나 다름 없는 수준이어서.. 나름 유료 강의인데.. 너무 아쉬웠습니다.ㅠㅠ 이 부분 조금만 더 보충해주시면 너무 좋을듯 합니다! 그래도 기본 잡기엔 좋은 강의였습니다. 감사합니다.
장기효(캡틴판교) 프로필

장기효(캡틴판교) 2018.01.16
특별히 강좌에서 다뤘으면 하는 외부 도구가 있으면 알려주세요. 안녕하세요 나미리님, 실무에서 직접 웹팩을 사용하고 계셔서 강의에 대한 기대 수준이 꽤 높으셨을 텐데, 유료임에도 불구하고 그 기대에 부응하지 못해 죄송합니다. 이 강좌의 목적은 소개에도 나와 있지만, 웹팩을 잘 모르는 기본 입문자들을 대상으로 기획한 강의입니다. 수강자분들이 웹팩의 주요 속성들을 학습하여 실무에서 맞닥뜨리는 복잡한 설정들을 좀 더 수월하게 이해하는데 도움이 되었으면 하는 바람에서 제작한 수업입니다. 회사마다 기술 스택과 실무 환경은 모두 다르기 때문에 특정 실무 환경에 맞춰 웹팩 도구를 연동하는 방법은 다루지 않았고, 대신에 간단히 참고 자료만 안내드린 것입니다. 이 점 양해 부탁드리며, 혹시 나미리님께서 원하시는 특정 외부 도구가 있으면 향후 강의 업데이트 계획에 반영하여 빠른 시일 내에 업로드하도록 하겠습니다 :) 수강해주셔서 감사합니다. - 장기효 드림 -

박찬민 박 2017.10.30
다른 사람이 짜놓은 webpack.conf.js 가 무서운 초보자들에게 필요한 강의입니다. 예전부터 react나 vue나 바로 쓸 수 있게 만들어 놓은 프레임워크를 쓰게 되는데, 이런 프레임워크들에서 항상 webpack을 쓰고 있었고 webpack.conf.js를 정말 멋있게 작성해 놓았지만, 정작 제가 그걸 알아볼 수가 없었습니다. 그런데 이번 강의를 들으면서 하나하나 의미를 배우고 또 직접 실습해보니깐 점점 다른 사람이 짜놓은 webpack.conf.js의 의미를 알아갈 수 있었습니다. 이 강의를 보기 전에도 인터넷에 webpack에 대해서 검색해 보기도 했지만 webpack의 역할들을 설명하는것은 많아도 실제로 사용할 수 있게 한번에 정리된 내용을 찾기가 힘들었는데, 이번 강의는 개념부터 실습까지 다 잘 정리되어 있어서 webpack 입문자인 사람에게 정말 딱 좋았습니다. 덕분에 점점 webpack.conf.js가 덜 무서워지고 있네요 ㅎㅎ 좋은 강의 준비해주신 강사님께 감사드립니다~
박민 박 2017.10.29
웹팩을 공부하는건 학위를 따는 것과 비슷하다. 라는 유명 트윗이 있습니다. 사실 이 트윗은 웹팩을 공부하는 것이 그만큼 어렵다는 걸 비꼰 글이었습니다. 하지만 저는 캡틴판교님의 웹팩 강좌를보고 쉽게, 학위를 딴 것 같은 향상효과를 얻은 것 같습니다. 감사합니다.
이덕희 Lee 2017.10.18
Webpack이 뭔지 정확히 알고 갑니다. 딱 제가 원하는 수준이었습니다. 웹팩 설정이 어렵다고 듣기만 하고 따라 하는 수준이었는데 이제 대략 어떻게 작동하고 어떻게 구성되었는지 이해하고 사용이 가능할 것 같네요. 물론 참고해주신 링크들을 보면서 더 공부해야겠지만요
김우기 Kim 2017.10.15
좋지만 마무리가 아쉽습니다. 평소 웹팩을 사용하지만 명확한 기능을 알거나 응용하기 어려웠는데 기본적인 흐름을 이해할수 있어 좋았습니다. 다만 마지막에는 하나의 간단한 시나리오를 넣어서 웹팩 세팅부터 최종 배포 그리고 디버깅까지 있는 세션이 있으면 더 좋을것 같습니다. 팁들로 마무리를 지어주셨지만 팁의 나열이 아닌 시나리오 안의 팁으로 내포되어있었다면 왜 그 팁이 유용한지 배우는 입장에서 더 와닿았을것 같아요. 강의 진행하시느라 고생하셨습니다.
최재현 2017.10.12
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.