다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 마스터 클래스
webstoryboy
Vite, React, Vue, 그리고 Next.js를 사용하여 멋진 포트폴리오 사이트를 만드는 방법을 소개합니다. 여러 가지 프레임워크를 활용해 실무 수준의 프론트엔드 개발 능력을 향상시키고자 하는 개발자들에게 적합합니다.
Basic
포트폴리오, React, Vue.js
簡単かつ迅速に学習するVue 3基本(Composition API)
Vue.jsを初めて学ぶ方のための講義です。 公式文書をわかりやすく消化できるように、簡単な例と絵で説明がよくできています。
学習した受講者のレビュー
受講後に得られること
Vue3基本概念(反応性、データバインディング、コンポーネントなど)
Composition APIの開発方法
vue-notionパッケージによるNotionデータのインポート
🌟 Vue.jsを素早く簡単に学びましょう！ 🌟
このレッスンは、Vue.jsの公式文書に基づいてわかりやすく作成されたレッスンです。
✅ひたすら必要な内容だけきれいで素早くお知らせします！
✅ 不必要にジルオフする時間（コード書く時間、間違ったコード書き直す時間）がありません！
✅簡単にまとめられていて、ほとんどの講義が10分未満！しかし、細かくお知らせできるように圧縮されています！
✅画面はそのままのまま話す時間？ほとんどありません！集中する必要があります！
結果
このレッスンはセクション2以降のレッスンごとに課題があります。
Section 4までは練習であり、Section 5から着実に課題をうまく遂行されればこんなサイトを作ることができますよ。
細かい説明よりもどんなことを学ぶのだろうか？
下からすぐに調べましょう！
Section 01. 講義の準備
始める前に、コンピュータにインストールして設定するものについて説明します。
01. 開発環境を構成する
開発に必要なChromeとVue.js Devtools 、 VSCode 、 Node.jsをインストールします。
02. VSCodeの使い方
Visual Studio Codeを知らない方のために簡単な使い方を説明します。
03. VSCode拡張プログラムのインストール
VSCodeを使用しながら一緒に書くと良い拡張プログラムがインストールされます。
- Korean Language Pack
- indent-rainbow
- Live Sever
- Material Icon Theme
- Auto Rename Tag
- Prettier - Code formatter
- Vue Lanugage Features (Volar)
04. ソースコードのダウンロード
サンプルコードを含むファイルをダウンロードする方法について説明します。
Section 02. Vue.js はじめに
Vue.js文法を本格的に扱い始めます。
わかりやすくするために、1つのHTMLファイルだけに進んでください。
01. Vue.js はじめに
Vueを起動するには、 createApp関数を呼び出してappを作成する方法を学びます。
02. コンポーネント(Component) 
Vue.jsで重要な概念と言えるコンポーネントについて説明します。
03. データバインディング
コンポーネント内でHTMLをより効率的に描画するためのデータバインディングを学びます。
04.反応性
相互作用を通じて、より動的なWebを作成するために必要な反応性の概念をカバーします。
Section 03. ディレクティブ (Directive)
コンポーネントでHTML要素をさまざまに操作できるディレクティブについて説明します。
01. v-bind 
プロパティにデータバインドできるv-bindについて学びます！
02. v-for 
v-forを介してタグを繰り返し作成する方法について説明します。
03. v-ifとv-show 
v-ifまたはv-showを使用して、条件に応じてタグを表示または消去できます。
04. v-on 
タグでイベントを処理できるようにするv-onについて説明します。
05. v-model 
ユーザーが対話を通じて変更できる入力フォームからデータバインドできるvモデルを扱います。
Section 04. 反応性 (Reactivity)
反応性を利用できるrefとreactiv e 、そしてそれを利用して追加的な作業を行うことができるcomputedとwatcherを扱います。
01. ref vs reactive 
レスポンシブオブジェクトであるreactiveとrefを比較してどう違うかを説明します。
02. Computed 
レスポンシブオブジェクトを使用して別の値を作成するcomputedについて説明します。
03. Watcher 
レスポンシブオブジェクトの変化に応じて追加の作業を行うことができるウォッチャーについて説明します。
Section 05. コンポーネント (Component)
コンポーネントファイル（.vue）を作成して、コンポーネントをより深く扱います。
01. Single File Component 
コンポーネントをより活用できるvueファイル、Single File Component !!
02. Vueプロジェクトの作成
npmを使ってVueを開発するのに最適なプロジェクトを作成する方法を学びます。
03. script setup / style scoped 
scriptをより効率的に活用できるscript setup
style をコンポーネント内でのみ適用するstyle scoped
04. Life Cycle Hook 
コンポーネントが作成され消える過程で特定のタスクを実行できるLife Cycle Hookについて学びます。
05. Template Refs 
templateでrefを使ってDOMを操作してみましょう！
06. 非同期コンポーネント
非同期的にサーバーで必要なコンポーネントを呼び出す非同期コンポーネント
動的にコンポーネントを描画できる動的コンポーネントについて学びます。
Section 06. ノッション (Notion)
ブログのようにNotionをエディタとして利用する方法を学びます。
01. Notionの使い方
Notionを知らない方のために会員登録から簡単な使い方まで取り上げます！
02. Notion データの読み込み
vue-notionパッケージからNotionデータをインポートする方法を学びます。
Section 07. コンポーネント通信
コンポーネント間でデータをやり取りするさまざまな方法について説明します。
01. Props 
親コンポーネントから子コンポーネントにデータを渡すプロップについて学びます。
02. Emits 
子コンポーネントから親コンポーネントにイベントを配信するEmitsについて学びます。
03. Provide/Inject 
親コンポーネントから深い子コンポーネントにデータを渡すことができるProvideとInjectについて説明します。
04. Fallthrough Attributes 
コンポーネントに配置された属性をどのように扱うことができるかをattrsで調べます。
05. Component v-model 
コンポーネントにv-modelを書くときに何をすべきかを学びます。
06. Slots 
コンポーネントのテンプレートを親コンポーネントで扱うことができるスロットについて説明します。
このように見てもわからない場合は、無料講義をいくつかご覧ください！
どんな感じなのか確か❗️知っています。
💬予想される質問 Q&A
こんな方に
おすすめです
学習対象は
誰でしょう？
Vue.jsのドキュメントを読むのが難しい人や面倒な人
Vue.js 初めて入門する人
フロントエンド入門者
前提知識、
必要でしょうか？
HTMLの基本
CSS基本(border、margin、paddingなど分かる程度)
Javascriptの基本（console.logや矢印関数を知る程度）
カリキュラム
全体
32件 ∙ (3時間 20分)
1. 講義紹介
03:19
2. 開発環境を構成する
05:38
3. VSCodeの使い方
04:20
5. ソースコードのダウンロード
00:58
6. Vue.jsを始めよう
04:14
9. 反応性(Reactivity)
05:50
講座掲載日:
最終更新日:
受講レビュー
全体
11件
4.5
11件の受講レビュー
sftblw受講レビュー 3
∙
平均評価 4.7
5
44% 受講後に作成- 편집: ★★★★★ 5.0 예술적임. 말할 필요가 없는 뛰어난 수준 - 설명: ★★★★☆ 4.5 뛰어남. 개념 설명의 질 면에서 부족하거나 급하게 넘어가는 부분이 없지는 않지만, 개념 자체를 짚고넘어가는 걸 빼먹지는 않으며, 부족한 부분은 편집으로 커버하고 있음. - 자기주도성: ★★★★☆ 4.5 뛰어남. 매 강의 끝마다 과제를 내고, 바로 다음 강의에서 정답을 보여주는 걸로 복습까지 할 수 있음. 블로그를 만든다는 하나의 목적에 맞게 잘 구성되어 있음. - 강의 대상 선정: ★★★★_ 4.0 어딘가 미묘하게 아쉬움. 대상을 초급자로 생각하고 있는 거 같은데 그런 것 치고는 미묘하게 개념 설명이 부족한 부분이 간혹 있음. 이미 유사한 개념들을 알고 있다면 스무스하게 넘어갈 수 있음. - 추천 수강자: JavaScript를 현업에서 사용한 경험이 있으나 Vue.js는 써본적이 없는 사람, 다른 UI 프레임워크를 써봤는데 Vue.js를 배우고 싶은 사람, 직접 따라하며 잘 이해가 되지 않는 개념은 검색하거나 강의자에게 질문해가며 익혀갈 자신이 있는 초보 학습자, 실무에 빨리 써야 하는데 공식 문서는 너무 길어서 하나하나 읽기에는 곤란한 인프런 비즈니스 회원사의 직원
- 김민환
受講レビュー 1
∙
平均評価 5.0
- cuhexa
受講レビュー 2
∙
平均評価 5.0
- 김주엽
受講レビュー 1
∙
平均評価 5.0
- NEEUN
受講レビュー 1
∙
平均評価 5.0
￥2,825
似ている講座
同じ分野の他の講座を見てみましょう！
![기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]Course Thumbnail](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)
