타입스크립트 입문 - 기초부터 실전까지
장기효(캡틴판교)
타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄
초급
TypeScript, ES6, JavaScript
BEST
Nuxt.js の開始
私が作成したVue.jsサイトをより多くの人に公開したい場合は？キャプテン板橋のVue.jsシリーズを全部聴いて今はサーバーサイドレンダリングもやってみたい方が聴きやすい講座です。 Nuxt.jsはじめに講義！
学習した受講者のレビュー
受講後に得られること
サーバー側レンダリング
Vue.js 開発
フロントエンド開発
Nuxt.jsで出会うサーバーサイドレンダリング！
今Vue.jsをより強力に使用してみてください。
Vue.js、もっと使いたいなら？
ビュー開発者なら、ノプストを通して
サーバーサイドレンダリングを実装できます。
さて、
サーバーサイドレンダリングとは何ですか？ 🤔
サーバーサイドレンダリングとは、サーバーからページを描画してクライアント（ブラウザ）に送信して画面に表示する手法です。検索エンジンの最適化（SEO：Search Engine Optimization）とSNSから自分のサイト情報を正確に配信するために、サーバーサイドレンダリング技術を使用します。
このようなサーバーサイドレンダリングを実装するために、Vue.js開発者がよく書くフレームワークはNuxt.jsです。私が作ったサイトをより多くの人々に公開してくれる役割をします。
ただ、国内にはまだNuxt.js専門講義がなく、参考になる資料も多くないため、授業を開設してもらうよう要請を受けました。この講義がNuxt.jsでサービスを開発しなければならない方に役立つ資料になれば幸いです。
Nuxt.jsを起動している方へ
役に立つように。
プロジェクト作成からサービス展開まで、
ノックストで開発するときは必ず知っておくべきこと
すべての内容を扱います。
「ノプスト書くべきだが、ビューラン開発方式がどう違うのか？」
サーバーサイドレンダリングの概念が見知らぬ方、会社でNuxt.jsで開発する必要がありますが、一度も扱っていない方に適した講座です。簡単なショッピングモールサイトの一部を制作しながら、Nuxt.jsと既存のVue.jsの開発方法がどう違うかを学びましょう。
✅Nuxt.jsを初めて起動する方
✅ Vue.js開発の基本概念はわかりますが、サーバーサイドレンダリングが慣れていない方
✅会社でNuxt.jsプロジェクトを進行するのにどこから始めるべきかを感じにくい方
✅サーバーサイドレンダリングに興味があるフロントエンド開発者
この講義を作った
知識共有者を紹介します😎
事業開発実務者の
ノウハウを教えてください🎁
この講義だけの特徴
確認してください✨
講義の教案を提供します。
講義で取り上げるNuxt.jsとサーバーサイドレンダリングに関する主な概念を、よく書かれた教案と図で簡単に理解できるようにします。
直接サイトを作成してみてください。
モールサイトを作成しながら、Nuxt.jsの長所と文法を自然に体験できます。 （実習70％以上）
自然に構造を比較します。
キャプテン板橋Vue.jsシリーズの内容が自然にNuxt.js講義につながるように、シングルページの構造と比較して説明します。
📢選手の知識を確認してください！
- この講義はキャプテン板橋Vue.jsシリーズと連携する講義です。 (1) Vue.js はじめに- (2) Vue.js 中級- (3) Vue.js 完璧ガイド- (4) Vue.js 終わりをすべて学んだ方に適した講義なので、ぜひ選手コースを受講してください 🙂
講義で学ぶ
内容をお知らせします🎈
サーバーサイドレンダリング
既存のビューCLIで作成したプロジェクトで開発したときとの違いと、サーバーサイドレンダリングの仕組みや利点などについて詳しく説明します。
サーバーサイドレンダリングの仕組みを理解する
実際のSSRが適用されたサイトとそうでないサイトを比較しながら、目で学んだ概念を簡単に理解するのに役立ちます。
レイアウトパターンについて
Nuxt.jsのレイアウトコンポーネントを理解するためのスキームと既存のシングルページアプリケーションとの違いについて詳しく説明します。
Nuxt.jsのESLintルール
ビューCLIプロジェクトよりも強化されたNuxt.jsのESLintルールについて説明します。コードで実際のESLintがどのように適用されているかを見てください。
バックエンドAPIサーバーの構成と連携
モールサイトを開発するためのバックエンドAPIサーバーの設定方法を案内します。サーバーを構成するための手順は、授業後も自分で進めるようにガイドを提供します。
コンポーネントの設計方法
React、Vueなど、コンポーネントベースのフレームワークで悩む必要があるコンポーネントの設計方法についてご案内し、実装された内容についてレビューします。
ショッピングモールに似たウェブサイト制作
モールに似たウェブサイトを実際のAPIに連動して制作してみます。制作の過程で、Nuxt.jsの概念を順番に適用し、既存のVue.jsアプリケーションとの違いを学びます。
マークアップ＆スタイリングは必要なだけ
画面開発のための主要なレイアウトマークアップとスタイリングのみが行われ、詳細なスタイリングは羽毛リポジトリのソースコードとして提供されます。 Nuxt.jsの概念学習に集中でき、迅速かつ効率的な学習が可能です。
よくある質問 💬
Q. Vue.jsは初めて接するのにこの講義を聞くことができますか？
このレッスンは、Vue.jsの基本概念を知っている人が聞くのに適しています。 Nuxt.jsは、Vue.jsで開発する際に知っておくべき基本的な知識にルールがもう少し追加されたフレームワークとして見れば良いと思います。キャプテン板橋のVue.jsシリーズの講義を始める～終了するまで先に受講してから聞くのがおすすめです。
Q. サーバーサイドレンダリングの概念を全く知らないのにクラスを聞くことができますか？
はい、聞いてください。 Nuxt.jsのAPIや使い方だけを扱うだけでなく、なぜサーバーサイドレンダリングを書けば良いのか、既存のクライアントサイドレンダリング（シングルページアプリケーション）との違いは何か一つ一つ細かく詳しく取り上げています。クラスを聞いたら、サーバーサイドレンダリングの概念をしっかりとつかむことができます。
Q. フロントエンド開発が初めてなのに受講しても大丈夫でしょうか？
この講義はフロントエンドの開発を初めて始める方には適していない講義です。 HTML、CSS、JSの基本的な概念がある方が、聞きやすく講義を構成しました。少なくとも、Vue.jsの基本概念とルーターを使ったシングルページアプリケーションの概念を理解した状態で聞くことをお勧めします。
Q. Vue.js 3が出ましたが、Vue 3に進みますか？ Vue 2に進みますか？
このクラスはVue 2に基づいて行われます。まだVue 3をベースにしたNuxt.jsの公式バージョンはリリースされておらず、Vue 3も現業での使用には制約が多いため、学習後すぐに適用できるVue 2を基準に製作しました。今後Vue 3をベースにしたエコシステムが安定したら、Vue 3の内容も追加でアップデートする予定ですので参考にしてください:)
※Vue 2で学んだ内容をすべてVue 3でそのまま適用できます。 Vue 2とVue 3の違いは主なAPI 1つ程度の違いで見ればよく、大きく違いはありません。
キャプテン板橋の
他の講義が気になったら？
知識共有者の紹介👨🏫
チャン・ギヒョ（キャプテン板橋）
- 現在のフロントエンド開発者
- 「Do it! Vue.js入門」、「 簡単に始めるタイプスクリプト」著者
- Naver、eBay Korea、Samsung、LG、SKグループなどVue.js講義
- ファーストキャンパスVue.js征服キャンプ講義
- Google ウェブ技術の公式サイト翻訳者
- 技術ブログ, Github
「講義収益でVue.jsオープンソース+
ライフコーディングを後援します😁」
こんな方に
おすすめです
学習対象は
誰でしょう？
Nuxt.js を初めて使用される方
サーバーサイドレンダリングを学びたい方
Vue.js を使用して、多くの人に公開されるサイトを作成したい方
フロントエンド開発者
パブリッシャー
就職準備生
前提知識、
必要でしょうか？
Vue.js の始め方
Vue.js中級
Vue.js 完全ガイド
Vue.js を徹底的に理解する
48,882
受講生
4,775
受講レビュー
3,815
回答
4.9
講座評価
19
講座
인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳
カリキュラム
全体
73件 ∙ (6時間 11分)
9. Nuxtプロジェクトの作成
05:38
10. プロジェクトフォルダ構造の説明
05:49
11. メインページの作成と結果の確認
04:05
13. エラーページの定義方法
02:45
15. レイアウトコンポーネントの紹介
06:44
16. nuxt-linkタグの紹介
02:29
講座掲載日:
最終更新日:
受講レビュー
全体
124件
4.9
124件の受講レビュー
toki moki受講レビュー 6
∙
平均評価 5.0
- mj Song
受講レビュー 6
∙
平均評価 5.0
- sujin3473
受講レビュー 1
∙
平均評価 3.0
- 찬규
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成프론트엔드에 관심이 생기면서 2개월 동안 열심히 공부 중인 대학생입니다! 혼자서 막연하게 공부하다가 이해도 안 되고 너무 힘들었는데 우연히 캡틴 판교님을 접해 지금 강의까지 다 듣고 복습도 하는 중이에요! 덕분에 방향 잘 잡고 공부해 가는 것 같아요ㅜㅜ 진짜 강의들 너무 좋고 요번 nuxt강의도 도움 많이 되었어요 개인적으로 정말 감사드립니다! 앞으로 새로운 강의 나오면 바로 뛰어가서 수강하겠습니다 ㅠㅠ
- 장기효(캡틴판교)知識共有者
아이고 찬규님 너무 좋은 평가 감사드려요! ㅋㅋ 앞으로 강의도 많이 기대해 주세요. 찐 강의 준비해 오겠습니다! :)
￥6,875
captainの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]강의 썸네일](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)