33,000원
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
[웹 개발, 프론트엔드] 강의입니다.
1000명이 선택한 웹팩 강의! 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :)
✍️
이런 걸
배워요!
이런 걸
배워요!
Front-End
Webpack
NPM
프런트엔드 빌드 시스템
ES6 Import와 Export 문법
날로 복잡해지는 프론트엔드 개발 생태계에서
NPM과 Webpack을 빠르게 배워요 ✨
프론트엔드 빌드 시스템의 핵심,
NPM과 Webpack ✌
실무자와 입문자에게 가장 어렵다고들 하는 NPM과 Webpack을 알아야 혼자서 프로젝트를 구성할 수 있어요. 모던 프론트엔드 개발 프로젝트를 구성할 때 꼭 필요한 두 개념을 쉽고 빠르게 배워봐요.
점점 많은 기업에서 최신 프론트엔드 프레임워크를 사용하고 있고, 이 중심에는 NPM과 Webpack을 이용한 프론트엔드 빌드 시스템이 있는 것이죠. 많은 기업들이 이 빌드 시스템을 정확하게 이해하고 스스로 구축할 수 있는 개발자를 찾고 있기에, 이 강의를 통해 차별화된 프론트엔드 개발자가 될 수 있을 거예요.
이 강의만의 특징 ✏️
- NPM과 웹팩을 어디서나 학습하고 배울 수 있게 웹 사이트로 제작된 교안을 제공합니다.
(강의 교안은 PWA로 제작되어 있어, 모바일에서도 설치 후 편하게 보실 수 있습니다.)
- 회사에서 시간에 쫓겨 빠르게 학습하셔야 하는 실무자 분들, 웹팩을 처음 접하는 분들 모두가 만족할 수 있도록 이론 설명은 짧게, 실습은 간단하면서도 자세하게 제작했습니다.
강의에서 다루는 툴 🔨
- VSCode
- Node.js LTS 버전 (v10 이상)
- NPM
- Git
수업에서는 VSCode로 진행하지만, 선호하시는 개발 툴이 있다면 그걸 쓰셔도 무방합니다.
예상되는 QnA 🙋🏻♂️
Q. 빌드 시스템, 모듈, 번들링 등의 용어 하나도 모른는데 제가 들을 수 있을까요?
번들링은 여러 개의 파일을 하나로 합치는 것이고, 빌드 시스템은 내가 만든 애플리케이션을 사용자에게 배포할 수 있는 형태로 변환하는 체계를 의미합니다. 어려울 수 있는 용어들을 비전공자, 입문자 관점에서 친절하게 풀어서 설명을 드리고 있으니 걱정하지 마시고 편하게 들어주세요.
진행하시다가 막히는 부분과 이해가 안되는 부분은 질의 게시판에 남겨주시면 자세하고 친절하게 답변 해드립니다 :)
Q. 이 강의만의 특별한 장점이 있을까요?
이 강의는 최대한 간단하게 이론을 설명하고 바로 실습을 같이 해가면서 배웠던 이론을 스스로 이해하는 강좌입니다. 장황한 설명보다는 짧고 간결한 설명으로 빠르게 지식을 전달한 후에 실습 중심으로 개념을 정확히 배워보도록 할게요. 지금 바로 시작해볼까요?
Q. 이 강의를 시작하게 된 계기가 있나요?
3년 전부터 웹팩 오프라인 강좌를 진행해왔습니다. 이 강좌는 500명이 넘는 오프라인 수강생들의 피드백과 입문자의 관점에서 새롭게 구성한 강좌입니다. 웹팩 설정과 프런트엔드 빌드 시스템이 더 이상 어렵게 느껴지지 않게 도와드리겠습니다!
연관 로드맵 🚎
Vue.js로 완성하는 프론트엔드 개발자 로드맵
캡틴판교님의 쉽게 다룰 수 있고, 생산적인 Vue.js를 통해
실무 웹 개발에 도전해볼 수 있도록 구성된 로드맵입니다.이 강의 포함
지식공유자 소개 👨🏫
장기효 (캡틴판교)
- 현 프론트엔드 개발자
- "Do it! Vue.js 입문" 저자
- 네이버, 이베이코리아, 삼성, LG, SK그룹 등 Vue.js 강의
- 패스트캠퍼스 Vue.js 정복캠프 강의
- Google 웹 기술 공식 사이트 번역자
- 기술 블로그, Github
"인프런이 만난 사람" 인터뷰
“강의 수익으로 Vue.js 오픈소스 +
생활코딩을 후원합니다 😁”
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
NPM이 무엇인지 모르지만 프런트엔드 프레임워크를 써야 하는 개발자
프런트엔드 개발 입문자
퍼블리셔
주니어 프런트엔드 개발자
웹팩을 해보지 않은 프런트엔드 개발자
프런트엔드 빌드 시스템이 궁금한 사람
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
HTML
CSS
Javascript
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 7년째 지식을 공유하고 있습니다. 지금까지 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프런트엔드 개발 상담소 바로가기(매주 토요일 오후 9시 30분 유튜브 생방송 진행)
커리큘럼
총 64
개 ˙ 3시간 27분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 오리엔테이션
5
강 ∙ 9분
섹션 1. Node.js와 NPM
8
강 ∙ 24분
섹션 2. NPM(Node Package Manager)
7
강 ∙ 17분
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분
웹팩 소개
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분
웹팩 소개 영상 1
08:50
웹팩 소개 영상 2
05:14
웹팩과 모듈 소개
02:43
웹팩 등장 배경 - 1
04:35
웹팩 등장 배경 - 2
02:42
웹팩으로 해결하려는 문제 4가지
02:30
섹션 5. 바벨과 ES6 모듈 문법
5
강 ∙ 15분
바벨 소개
02:28
ES6 Modules 문법
02:00
ES6 Modules 실습
04:37
ES6 Modules 실습 결과 확인
02:54
ES6 Modules 빌드 결과물 분석 - sourcemap
03:49
섹션 6. 웹팩의 주요 속성 4가지
16
강 ∙ 41분
웹팩 주요 속성 소개
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분
웹팩 데브 서버가 필요한 이유
02:24
웹팩 데브 서버 소개
01:34
웹팩 데브 서버 튜토리얼 실습
05:44
웹팩 데브 서버 2가지 특징
03:42
웹팩 설정 파일 분석
02:19
HTMLWebpackPlugin 설명
03:36
섹션 8. 실전 퀴즈
2
강 ∙ 10분
실전 퀴즈 안내
01:26
실전 퀴즈 풀이
08:49
강의 게시일 : 2020년 03월 18일
(마지막 업데이트일 : 2020년 03월 18일)
수강평
총 291개
수강생분들이 직접 작성하신 수강평입니다.
4.8
291개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
평생 남이 해줘서 먹던 김치인데,
이제는 김치 담그는 방법을 배웠습니다.
감사합니다.
2021-01-17
이 강의 찐입니다.
보통 프론트엔드 초보(초년)개발자들은 개발환경 자체에대한 이해가 많이 없는데(저포함)
이 강의보고 아 이게 이거였구나, 이게 이래서 일케됐고 그럼 다음부턴 여기를 봐야되겠구나, 일케할려면 여기를 수정하면 되겠구나
등등
프론트엔드 개발환경에 대한 기초적이고 전반적인 흐름과 지식을 쌓는데 굉장히 도움 됩니다.
이미 블로그에서 무료로 정보를 공유해주시지만, 이 강의를 통해 지식을 함께 습득하시는게
훨씬 낫습니다
(참고로 저는 이 강의까지 캡틴판교님 강의 4번째 수강 중입니다 ==> 진짜 찐 수강생의 의견이라는 의미로 강조하고가용)
2020-03-28
너무 강의가 2분짜리가 많아서 처음에 강좌 설명하고 조금 본론들어가고 마지막에 다시 그 내용 정리하는거 같아서 시간이 아까워요 강의가 5-7분은 되야 좋을거같아요
2020-08-16
다른 강의들보다 말씀하시는 속도가 빨라서 뒤로 돌려보고 돌려보고 반복했던거같아요 ㅠ.ㅠ 다른 Vue 강의들보다 정신없는 느낌이 강했어요 ㅠㅠ 그치만 강의 내용은 빠르게 웹팩 개념 잡기에 좋았습니다!
2020-04-05
바벨에 관한 설명이 너무 짧아 아쉽지만 좋은 강의였던 것 같습니다.
2021-09-05
