노션 클로닝 미션 회고

✋ No 프레임워크!! 자바스크립트로만 구현하는 notion

프로그래머스 데브코스 4주차 미션 <노션 클로닝> 미션 후기 및 회고

장장 1주일 동안의 노션 클로닝 미션이 끝이 났다. 뿌듯함과 동시에 아쉬움이 많이 밀려온다. 아쉬웠던 부분은 리팩터링을 진행하고, 앞으로 계속해서 추가적인 기능을 덧붙여 배포까지 해보고 싶다.

 

데모

root에 추가, 삭제 기능

토글 기능, 하위 페이지에 추가, 삭제 기능

자동 저장기능

기능 소개

• 사이드바의 최상단 "상윤의 notion"을 누르면 홈 화면으로 이동한다.
• 사이드바의 페이지 리스트를 클릭하면 해당 페이지로 이동한다.
• 토글 버튼을 클릭해서 하위 페이지를 볼 수 있다.
• 하위 페이지가 없다면 "하위 페이지가 없어요" 라고 보여준다.

페이지 생성 기능

1. 사이드바의 하단 "새 페이지"를 누르면 새로운 페이지를 생성할 수 있다.
2. 사이드바의 리스트에 추가를 한다면 리스트 아래에 새로운 페이지를 생성할 수 있다.
3. 노션과 흡사하게 구현해보고 싶어 새로운 페이지 생성은 모달로 구현을 했다.
   • 제목을 입력하고 모달 창 바깥을 누르면 새로운 페이지가 생성된다.
   • 만약 제목이 비어있다면 생성되지 않고 창이 닫힌다.
   • 새로운 페이지를 생성했다면 생성된 페이지를 보여준다.

페이지 삭제 기능

1. 사이드바 리스트의 "삭제" 버튼을 누르면 페이지가 삭제된다.
2. 만약 하위 페이지들이 있다면 첫 번째 하위페이지가 root 페이지가 된다.
3. 만약 현재 보고 있는 페이지를 삭제한다면 홈 화면을 보여준다. (홈으로 리다이렉팅)
4. 페이지를 삭제한 이후, 뒤로가기를 눌렀을 때 삭제한 페이지로 이동하지 않는다. (history API를 이용해서 history 목록에서 삭제)

페이지 수정 기능

입력이 일어난 이후 2초간 입력이 없다면 자동저장 됩니다.

 

---

잘한 점

1. 하위 페이지가 없을 경우 페이지가 없다는 것을 사용자에게 알려주는 UI처리를 했다.
2. 모달 창을 구현했다.
3. 현재 보고 있는 페이지를 삭제했을 때의 사용자 경험을 고려했다.
   1. 홈으로 리다이렉팅을 시키고
   2. 뒤로가기 목록에서 삭제한다.

아쉬웠던 점

1. 모달 창을 구현했으나 tab키를 눌렀을 때 포커스가 모달 창 바깥 버튼으로 나가는 현상을 제대로 해결하지 못했다.
   1. tabIndex html속성을 이용해보려 했으나 잘 적용이 되지 않았다.
   2. 따라서 tab키를 누르는 이벤트를 막아버렸다. 만약 모달 창에서 제목만 입력하는 것이 아니라 글 작성까지 동시에 되어야 한다면 이 처리는 좋지 않은 사용자경험을 줄 수 있으므로 잘못된 처리이다.
2. 토글을 열어놓고 새로고침을 했을 때, 열려있는 토글이 모두 닫힌다.
   1. 새로고침을 했을 때, 사이드바가 처음부터 렌더링되기 때문에 토글이 모두 닫히게 된다.
   2. 이 경우, 웹 스토리지를 이용해서 최근에 열어놓은 토글을 임시로 저장 해 놓으면 될 것 같았지만, 구현하지 못했다.
3. 페이지의 제목이 길어졌을 경우, 사이드바 블록이 망가진다. ➡️ CSS 코드를 수정한다면 개선시킬 수 있을 것 같다.

구현하지 못한 부분

1. 현재 페이지의 링크를 나타내고, 링크를 클릭했을 때 해당 페이지로 이동하는 기능
2. 텍스트 에디터에 마크다운 문법을 지원하는 기능
3. 그 밖에 여러가지...

---

어떻게 개선시킬 수 있을까?

핵심은 상태관리

핵심은 상태관리이다. 각 컴포넌트가 어떤 상태를 가질 것인지 생각해보는 것이 어려운 문제였다. 또 각 컴포넌트의 상태에 따라 데이터 흐름을 어떻게 가져갈 것인지 결정해야했다.

하지만 App 컴포넌트의 역할이 너무나도 많다.

역할이 막중한 App 컴포넌트

아쉬웠던 점을 보면, 모두 사이드바가 문제이다. 결국 내 선택이 문제였는데, 모든 상태를 App 컴포넌트에서 관리하므로 리스트 상태가 바뀔 때마다 사이드바가 다시 렌더링 되는 것이 주요 문제였다고 생각한다. 이 앱의 규모가 커진다면, App 컴포넌트가 하는 일은 너무나도 많아질 것이다. 상태를 다시 쪼개서 컴포넌트의 역할을 분리해야 할 것 같다.

---

끝났지만 끝난 것이 아닌...

노션 프로젝트였다. 추가하고 싶었던 기능을 모두 구현하지 못했고 리팩터링 할 부분도 산더미처럼 보인다. 할게 더 많다...? 오히려 좋다. 계속해서 더 개선 시켜보고 싶다. 시작하기 전까지만해도 이걸 내가? 과연? 할 수 있을까? 하는 생각에 두려웠지만 정말 재미있었다. 이 문제를 어떻게 해결할 것인지 고민하는 과정들 자체가 참 즐겁다.

 

이 프로젝트... 시리즈로 내볼까?