Notion 클론 앱 완성하기 – Vanilla JS로 만드는 실전 프로젝트

Partner: Udemy
Affiliate Name:
Area:
Description: 이 강의에서 배우는 것 (What you’ll learn)Notion 스타일의 중첩 문서 트리 구조를 Vanilla JS로 직접 구현하기문서 생성, 삭제, 복원, 즐겨찾기, 휴지통 등 문서 관리 전 과정 설계와 구현사이드바 트리 렌더링 로직과 계층적 탐색 구조 다루기Toast, Popover, Confirm 모달 등 재사용 가능한 UI 컴포넌트 패턴 제작검색 모달을 통한 실시간 필터링과 키보드 탐색(↑↓, Enter) 기능 구현키보드 단축키 (Ctrl/⌘+K, Ctrl/⌘+Shift+N, F2 등) 이벤트 바인딩과 충돌 처리버튼 클릭, 드래그, 창 리사이즈, 디바이스 회전 등 다양한 입력에 반응하는 사이드바 폭 제어모바일과 데스크톱을 모두 지원하는 반응형 UI 설계라이트·다크 테마 전환과 localStorage를 활용한 영속적 상태 저장해시 기반 라우팅과 navigateTo, syncFromLocation을 통한 싱글 페이지 내비게이션 구현상태 변화에 맞춰 화면 전체를 다시 그리는 상태 → UI 단방향 렌더링 흐름 이해load()와 save()를 통한 브라우저 저장소 동기화와 상태 복원복잡한 이벤트 흐름에서 발생할 수 있는 문제를 방지하는 이벤트 전파 제어와 안전 가드 패턴실무 앱에서도 활용되는 UX 세부 디테일 (예: 새 문서 생성 시 부모 자동 펼침, 휴지통 위치 계산)React, Vue 같은 프레임워크가 내부적으로 어떻게 상태와 DOM을 연결하는지에 대한 근본적 이해 확보현대 프론트엔드 개발은 React, Vue 같은 프레임워크와 라이브러리가 중심이 되고 있습니다. 이 도구들은 생산성과 확장성을 크게 높여주지만, 결국 그 내부 동작은 브라우저, DOM, 그리고 Vanilla JavaScript 위에서 이루어집니다. 프레임워크를 단순히 “사용”하는 것과, 내부 원리까지 이해하고 제대로 활용하고 디버깅하는 것 사이에는 큰 차이가 있습니다. 이 강의는 바로 그 차이를 메워주는 여정을 제공합니다.이 강의에서는 HTML, CSS, JavaScript만을 사용하여 Mini Notion 앱을 직접 구현합니다. 단순히 화면을 흉내 내는 수준이 아니라, 실제 노트 앱이 동작하는 원리를 담은 완전한 구조를 하나씩 쌓아 올립니다. 데이터 상태를 어떻게 저장하고, DOM을 어떻게 렌더링하며, 이벤트와 사용자 상호작용이 어떻게 맞물려 돌아가는지를 코드 레벨에서 끝까지 따라가며 학습합니다.총 49개의 세밀한 강의는 다음과 같은 흐름으로 이어집니다. 사이드바 트리를 기반으로 중첩 문서 생성과 계층적 관리 기능을 구현하고, 즐겨찾기, 휴지통, 검색 모달, 설정 모달 같은 실제 서비스에 가까운 기능들을 완성합니다. 토스트, 팝오버, 확인 모달처럼 재사용 가능한 UI 패턴을 만들어내며, 검색·새 문서 생성·이름
Category: IT & Software > Other IT & Software > JavaScript
Partner ID:
Price: 44.99
Commission:
Source: Impact
Go to Course