강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

フロントエンド開発者のためのWebpack

1000人が選んだWebpack講座！新しく出たWebpackバージョンに合わせてリニューアルされた講座です。実習中心でより簡単にWebpackを学んでください :)

（4.9）受講レビュー 345件

受講生 3,831名

  • captain
3시간 만에 완강할 수 있는 강의 ⏰
Webpack

学習した受講者のレビュー

受講後に得られること

  • フロントエンド

  • Webpack

  • NPM

  • フロントエンド構築システム

  • ES6 Import と Export 文法

日々複雑になるフロントエンド開発エコシステムで
NPMとWebpackをすばやく学びます✨

フロントエンドビルドシステムの中核、
NPMとWebpack ✌

実務者や入門者にとって最も難しいと言われるNPMとWebpackを知ってこそ、自分でプロジェクトを整理できます。モダンなフロントエンド開発プロジェクトを構成する際に、必要な2つの概念をすばやく簡単に学びましょう。

ますます多くの企業が最新のフロントエンドフレームワークを使用しており、この中心にはNPMとWebpackを利用したフロントエンドビルドシステムがあるのです。多くの企業がこのビルドシステムを正確に理解し、自分で構築できる開発者を探しているので、この講義を通じて差別化されたフロントエンド開発者になることができるでしょう。

この講義だけの特徴✏️

  • NPMとWebパックをどこでも学び、学ぶことができるように、 Webサイトで制作された教案を提供します。
     （講義教案はPWAで製作されており、モバイルでも設置後楽にご覧いただけます。）

  • 会社で時間を追って早く学習しなければならない実務者の方、ウェブパックに初めて接する方の皆が満足できるように理論​​の説明は短く、実習は簡単ながらも細かく製作しました。


講義で扱うツール🔨

  1. VSCode
  2. Node.js LTSバージョン(v10以降)
  3. NPM
  4. Git

授業ではVSCodeに進みますが、好みの開発ツールがあればそれを使っても構いません。


予想されるQnA 🙋🏻‍♂️

Q.ビルドシステム、モジュール、バンドルなどの用語を知らないのですが、私は聞くことができますか？

バンドルとは、複数のファイルを1つにまとめるもので、ビルドシステムとは、自分が作成したアプリケーションをユーザーに配布できる形式に変換する方式を意味します。難しいかもしれない用語を非専攻者、入門者の観点から親切に解いて説明をしていますので心配しないで楽に聞いてください。
進行中に詰まっている部分と理解できない部分は、質問掲示板に残していただければ詳しく、親切にお答えします:)

Q.この講義だけの特別な利点がありますか？

この講義は、できるだけ簡単に理論を説明し、まさに実習を共にして学んだ理論を自ら理解する講座です。冗長な説明ではなく、短く簡潔な説明で素早く知識を伝えた後、実習中心に概念を正確に学ぶようにします。今すぐ始めましょうか？

Q. この講義を始めるきっかけがありますか？

3年前からウェブパックオフライン講座を行ってきました。この講座は、500人を超えるオフライン受講生のフィードバックと入門者の観点から新たに構成した講座です。 Webパックの設定とフロントエンドビルドシステムがこれ以上難しく感じられないようにお手伝いします！

関連ロードマップ🚎

Vue.jsで完成するフロントエンド開発者ロードマップ
キャプテン板橋様の簡単に取り扱え、生産的なVue.jsを通じて
実務ウェブ開発に挑戦できるように構成されたロードマップです。 この講義を含む


知識共有者の紹介👨‍🏫

チャン・ギヒョ（キャプテン板橋）

「Inflearnが出会った人」インタビュー

「講義収益でVue.jsオープンソース+
ライフコーディングを後援します😁」

講義割引を提供します！

シリーズ「Vue.jsで完成するフロントエンド
開発者ロードマップ" 25％ 割引（クリック）

収入のない中・高校生、
大学生のための学生の50％割引（クリック）

こんな方に
おすすめです

学習対象は
誰でしょう？

  • NPM が何なのかわからないが、フロントエンド フレームワークを使用する必要がある開発者

  • フロントエンド開発入門者

  • パブリッシャー

  • ジュニア フロントエンド開発者

  • WebPack を試したことがないフロントエンド開発者

  • フロントエンド ビルド システムに興味のある人

前提知識、
必要でしょうか？

  • HTML

  • CSS

  • Javascript

こんにちは
です。

48,959

受講生

4,795

受講レビュー

3,815

回答

4.9

講座評価

19

講座

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

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

カリキュラム

全体

