프론트엔드 개발자를 위한 웹팩

프론트엔드 개발자를 위한 웹팩

(37개의 수강평)

547명의 수강생
Front-EndWebpack
26,400원 33,000원
(20% 할인, 12일 남음)
지식공유자 · 장기효(캡틴판교)
64회 수업· 총 3시간 27분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급

이 강의는

1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :)

이런 걸 배울 수 있어요

  • Front-End
  • Webpack
  • NPM
  • 프런트엔드 빌드 시스템
  • ES6 Import와 Export 문법

약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽고 빠르게 배우실 수 있도록 알차게 구성했습니다 😄

📔 주제 소개

날로 복잡해지는 프런트엔드 개발 생태계. 실무자와 입문자에겐 과연 어떤 게 가장 어려울까요? 바로 NPM과 Webpack입니다. 프런트엔드 빌드 시스템의 핵심이 되는 NPM과 Webpack을 알아야만 프로젝트를 혼자서 구성할 수 있습니다. 모던 프런트엔드 개발 프로젝트를 구성할 때 꼭 알아야 하는 NPM과 Webpack을 가장 쉽고 빠르게 배워볼게요 😄

🗒 왜 배워야 하는지

점점 많은 기업에서 최신 프런트엔드 프레임워크를 사용합니다. 그 중심에는 NPM과 Webpack을 이용한 프런트엔드 빌드 시스템이 있구요. 많은 기업들이 이 빌드 시스템을 정확하게 이해하고 스스로 구축할 수 있는 개발자를 애타게 찾고 있습니다. 이 강의로 차별화된 프런트엔드 개발자가 되실 수 있다고 자부합니다 😄

✏️ 이 강의에서 배우는 것들

이 강의는 NPM과 웹팩을 어디서나 학습하고 배울 수 있게 웹 사이트로 제작된 교안을 제공합니다.

※ 강의 교안은 프로그레시브 웹 앱(PWA)으로 제작되어 있어 모바일에서도 설치 후 편하게 보실 수 있습니다 😄

💡 강의 특징

처음엔 누구나 다 어렵게 느낄 수 있는 웹팩 설정. 입문자 관점에서 보다 더 쉽고 자세하게 설명해드립니다. 회사에서 시간에 쫓겨 빠르게 학습하셔야 하는 실무자 분들 그리고 웹팩을 처음 접하는 누구나 다 만족할 수 있게 강의 컨텐츠를 준비했습니다. 이론 설명은 짧게. 실습은 간단하면서도 자세하게. 튜토리얼을 따라 하시다 보면 어느새 웹팩에 대해서 이해하고 있는 내 자신을 발견할 수 있으실거에요 😄

🛠 여기서 다루는 툴

  1. VSCode
  2. Node.js LTS 버전 (v10 이상)
  3. NPM
  4. Git

※ 수업에서는 VSCode로 진행하지만 선호하시는 개발 툴이 있다면 그걸 쓰셔도 무방합니다 😄

🙋🏻‍♂️ 예상되는 질문 QnA

Q) 빌드 시스템, 모듈, 번들링 등 이런 용어 하나도 모른는데 제가 들을 수 있을까요?

번들링은 여러 개의 파일을 하나로 합치는 것이고, 빌드 시스템은 내가 만든 애플리케이션을 사용자에게 배포할 수 있는 형태로 변환하는 체계를 의미합니다. 어려울 수 있는 용어들을 비전공자, 입문자 관점에서 친절하게 풀어서 설명을 드리고 있으니 걱정하지 마시고 편하게 들어주세요 😄

진행하시다가 막히는 부분과 이해가 안되는 부분은 질의 게시판에 남겨주시면 자세하고 친절하게 답변 해드립니다 😄

Q) 이 강의만의 특별한 장점이 있을까요?

이 강의는 최대한 간단하게 이론을 설명하고 바로 실습을 같이 해가면서 배웠던 이론을 스스로 이해하는 강좌입니다. 장황한 설명보다는 짧고 간결한 설명으로 빠르게 지식을 전달한 후에 실습 중심으로 개념을 정확히 배워보도록 할게요. 지금 바로 시작해볼까요? 😄

Q) 이 강의를 시작하게 된 계기를 소개해 주세요. 

3년 전부터 웹팩 오프라인 강좌를 진행해왔습니다. 이 강좌는 500명이 넘는 오프라인 수강생들의 피드백과 그분들(입문자)의 관점에서 새롭게 구성한 강좌입니다. 웹팩 설정과 프런트엔드 빌드 시스템이 더 이상 어렵게 느껴지지 않게 도와드리겠습니다 😄

