abcd123123

Khóa học này là một dự án frontend cấp độ fullstack tập trung vào việc triển khai Notion từ đầu đến cuối bằng Vanilla JavaScript, không chỉ dừng lại ở việc clone UI đơn thuần mà còn tập trung vào việc hiểu sâu nguyên lý hoạt động bên trong.

Chúng ta sẽ trực tiếp triển khai tất cả các tính năng cốt lõi của một ứng dụng ghi chú thực tế bằng vanilla JS như: sidebar tree, tạo tài liệu lồng nhau, tự động lưu, routing, thùng rác, yêu thích, modal tìm kiếm, modal cài đặt, chuyển đổi theme, Export/Import, phím tắt, responsive layout, drag resize.

Mục tiêu là học vững chắc các hoạt động chuẩn của trình duyệt (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, v.v.) mà bạn phải biết trước khi sử dụng các framework như React, Vue, để có thể hiểu hoàn toàn "tại sao lại hoạt động như vậy" và xây dựng nội lực có thể debug được.

nhcodingstudio

Triển khai Notion trực tiếp bằng 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. 전체 구조 총정리