Master the Core of Web Development, HTTP Perfectly!
jeonghwan
From HTTP basics to data requests, real-time communication, security, and performance optimization, learn the network knowledge web developers must know.
초급
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
講座掲載日:
最終更新日:
受講レビュー
全体
212件
4.9
212件の受講レビュー
- gbobey
受講レビュー 24
∙
平均評価 5.0
5
100% 受講後に作成If you take the Life Coding webpack lecture as a prerequisite, it will be very helpful. Basically, if you know what JavaScript, npm, and package.json are, you will be able to proceed smoothly in the lecture. It will not be difficult to just follow along at first, but it may get more difficult as you go on. There were many lectures that showed a few examples of what configuration files, loaders, and plugins are, but I don't think there was a lecture that showed webpack from 1 to 10 like this. These days, they say module modules, but it was a time when I learned a lot because I was able to understand the exact concept of a module. Thank you for the great lecture.
youmeeeee1159受講レビュー 8
∙
平均評価 4.9
5
100% 受講後に作成I was using webpack vaguely, but this was a huge help in understanding webpack. I'm using webpack, but I still don't know what's going on... I really want to recommend this 100 times to people like me who say that. It was so interesting that I stayed up late at night watching it. I watched the advanced webpack first, and I haven't seen Babel or Lint yet, but I'll watch the rest of the lectures! Thank you so much for making such a great lecture. :D I trust and watch Kim Jeong-hwan's lectures...
- jeonghwan知識共有者
As I work, I use webpack little by little, but I don't really get the feel for it. I'm organizing it by going through the documentation one by one, and I think I'm starting to feel more confident now. I'm so glad that it was helpful to someone in a similar situation.
- chataehyeon3874
受講レビュー 1
∙
平均評価 5.0
5
18% 受講後に作成Things I vaguely knew are being organized little by little ㅠㅠ I'm so happy!
- jeonghwan知識共有者
Thank you for telling me so. I hope you will continue to figure out what you need to do on your own.
- gidgns19951552
受講レビュー 6
∙
平均評価 5.0
5
31% 受講後に作成I am a front-end developer. I just wanted to learn how bundlers and transpilers work, so I took the course. I was amazed when Babel explained the plugins... I had never looked at plugins before and just used presets without thinking, so I was watching the lecture and thought, "Why do you add everything like that?" But I was just amazed... Before explaining how presets work, you explained them one by one, so it was really helpful for me to understand why presets are needed and how Babel works~!! Those who dream of developing front-ends actually go to work, and since each company has its own guides or frequently used code collections, there are almost no cases of developing as a starter... So please definitely take the lecture~!! I highly recommend it. There are so many bundling tools like webpack, vite, gulp, etc., but I think you explain very well why those things are needed. ㅠㅠ Bundling was really scary, and setting up development was the hardest and scary, so I just wanted to do functional development, but now I'm not so scared~!! Please give us many other lectures and let us know things that will be helpful in our work. Thank you~!! Oh, and if you could add a lecture on setting things up like a basic starter, it would be really fun~!!
- jeonghwan知識共有者
I'm glad you found this lesson helpful in understanding the development environment. Thanks for the great feedback.
￥8,637
jeonghwanの他の講座
知識共有者の他の講座を見てみましょう！
![[React Part 2] Advanced Topics and Hooks강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![[React Part 1] Learning React by Building and Comparing강의 썸네일](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![[Renewal] Creating NodeBird SNS with React강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