64件 ∙ (3時間 27分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

345件

4.9

345件の受講レビュー

  • Sanghoon Bae님의 프로필 이미지
    Sanghoon Bae

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    평생 남이 해줘서 먹던 김치인데, 이제는 김치 담그는 방법을 배웠습니다. 감사합니다.

    • 임수진님의 프로필 이미지
      임수진

      受講レビュー 9

      ∙

      平均評価 4.8

      3

      63% 受講後に作成

      너무 강의가 2분짜리가 많아서 처음에 강좌 설명하고 조금 본론들어가고 마지막에 다시 그 내용 정리하는거 같아서 시간이 아까워요 강의가 5-7분은 되야 좋을거같아요

      • halphas님의 프로필 이미지
        halphas

        受講レビュー 2

        ∙

        平均評価 5.0

        5

        98% 受講後に作成

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

        • 장기효(캡틴판교)
          知識共有者

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

      • ybebee9님의 프로필 이미지
        ybebee9

        受講レビュー 3

        ∙

        平均評価 4.7

        4

        100% 受講後に作成

        다른 강의들보다 말씀하시는 속도가 빨라서 뒤로 돌려보고 돌려보고 반복했던거같아요 ㅠ.ㅠ 다른 Vue 강의들보다 정신없는 느낌이 강했어요 ㅠㅠ 그치만 강의 내용은 빠르게 웹팩 개념 잡기에 좋았습니다!

        • 하재근님의 프로필 이미지
          하재근

          受講レビュー 1

          ∙

          平均評価 4.0

          4

          100% 受講後に作成

          바벨에 관한 설명이 너무 짧아 아쉽지만 좋은 강의였던 것 같습니다.

          期間限定セール、あと3日日で終了

          ￥24,750

          25%

          ￥4,233

          captainの他の講座

          知識共有者の他の講座を見てみましょう！

          Next.js 시작하기Course Thumbnail

          Next.js 시작하기

          장기효(캡틴판교)

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

          Basic

          Basic

          Next.js, React, JavaScript

          Next.js 시작하기Course Thumbnail

          Next.js 시작하기

          장기효(캡틴판교)

          AI와 함께 배우는 Next.jsCourse Thumbnail

          AI와 함께 배우는 Next.js

          장기효(캡틴판교)

          복잡한 Next.js의 여러 개념들을 짧은 시간에 핵심만 배울 수 있어요. Next.js를 처음 배우는 분들을 위한 실무 필수 지식만 알려드립니다. 프레임워크 강의만 8년째 진행하는 캡틴판교의 Next.js 신규 강의. "AI 시대에 프런트엔드 개발자"의 코딩과 학습 방법을 배워볼 수 있어요! :)

          Beginner

          Beginner

          JavaScript, React, Next.js

          AI와 함께 배우는 Next.jsCourse Thumbnail

          AI와 함께 배우는 Next.js

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

          JavaScript, Vue.js

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

          TypeScript, ES6, JavaScript

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          JavaScript, Vue.js, Vuex

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

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

          장기효(캡틴판교)

          Vue 3 시작하기Course Thumbnail

          Vue 3 시작하기

          장기효(캡틴판교)

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

          Basic

          Basic

          Vue.js, Vue 3, JavaScript

          Vue 3 시작하기Course Thumbnail

          Vue 3 시작하기

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

          React, JavaScript, 리팩터링

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

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

          장기효(캡틴판교)

          Amazing JavaScript - 입문Course Thumbnail

          Amazing JavaScript - 입문

          장기효(캡틴판교)

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

          Beginner

          Beginner

          JavaScript, ES6

          Amazing JavaScript - 입문Course Thumbnail

          Amazing JavaScript - 입문

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

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

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

          React, TypeScript, Vue.js

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

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

          장기효(캡틴판교)

          Vue 3 중급 - Composition APICourse Thumbnail

          Vue 3 중급 - Composition API

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          Vue 3, Vue.js

          Vue 3 중급 - Composition APICourse Thumbnail

          Vue 3 중급 - Composition API

          장기효(캡틴판교)

          Nuxt.js 시작하기Course Thumbnail

          Nuxt.js 시작하기

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          Nuxt.js, Vue.js, ssr

          Nuxt.js 시작하기Course Thumbnail

          Nuxt.js 시작하기

          장기효(캡틴판교)

          Vue.js + TypeScript 완벽 가이드Course Thumbnail

          Vue.js + TypeScript 완벽 가이드

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          Vue.js, TypeScript

          Vue.js + TypeScript 완벽 가이드Course Thumbnail

          Vue.js + TypeScript 완벽 가이드

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          TypeScript, ES6

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          JavaScript, Vue.js

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Basic

          Basic

          Vue.js, 웹앱, PWA

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

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

          장기효(캡틴판교)

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

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

          장기효(캡틴판교)

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

          Intermediate

          Intermediate

          JavaScript, Vue.js, ES6

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

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

          장기효(캡틴판교)

          似ている講座

          同じ分野の他の講座を見てみましょう！

          웹 게임을 만들며 배우는 VueCourse Thumbnail

          웹 게임을 만들며 배우는 Vue

          제로초(조현영)

          간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다.

          Basic

          Basic

          Vue.js, Webpack, Vuex

          웹 게임을 만들며 배우는 VueCourse Thumbnail

          웹 게임을 만들며 배우는 Vue

          제로초(조현영)

          프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식Course Thumbnail

          프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

          짐코딩

          이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.

          Basic

          Basic

          Webpack

          프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식Course Thumbnail

          프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식

          짐코딩