프로그래머스 데브코스 활동을 진행하면서 Vanilla JS 사용해 Notion 클로닝 프로젝트를 진행했다.
아직 프로젝트(노션 클로닝 프로젝트 바로가기)에 수정해야할 부분과 추가해야할 부분이 많다고 생각되지만 이제까지 프로젝트를 진행하면서 새롭게 배운 부분, 잘하고 있는 부분, 부족한 부분을 알아보고 싶어서 회고를 적어본다.

getSelection? createRange?

editor에 "# 제목"을 입력하고 enter를 입력하면 notion과 동일하게 <h1>제목</h1>으로 즉각적으로 변경될 수 있는 rich editor를 구현을 하려고 시도했다. 그 과정에서 가장 큰 문제는 editor의 innerHTML을 변경하는 과정에서 현재 사용자가 가지고 있는 커서 위치를 유지하는 부분이였다.
요소가 변경될 경우 editor의 내용이 다시 렌더링되어야 하는데 리렌더링시 커서의 위치가 유지되지 않고 처음으로 돌아가는 현상이 있었고 이를 해결하기위해 열심히 구글링을 하던 중 selection과 range의 개념에 대해 알게되었다.
selection과 range를 통해 사용자가 선택한 범위를 알 수 있다. 이를 사용해서 editor가 리렌더링되기 전에 커서의 위치에 보이지 않는 요소를 추가하고 리렌더링 후 추가한 요소의 위치를 가져오는 식으로 커서의 위치를 유지할 수 있었다.
결과적으로 완벽하진 않지만 rich editor의 일부분을 완성할 수 있었고 selection과 range를 더 공부한다면 버그가 없는 rich editor를 만들 수 있을 것같다.

잘한 점

• 클린 코드를 위해 노력했다.
  파일 구조와 컴포넌트 구조, 함수의 역할까지 어떻게 하면 재사용성이 높고 가독성이 높은 코드로 작성할 수 있을지 많은 부분은 고민하면서 프로젝트를 완성해갔다. 가장 이상적인 구조라고 말할 순 없지만 컴포넌트 구조에 대해선 가독성을 많이 높였다고 생각되고 api와 router의 구현은 재사용성을 많이 높였다고 생각된다.
• 프로젝트의 기본 요구사항과 보너스 요구사항을 모두 구현하려고 시도했다.
  노션 클로닝 프로젝트에서 기본 요구사항과 보너스 요구사항을 모두 구현하려고 시도하였고, 1가지(에디터에 하위 문서 출력) 부분을 제외하고 모두 구현하였다. 이 과정에서 위에 적은 selection, range 개념에 대해 알게 되었다.

부족한 점

• 함수의 분리가 잘 이루어지지 않고 있다.
  아직 함수를 분리하는 부분은 많이 부족한 것 같다. 하나의 역할은 하나의 함수가 담당하게 함수들을 분리하여 재사용성을 높이고 코드의 가독성을 더 높이는 노력이 필요하다.
• rich editor의 버그가 많다.
  한글을 입력하고 enter를 입력하면 커서의 위치가 제대로 유지되지 않고, 링크 태그가 다음 줄에도 계속해서 적용되는 등의 버그들이 아직 존재한다. selection, range의 개념을 더 공부해서 버그들을 고칠 필요가 있다.
• editor에 하위 문서 출력 기능
  하나의 문서를 클릭했을 때 해당 문서의 하위 문서가 존재한다면 editor에 출력하는 기능을 구현하지 못했다. 문서의 하위에 문서가 존재하는 구조가 아닌 폴더 구조로 변경해서 하위 요소들을 가져오기 어려운 부분 때문에 구현하지 못했는데 더 고민해서 해당 기능도 추가해야한다.

시도해 볼 것

• rich editor의 버그를 수정하기 위해 selection, range 개념을 좀더 공부하기
• editor에 하위 문서 출력 기능 추가하기
• 여러 역할을 수행하는 하나의 함수를 분리해보기