웹 개발의 핵심, HTTP 완벽 마스터하기!
김정환
HTTP 기본부터 데이터 요청, 실시간 통신, 보안, 그리고 성능 최적화까지, 웹 개발자가 반드시 알아야 할 네트워크 지식을 배워보세요.
초급
Ajax, https, cors
BEST
フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)
すでに構築済みの開発環境を理解できます。 最初から自分で開発環境を構築できます。
学習した受講者のレビュー
こんなことが学べます
モジュールシステムを使って開発環境を自動化する方法（Webpack）
最新のJavaScript構文を使用する環境を作る（Babel）
同僚と協調する開発環境の構築 (ESLint, Prettier)
Webパック、バーベル、リントなどのフロントエンド技術を理解し、実務に適用してください。
「ウェブパックはチームで一人だけ扱うと分かればいい？」
もしその一人がチームを離れたらどうなるでしょうか？たぶんあなたはその一人になるべきかもしれません。
開発チームに皆さん一人であれば、Webパックの構成は避けられません。
開発環境の構成だけは私の手で直接扱ってくれる知っていたらどうでしょうか？
少なくとも他の人が作成した構成（例えば、create-react-appやvue-cliで作ったコード）を読んで理解できる程度になれば、はるかに自信を持って働くことができるでしょう。
Webパックを含むバーベル、リント、プレティアなどのフロントエンド開発環境を自動化し、生成性を高めるツールを習得できる講義を作成しました。
これにより、より生産的に働くことができることを期待します。
📝どんなことを学びますか？
#Node.js
Node.jsは、フロントエンド開発環境を構築するための基盤となる技術です。ほとんどのツールがNode.jsベースで動作するためです。さらに、一連の開発プロセスを自動化する上で大きな役割を果たしています。フロントエンド開発中のNode.jsの役割を理解することができます。
#Webpack
モジュールベースの開発を可能にするのがウェブパックです。同じ役割を果たす代替品が登場しましたが、まだ最も一般的なのはWebパックです。 Webパックの動作原理を覗き込んで理解した後、直接開発環境を構成し、ローダーを直接実装することもできます。
#Babel+SASS
ECMAScirpt+、Typescriptなどの高レベルのプログラミング言語や、React.js、Vue.jsなどのフレームワークを使用して開発するときに必要なのがバーベルです。もちろん、バーベルなしで開発できますが、誰がそのように開発しますか？開発生産性のためには、バーベルの助けを借りてください。バーベルの原理を理解し、自分で試して、プロジェクトに最適な環境を作成する方法を学びます。
# Prettier+ESLint
コーディングコンベンションによる議論はとても疲れていますか？ツールの助けを借りれば、もっと簡単にコーディングスタイルを合わせることができるでしょう。さらに、自動化ツールを開発手順に追加すると、一貫したコードを継続的に維持できます。
🧰あらかじめインストールしてください
VSCodeを使用していますが、通常使用するエディタやIDEがある場合は、それを使用してもかまいません。
練習進行のためにGitをインストールしてください。フェイクフックを使用するクラスもありますので、v2.3.0バージョン以上をお使いください。
🙋🏻♂️講義に関する予想される質問
Q. この講義を始めるきっかけを紹介してください。
A. フロントエンド技術がとても速いとはいえ、それでも一度はまとめてみたかったです。 Webパックから始めて働きながらよく使う開発ツールマニュアルを一つずつ読んでみて、ブログにまとめた内容が「フロントエンド開発環境の理解（全5編）」です。その後、昨年2019年のTアカデミーでこのテーマでセミナーを開いたが、意外と私のように必要な方が多かったです。反応が大丈夫で内容をさらに補強してInflearnにオンライン講義を開設しました。
Q.この講義だけの特別な利点がありますか？
A. 開発環境というテーマが実習しにくいかもしれません。マニュアルだけを読んで通り過ぎるにはよく分からないからです。そこで、各理論授業ごとに小さな実習を準備しました（実習リポジトリ： lecture-frontend-dev-env ）。以前の講義の「実習UI開発で学んでみる純粋なjavascriptとVueJS開発」で取り上げたコードに基づいて、ここに開発環境を構成するように段階別に実習課題を準備しました。一つ一つ解いてみると、いつの間にか開発環境を構成することが手につくことができるように。
Q. このレッスンでどんなことができますか？
A. 現在、皆さんが開発しているプロジェクトの開発環境を理解できるでしょう。必要に応じてカスタマイズして生産性を高めることもできます。今プロジェクトを開始する段階ですか？では、好みに合わせて直接開発環境を飾ることもできます。
他の講義を見る
堅牢なJSソフトウェアの作成
テスト主導開発、JavaScriptデザインパターンを学ぶ
テスト主導開発、JavaScriptデザインパターンを学ぶ
実習UI開発で学ぶ純粋なjavascriptとVueJS開発
Vue.JS基盤、MVC/MVVMアーキテクチャ、コンポーネント開発
Vue.JS基盤、MVC/MVVMアーキテクチャ、コンポーネント開発
テスト主導開発（TDD）で作るNodeJS APIサーバー
NodeJS基礎、ExpressJS基礎、Rest APIサーバーの開発
NodeJS基礎、ExpressJS基礎、Rest APIサーバーの開発
こんな方に
おすすめです
学習対象は
誰でしょう？
あらかじめ設定された環境でのみ開発していたため、webpackやBabelの設定は全く分かりません。
Webpackは使ったことはあるけど、どんな仕組みで動いているのか知りたいです。
一貫したコーディング規約を維持したいのですが、チームで作業しているとなかなかうまくいきません。
前提知識、
必要でしょうか？
基本的なフロントエンド開発経験が必要です。（JavaScript、HTML、CSS）
カリキュラム
全体
39件 ∙ (5時間 2分)
1. 講義紹介
04:41
2. プロジェクトの作成
10:05
3. 外部パッケージを管理する方法
10:13
5. エントリー/アウトプット実習
09:44
6. エントリとアウトプット（実習）
03:53
7. エントリとアウトプット（プール）
05:28
8. ローダー
05:55
9. よく使うローダー
18:56
10. ローダー（実習）
03:03
11. ローダー（プール）
06:13
12. プラグイン
08:34
13. よく使うプラグイン
22:20
14. プラグイン（実習）
03:28
15. プラグイン（プール）
11:17
講座掲載日:
最終更新日:
受講レビュー
全体
209件
4.9
209件の受講レビュー
- gbobey
受講レビュー 24
∙
平均評価 5.0
5
100% 受講後に作成선행으로 생활코딩 webpack 강의를 듣고 오시면 많은 도움이 될거 같습니다. 기본적으로 JavaScript, npm, package.json이 뭔지 알아야 강의 진행이 원활할거 같습니다. 처음엔 그저 따라해도 무리는 없겠지만 뒤로 갈수록 어려워질수 있습니다. 보통 설정파일, 로더, 플러그인이 뭔지 예시 몇개 보여주는 강의는 많았는데 이렇게 웹팩에 대해 1-10까지 보여주는 강의는 없었던거 같습니다. 요즘 모듈모듈 이러는데 정확히 모듈의 개념이 뭔지 알수 있어 많은걸 얻었던 시간이었습니다. 좋은 강의 감사드립니다.
Youme Choi受講レビュー 8
∙
平均評価 4.9
5
100% 受講後に作成웹팩을 참 막연하게 사용하고 있었는데 웹팩을 이해하는데 정말 큰 도움이 되었습니다. 웹팩을 쓰고는 있지만 뭐가 어떻게 돌아가는 건지 아직도 감이 안온다.. 하시는 저 같은 분들에게 정말 100번 추천하고 싶습니다. 보다가 재밌어서 새벽 늦게까지 볼 정도로 흥미롭게 봤습니다. 웹팩 심화까지 먼저 보고 아직 바벨, 린트는 못 봤는데 나머지 강의도 잘 보겠습니다! 좋은 강의 만들어 주셔서 정말 감사합니다. :D 김정환님 강의는 믿고 봅니다...
- 김정환知識共有者
일하다보면 웹팩 조금씩 건들면서 사용하는데 이게 잘 감이 안오더라구요. 문서 보면서 하나씩 짚어가면서 정리하니깐 이제 좀 자신감이 생기는 것 같습니다. 비슷한 상황으로 도움이 되셔서 무척 뿌듯합니다.
- uphoon
受講レビュー 6
∙
平均評価 5.0
5
31% 受講後に作成프론트엔드 개발자입니다. 그냥 번들러나 트랜스파일러 어떻게 돌아가는지 제대로 알고싶어 수강했는데 바벨에서 플러그인 설명하실때 감탄했습니다... 그동안 플러그인한번도 안보고 프리셋 사용만 그냥 생각없이 했어서 강의보다가 어 왜 저렇게 일일이 다 추가 하시지 뭐지? 했는데 그저 감탄... 프리셋 동작원리를 설명하시려고 그전에 일일이 그렇게 말씀해주시니 프리셋이 왜 필요한지 어떻게 바벨이 돌아가는지 이해하는데 아주 도움이 됬습니다~!! 프론트엔드 개발 꿈꾸시는분들 막상 회사 가시면 각자의 회사의 가이드나 자주사용하는 코드모음 같은것들이 있어서 사실상 스타터로 개발하는경우 거의 없습니다... 그러니 강의 꼭 들어보세요~!! 강추입니다. webpack, vite, gulp 등등 번들링도 너무많은데 그냥 그런것들이 왜 필요한지 정말 잘 알려주시는것 같아요 ㅠㅠ 번들링, 진짜 무서웠고 개발 셋팅하는게 제일 힘들고 무서워서 그냥 기능개발만 하고싶었는데 이제 별로 두렵지 않습니다~!! 다른강의도 많이 많이 내주시고 실무에서 많이 도움되는것들 알려주시면 감사하겠습니다~!! 아 그리고 선생님 혹시 기본 스타터 처럼 셋팅하는 그런것도 강의 추가해주시면 정말 재밌을거 같습니다~!!
- 김정환知識共有者
이 수업을 개발 환경을 이해하시는데 도움이 되셨다니 다행입니다. 좋은 피드백 고맙습니다.
期間限定セール
￥51,970
25%
￥8,171
jeonghwanの他の講座
知識共有者の他の講座を見てみましょう！
![[React 2부] 고급 주제와 훅강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![[React 1부] 만들고 비교하며 학습하는 React강의 썸네일](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