👨🏼‍🏫 강사 소개

장기효 (캡틴판교)

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

"강의 수익금으로 자바스크립트 오픈소스와 생활 코딩을 후원합니다 😁"

도움 되는 분들

  • NPM이 무엇인지 모르지만 프런트엔드 프레임워크를 써야 하는 개발자
  • 프런트엔드 개발 입문자
  • 퍼블리셔
  • 주니어 프런트엔드 개발자
  • 웹팩을 해보지 않은 프런트엔드 개발자
  • 프런트엔드 빌드 시스템이 궁금한 사람

선수 지식

  • HTML
  • CSS
  • Javascript

교육과정

모두 펼치기 64 강의 3시간 27분
섹션 2. NPM(Node Package Manager)
7 강의 17 : 22
NPM 지역 설치 명령어와 제거 명령어 - uninstall
02 : 52
NPM 전역 설치 명령어 - install --global
02 : 20
전역으로 설치된 라이브러리 경로 확인
02 : 31
지역 설치와 전역(--global) 설치 비교 정리
02 : 37
지역 설치 명령어 옵션 - --save-dev(-D)
02 : 29
dependencies와 devDependencies의 차이점
02 : 15
개발용 라이브러리와 배포용 라이브러리 구분하기
02 : 18
섹션 3. 웹팩 시작하기
9 강의 42 : 42
웹팩 소개
03 : 08
웹팩 시작하기 튜토리얼 파트 1 - 웹팩 적용 전
07 : 36
웹팩 시작하기 튜토리얼 파트 2 - 웹팩 적용 후
04 : 47
웹팩 시작하기 튜토리얼 파트 3 - mode 적용
04 : 01
웹팩 시작하기 튜토리얼 파트 4 - 웹팩 설정 파일 적용
05 : 14
웹팩 시작하기 튜토리얼 파트 5 - 웹팩 설정 파일 설명
03 : 13
웹팩 시작하기 튜토리얼 파트 6 - 튜토리얼 소스 분석
05 : 15
웹팩 시작하기 튜토리얼 파트 7 - 웹팩 변환 전후 결과 비교
04 : 25
웹팩 시작하기 튜토리얼 파트 8 - 웹팩 빌드 결과 파일 분석
05 : 03
섹션 4. 웹팩 소개
6 강의 26 : 34
웹팩 소개 영상 1
08 : 50
웹팩 소개 영상 2
05 : 14
웹팩과 모듈 소개
02 : 43
웹팩 등장 배경 - 1
04 : 35
웹팩 등장 배경 - 2
02 : 42
웹팩으로 해결하려는 문제 4가지
02 : 30
섹션 5. 바벨과 ES6 모듈 문법
5 강의 15 : 48
바벨 소개
02 : 28
ES6 Modules 문법
02 : 00
ES6 Modules 실습
04 : 37
ES6 Modules 실습 결과 확인
02 : 54
ES6 Modules 빌드 결과물 분석 - sourcemap
03 : 49
섹션 6. 웹팩의 주요 속성 4가지
16 강의 41 : 29
웹팩 주요 속성 소개
01 : 26
entry
01 : 30
output
02 : 09
loader
01 : 53
주요 속성을 이해하기 위한 두 번째 튜토리얼 실습
05 : 07
두 번째 튜토리얼 - 웹팩 결과 로그 분석
02 : 10
두 번째 튜토리얼 - 브라우저에서 빌드 결과물 확인
02 : 29
두 번째 튜토리얼 - 웹팩 빌드 결과 파일 분석
02 : 45
두 번째 튜토리얼 - 웹팩 설정 파일 분석
03 : 00
두 번째 튜토리얼 - 로더가 없는 경우의 에러 확인과 css 로더 적용
03 : 14
두 번째 튜토리얼 - 웹팩 로더 적용 순서와 style-loader
03 : 21
두 번째 튜토리얼 - 플러그인 적용 및 분석
02 : 55
두 번째 튜토리얼 - 플러그인 적용 결과 확인
02 : 07
plugin
01 : 53
주요 속성 4가지 리뷰 및 정리
03 : 05
강좌 이후에 웹팩 설정 파일 설정 및 변경할 때 참고할 자료
02 : 25
섹션 7. 웹팩 데브 서버(Webpack Dev Server)
6 강의 19 : 19
웹팩 데브 서버가 필요한 이유
02 : 24
웹팩 데브 서버 소개
01 : 34
웹팩 데브 서버 튜토리얼 실습
05 : 44
웹팩 데브 서버 2가지 특징
03 : 42
웹팩 설정 파일 분석
02 : 19
HTMLWebpackPlugin 설명
03 : 36
섹션 8. 실전 퀴즈
2 강의 10 : 15
실전 퀴즈 안내
01 : 26
실전 퀴즈 풀이
08 : 49

