Vanilla JavaScript로 직접 구현하는 Notion
nhcodingstudio
이 강의는 Vanilla JavaScript로 Notion을 처음부터 끝까지 직접 구현하며, 단순한 UI 클론을 넘어서 내부 동작 원리를 깊이 이해하는 데 초점을 맞춘 풀스택 수준의 프런트엔드 프로젝트 과정입니다. 사이드바 트리, 중첩 문서 생성, 자동 저장, 라우팅, 휴지통, 즐겨찾기, 검색 모달, 설정 모달, 테마 전환, Export/Import, 키보드 단축키, 반응형 레이아웃, 드래그 리사이즈 등 실제 노트 앱의 핵심 기능을 모두 바닐라 JS로 직접 구현합니다. React, Vue 같은 프레임워크 이전에 반드시 알아야 할 브라우저 표준 동작(이벤트 버블링, DOM 트리, 로컬 스토리지, Blob, FileReader, 해시 라우팅 등)을 탄탄하게 학습해, “왜 이렇게 동작하는가”를 완전히 이해하고 디버깅할 수 있는 내공을 쌓는 것이 목표입니다.
Basic
JavaScript, React, 웹앱






/builder/0df7f085-0ac0-4fa4-8a68-ff504df176c8/v8-seeklogo.com.png?w=960)
/builder/93b75351-a0b0-46c9-968b-498b033ea725/section1.001.jpeg?w=960)
/builder/4718e591-1d4a-44c7-bfb7-071adc68c5e2/section2.001.jpeg?w=960)
/builder/a79cd56a-333c-40f9-a760-a79526d6087d/section3.001.jpeg?w=960)
/builder/ab3c9fe1-f607-42e7-800c-156f4be6b00b/section4.001.jpeg?w=960)
/builder/688a6fbc-0b2b-4f0c-b4b8-bc10f7d6a1f1/section5.001.jpeg?w=960)










![[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습Course Thumbnail](https://cdn.inflearn.com/public/courses/330604/cover/9c8dddcb-bd3b-4f3d-93af-ea382b6835c0/thumbnail.png?w=420)