인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

/

쉽게 배우는 Webpack

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

(4.2) 수강평 41개

수강생 987명

WebpackBundling
Thumbnail

 

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 | 장기효님 인터뷰 보러가기

안녕하세요
장기효(캡틴판교)입니다.

47,458

명

수강생

4,557

개

수강평

3,812

개

답변

4.9

점

강의 평점

17

개

강의

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

더보기

커리큘럼

전체

51개 ∙ (3시간 26분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

41개

4.2

41개의 수강평

  • OCK Sam님의 프로필 이미지
    OCK Sam

    수강평 2

    ∙

    평균 평점 4.5

    4

    100% 수강 후 작성

    버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당

    • newcat님의 프로필 이미지
      newcat

      수강평 2

      ∙

      평균 평점 5.0

      5

      98% 수강 후 작성

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

      • Leo님의 프로필 이미지
        Leo

        수강평 22

        ∙

        평균 평점 4.5

        5

        100% 수강 후 작성

        Webpack을 이해하는데 많은 도움이 되었습니다.

        • jude님의 프로필 이미지
          jude

          수강평 7

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          웹팩에 대해 기본적인 지식을 알 수 있었던 강의였던거 같아요, 알아두면 좋은 문서들 추천이 많아서 좋았습니다.

          • meon take님의 프로필 이미지
            meon take

            수강평 21

            ∙

            평균 평점 4.6

            4

            100% 수강 후 작성

            감사합니다. 수고하세요

            장기효(캡틴판교)님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            Vue 3 시작하기강의 썸네일

            Vue 3 시작하기

            장기효(캡틴판교)

            Vue.js 최신 버전 Vue 3를 시작하는 분들을 위한 강좌입니다. Vue.js의 동작원리부터 실무 개발을 할 때 알아둬야 하는 기본 개념들을 배워보세요.

            초급

            초급

            Vue.js, Vue 3, JavaScript

            프론트엔드 개발자를 위한 웹팩강의 썸네일

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

            장기효(캡틴판교)

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

            초급

            초급

            Webpack

            Vue 3 중급 - Composition API강의 썸네일

            Vue 3 중급 - Composition API

            장기효(캡틴판교)

            Vue 2와 최신 Vue 3에서 모두 사용할 수 있는 Vue Composition API를 가장 쉽고 정확하게 배울 수 있는 강의!

            중급이상

            중급이상

            Vue 3, Vue.js

            Next.js 시작하기강의 썸네일

            Next.js 시작하기

            장기효(캡틴판교)

            React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

            초급

            초급

            Next.js, React, JavaScript

            Vue.js 끝장내기 - 실무에 필요한 모든 것강의 썸네일

            Vue.js 끝장내기 - 실무에 필요한 모든 것

            장기효(캡틴판교)

            Vue.js로 실무 하시는 분들께 필요한 모든 것을 담았습니다. 실제 백엔드 API로 구현하는 학습 노트 CRUD 애플리케이션. 생산성 높은 프로젝트 환경 구축과 백엔드 개발자와 협업하는 방법에 대한 메시지를 꼭 확인해보세요 :)

            중급이상

            중급이상

            JavaScript, Vue.js, Vuex

            Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념강의 썸네일

            Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

            장기효(캡틴판교)

            Do it! Vue.js 입문 -> Vue.js 초급 강좌 -> Vue.js 중급 강좌의 계보를 잇는 Vue.js 실전 강좌입니다. Vue.js 를 실무에서 완벽히 활용 가능하도록 도와줄것 입니다.

            중급이상

            중급이상

            JavaScript, Vue.js

            타입스크립트 입문 - 기초부터 실전까지강의 썸네일

            타입스크립트 입문 - 기초부터 실전까지

            장기효(캡틴판교)

            타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

            초급

            초급

            TypeScript, ES6, JavaScript

            Nuxt.js 시작하기강의 썸네일

            Nuxt.js 시작하기

            장기효(캡틴판교)

            내가 만든 Vue.js 사이트가 더 많은 사람들에게 노출 되기를 원한다면? 캡틴판교의 Vue.js 시리즈를 다 듣고 이제는 서버 사이드 렌더링도 해보고 싶은 분들이 듣기 좋은 강좌입니다. Nuxt.js 시작하기 강의!

            중급이상

            중급이상

            Nuxt.js, Vue.js, ssr

            만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링강의 썸네일

            만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

            장기효(캡틴판교)

            실무에서 가장 많이 사용되고 있는 리액트 프레임워크, 쉽고 빠르고 재밌게 배워보세요! 할 일 관리 앱을 만들면서 리액트의 동작 원리, 컴포넌트 설계, 리팩토링 방법을 배워봅니다.

            초급

            초급

            React, JavaScript, 리팩토링

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)강의 썸네일

            React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

            장기효(캡틴판교)

            실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

            초급

            초급

            React, TypeScript, Vue.js

            Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의 썸네일

            Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

            장기효(캡틴판교)

            Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.

            중급이상

            중급이상

            JavaScript, Vue.js, ES6

            Amazing JavaScript - 입문강의 썸네일

            Amazing JavaScript - 입문

            장기효(캡틴판교)

            프런트엔드 개발을 위해 필요한 자바스크립트 기초 지식. 실무자로서 꼭 알아야 하는 필수 지식들을 쉽고 빠르게 설명해 줍니다. 2024년 현대 프런트엔드 개발 트렌드를 반영한 기본 강의.

            입문

            입문

            JavaScript, ES6

            실전 프론트엔드 테스트 시작하기강의 썸네일

            실전 프론트엔드 테스트 시작하기

            장기효(캡틴판교)

            능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝낸다 👊

            초급

            초급

            소프트웨어 테스트, Cypress, e2e

            Vue.js 시작하기 - Age of Vue.js강의 썸네일

            Vue.js 시작하기 - Age of Vue.js

            장기효(캡틴판교)

            Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요.

            초급

            초급

            JavaScript, Vue.js

            Vue.js + TypeScript 완벽 가이드강의 썸네일

            Vue.js + TypeScript 완벽 가이드

            장기효(캡틴판교)

            Vue.js에서 타입스크립트를 시작하는 분들을 위한 최고의 강의. 2개의 실습 프로젝트로 재밌게 배워보는 Vue.js + 타입스크립트 완전 정복. 배우면서 바로 실무에 적용해 보세요! 😄

            중급이상

            중급이상

            Vue.js, TypeScript

            실전 프로젝트로 배우는 타입스크립트강의 썸네일

            실전 프로젝트로 배우는 타입스크립트

            장기효(캡틴판교)

            "타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄

            중급이상

            중급이상

            TypeScript, ES6

            PWA 시작하기 - 웹 기술로 앱을 만들자강의 썸네일

            PWA 시작하기 - 웹 기술로 앱을 만들자

            장기효(캡틴판교)

            Web 기술로 오프라인 환경에서 작동하는 App 을 만들 수 있습니다. 프로그레시브 웹 앱이 발전해온 시대적 배경과 주요 특징을 배우고, 주요 기술들로 실제 프로그레시브 웹 앱을 만들어보세요.

            초급

            초급

            Vue.js, 웹앱, PWA

            공개하지 않는 강의로 수강이 제한됩니다.