공개 일자

2020년 3월 18일 (마지막 업데이트 일자 : 2020년 3월 18일)

수강 후기

4.7
37개의 수강평
default_profile.png
Hiho Ha 3달 전
웹팩에 대해 대략적으로 알고싶어 수강한 강의였는데, 엄청난 퀄리티의 강의를 듣고 생각했던 것보다 훨씬 많은 지식을 얻을 수 있게 되었습니다. 제공해주신 핸드북의 퀄리티도 상당해서 핸드북으로 대략적인 흐름을 읽고 본격적인 강의를 통해 캡틴판교님의 상세한 설명을 들으며 코드를 작성하며 그 결과를 눈으로 확인할 수 있어 정말 큰 도움이 되었습니다. '이렇게 설정하고 이렇게 코드를 작성하면 이렇게 된다~ ' 라고만 하고 끝나는 강의가 많은데 판교님의 강의는 거기에 그치지 않고 왜 이런 결과가 나오게 되었는지, 어떠한 속성을 통해 어떠한 결과값을 기대할 수 있는지 등등 상세하게 설명해주셔서 단순 암기나 눈에 익히는게 아닌, 이해를 통한 학습을 할 수 있었습니다. 덕분에 웹팩에 대한 개념을 확실히 다잡았고, 앞으로 어떤식으로 더 공부해서 활용할 지도 알 수 있게 되었네요! 좋은 강의 제공해주셔서 정말 감사합니다.
장기효(캡틴판교)

장기효(캡틴판교) 3달 전
안녕하세요 Hiho님, 제 강의를 엄청난 퀄리티의 강의라고 말씀해 주셔서 넘 감사드립니다.. :) 말씀해 주신 동작 흐름과 원리에 대해서 전달하는 게 제 강의의 기조인데 정확하게 잘 짚어주시고 또 이렇게 칭찬해 주셔서 정말 감사드립니다 :) 앞으로도 강의 컨텐츠와 웹팩 핸드북 모두 꾸준히 업데이트 할 예정이니 많은 관심 부탁드려요. 감사합니다 :)

default_profile.png
SUHYEON LEE 3달 전
웹팩에 대해 잘 정리된 책이나 강의를 못찾아서 답답하던차에 캡틴판교님 강의 알람메일받고 바로 결제했습니다. (뷰 끝장내기는 세일할때 결제만하고 아직 시간이 없어서 못보고있지만) 다른 vue.js 강의와 마찬가지로 쉽게 개념을 잡아주시고 제공되는 웹팩 핸드북도 깔끔하게 정리되어있어 좋았습니다. 실습도 따라가기 쉽게 구성되어 웹팩 초보자인 저에게 많은 도움이 되었습니다.
장기효(캡틴판교)

장기효(캡틴판교) 3달 전
안녕하세요 수현님, 제 강의 알림 메일만 받고도 바로 수강을 결심해주시다니 넘 감동입니다.. 넘 감사드려요. 웹팩 강의와 핸드북은 앞으로도 계속 업데이트 꾸준히 할 예정이니 참고해주시고 많은 애용 부탁드립니다. 좋은 수강평 감사드려요 :)

default_profile.png
halphas 3달 전
이 강의 찐입니다. 보통 프론트엔드 초보(초년)개발자들은 개발환경 자체에대한 이해가 많이 없는데(저포함) 이 강의보고 아 이게 이거였구나, 이게 이래서 일케됐고 그럼 다음부턴 여기를 봐야되겠구나, 일케할려면 여기를 수정하면 되겠구나 등등 프론트엔드 개발환경에 대한 기초적이고 전반적인 흐름과 지식을 쌓는데 굉장히 도움 됩니다. 이미 블로그에서 무료로 정보를 공유해주시지만, 이 강의를 통해 지식을 함께 습득하시는게 훨씬 낫습니다 (참고로 저는 이 강의까지 캡틴판교님 강의 4번째 수강 중입니다 ==> 진짜 찐 수강생의 의견이라는 의미로 강조하고가용)
장기효(캡틴판교)

장기효(캡틴판교) 3달 전
찐 강의라고 해주시니까 찐하게 감동이 오네요.. 찐한 수강평 넘 감사드립니다 halphas님 :) 웹팩 문서는 이후에도 꾸준히 업데이트 할 예정이니까 자주 놀러오세요~! :)

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스