한 줄 소개

다른 스택을 사용하지 않고, vanillaJS로만 코드를 작성하여 노션의 사이드바와 에디터를 구현한 프로젝트입니다.

기술 스택

VanillaJS, TypeScript

Github

https://github.com/mrbartrns/vanilla-editor

핵심 기능

• 글 작성에 따른 실시간 저장 기능

프로젝트 진행 방식

화면을 미리 구상하여, 구상한 컴포넌트들을 바탕으로 해야 할 태스크를 정리했고 이를 바탕으로 개발을 진행하였습니다.

수행 역할

• 개인 프로젝트였기 때문에, 화면상의 모든 기능을 구현하였습니다.
  • 화면 상의 사이드바와 오른쪽의 에디터 부분을 구현하였습니다.
  • 사이드바에는 문서 제목들이 나열되어 있고, 해당 제목을 클릭하면 오른쪽에 제목과 내용이 뜨도록 만들었습니다. 오른쪽의 제목을 변경하면 왼쪽 사이드바에 실시간으로 반영이 되도록, 상태 기반의 렌더링이 가능하도록 하였습니다.
• 사이드 바 부분
  • 사이드바 부분은 트리 자료구조를 이용하였으며, 데이터와 화면을 일치시키기 위하여 제목이 실시간으로 변경될 때 bfs 탐색법을 이용하여 노드를 찾고 변경된 데이터를 반영하는 방식을 사용하였습니다.