abcd123123

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

실습 중심

토이프로젝트

프론트엔드

클론코딩

웹개발

이 강의는 Vanilla JavaScript로 Notion을 처음부터 끝까지 직접 구현하며, 단순한 UI 클론을 넘어서 내부 동작 원리를 깊이 이해하는 데 초점을 맞춘 풀스택 수준의 프런트엔드 프로젝트 과정입니다.

사이드바 트리, 중첩 문서 생성, 자동 저장, 라우팅, 휴지통, 즐겨찾기, 검색 모달, 설정 모달, 테마 전환, Export/Import, 키보드 단축키, 반응형 레이아웃, 드래그 리사이즈 등 실제 노트 앱의 핵심 기능을 모두 바닐라 JS로 직접 구현합니다.

React, Vue 같은 프레임워크 이전에 반드시 알아야 할 브라우저 표준 동작(이벤트 버블링, DOM 트리, 로컬 스토리지, Blob, FileReader, 해시 라우팅 등)을 탄탄하게 학습해, “왜 이렇게 동작하는가”를 완전히 이해하고 디버깅할 수 있는 내공을 쌓는 것이 목표입니다.

입문

초급

중급이상

자바스크립트

JavaScript

리액트

React

Web Application

웹앱

Document Object Model

frontend

Vanilla JavaScript로 직접 구현하는 Notion

Intro

📂 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. 전체 구조 총정리