wkdska15905720

この講義は、Vanilla JavaScriptでNotionを最初から最後まで直接実装し、単純なUIクローンを超えて内部動作原理を深く理解することに焦点を当てたフルスタックレベルのフロントエンドプロジェクト課程です。

サイドバーツリー、ネスト文書生成、自動保存、ルーティング、ゴミ箱、お気に入り、検索モーダル、設定モーダル、テーマ切り替え、Export/Import、キーボードショートカット、レスポンシブレイアウト、ドラッグリサイズなど、実際のノートアプリの核心機能をすべてバニラJSで直接実装します。

React、Vueのようなフレームワーク以前に必ず知っておくべきブラウザ標準動作（イベントバブリング、DOMツリー、ローカルストレージ、Blob、FileReader、ハッシュルーティングなど）をしっかりと学習し、「なぜこのように動作するのか」を完全に理解してデバッグできる実力を身につけることが目標です。

nhcodingstudio

Vanilla JavaScriptで直接実装するNotion

실습 중심

토이프로젝트

프론트엔드

클론코딩

웹개발

입문

초급

중급이상

자바스크립트

JavaScript

리액트

React

Web Application

Document Object Model

frontend

イントロ

📂 Mini Notion Part 1: プロジェクトの開始と基本フレーム

📂 Mini Notion Part 2. ドキュメントデータ管理とサイドバーツリー

📂 Mini Notion Part 3. 本文エディターと状態同期

📂 Mini Notion Part 4. ドキュメント管理の高度化

📂 Mini Notion Part 5. ページ追加・削除とゴミ箱の深化

📂 Mini Notion Part 6. お気に入りと検索モーダル

📂 Mini Notion Part 7. 設定とユーザー環境

📂 Mini Notion Part 8. Confirmモーダルとショートカットキー

📂 Mini Notion Part 9. サイドバー制御とアプリ初期化

📂 Mini Notion Part 10. 全体構造総まとめ