wkdska15905720

This course is a full-stack level frontend project course that focuses on implementing Notion from start to finish using Vanilla JavaScript, going beyond simple UI cloning to deeply understand the internal operating principles.

You'll implement all the core features of a real note-taking app using vanilla JS, including sidebar tree, nested document creation, auto-save, routing, trash, favorites, search modal, settings modal, theme switching, Export/Import, keyboard shortcuts, responsive layout, drag resize, and more.

The goal is to solidly learn browser standard behaviors (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, etc.) that you must know before frameworks like React and Vue, so you can completely understand "why it works this way" and build the skills to debug effectively.

nhcodingstudio

Implementing Notion Directly with Vanilla JavaScript

실습 중심

토이프로젝트

프론트엔드

클론코딩

웹개발

입문

초급

중급이상

자바스크립트

JavaScript

리액트

React

Web Application

Document Object Model

frontend

Intro

📂 Mini Notion Part 1: Project Start and Basic Framework

📂 Mini Notion Part 2. Document Data Management and Sidebar Tree

📂 Mini Notion Part 3. Body Editor and State Synchronization

📂 Mini Notion Part 4. Advanced Document Management

📂 Mini Notion Part 5. Adding·Deleting Pages and Advanced Trash Features

📂 Mini Notion Part 6. Bookmarks and Search Modal

📂 Mini Notion Part 7. Settings and User Environment

📂 Mini Notion Part 8. Confirm Modal and Shortcuts

📂 Mini Notion Part 9. Sidebar Control and App Initialization

📂 Mini Notion Part 10. Overall Structure Summary