[Project] VanillaJS로 Notion 기능 구현 - 프로젝트 회고

 

 

프로젝트 요구사항 및 진행 간 구현 내용

https://github.com/junly21/FEDC5-5_Project_Notion_VanillaJS/blob/main/README.md

 

좋았던 점 📖

이번 프로젝트를 진행하며 

1. 컴포넌트 간의 의존성을 최대한 줄일 것

2. 컴포넌트 간 순환 참조를 최대한 없앨 것

3. 최대한 설계 이후에 구현할 것

크게 이 세 가지에 최대한 유의하며 구현하였다.

 

컴포넌트 간의 의존성을 최대한 줄이기 위해

문서들의 목록을 나열하는 왼쪽 화면의 RootConatiner와, 문서 열람 및 편집의 기능을 하는 오른쪽 화면의 Document Container를 나누어  App.js의 하위에 각기 다른 폴더에 분류하였다.

 

 

최대한 상위에서 하위 컴포넌트로 일방향으로 데이터를 전달하도록 하였다.

특히 Document에서 제목이 변경될 경우 Root에 이를 실시간으로 반영해주기 위하여

Document.state.title -> DocumentContainer -> App.js -> RootContainer -> Root로

상위 컴포넌트로의 이동 + 다시 하위 컴포넌트로의 이동을 거쳤었던 기존 구조를

 

팀원의 도움을 받아 Document.state.title에 변경이 가해지면 window 전역에 CustomEvent를 발생시켜
이를 App.js가 전달받아 Root로 내려줄 수 있도록 구조를 변경한 것이 인상깊었다.

 

어려웠던 or 아쉬웠던 내용🤔

depth의 이동이 깊지 않은 Data의 흐름에 대해 refacoring하려 노력했던 것

위에 언급한 것 처럼 Editor의 title의 내용이 변하면 DocumentList에도 실시간으로 제목이 변하도록 만드는 방법에 대한 고민 끝에 기존 구조를 변경하였는데

 

이는 다시 돌아보면 컴포넌트에서 데이터가 이동하는 depth라는 개념과 width라는 개념에서

 

기존 방법도 depth는 깊게 관여하지 않는 부분이다 보니 width에 집착하여 굳이 필요하지 않은 리팩토링을 하였다고 생각된다.

 

사실 data가 흐르는 depth관점에서 기존의 방법인 Document.state.title -> DocumentContainer -> App.js -> RootContainer -> Root라는 콜백을 활용한 data의 이동도 크게 문제가 되지 않았을 것이다.

 

그래도 나름의 최적화를 고민하고, 그 과정에서 배운 내용을 적용해보았다는 점에서 의미가 있었다.

 

 

textarea -> div contenteditable로의 변환

문서 편집기의 경우 textarea로 기능 구현을 완성한 후 마지막에 마크업을 지원하는 div contenteditable로 바꾸었다.

그 과정에서 사실상 Editor의 구조를 대부분 바꿔야 했다.

 

html과 markdown을 서로 conver해주는 함수가 필요했는데, 생각보다 많은 시간을 필요로 했다.

focus가 적용 되고 풀릴마다 markdown과 html을 양방향으로 convert해주는 기능을 구현하고,

editor의 content 내용이 변할 때 마다 convert를 신경쓰며 fetch해주어야 했기 때문이다.

 

그리고 이 과정에서 focus의 in out이 제대로 작동하지 않는 문제가 있었는데, 이는 좀 더 리팩토링을 통해 뜯어 고쳐야 개선이 될 것 같다.

 

 

느낀점✍

데브코스의 첫 번째 프로젝트인 Vanilla JS로 노션 만들기가 끝났다.

프로젝트 기간동안 TIL을 작성할 여유가 나지 않아 프로젝트가 끝난 후 회고글에 한번에 작성할 예정이었는데,

아무래도 일주일간 매일 작업을 하다보니 부딪히는 에러도 많고, 구현한 기능도 많아서 끝난 후 작성하는 것도 쉬운일이 아니라는 것을 알게 되었다.

또한 어떤 에러에 부딪혔는지 남에게 설명한다는 생각으로 쓰다보니 막상 기억나는 에러나 힘든 점이 뚜렷하게 기억나지가 않는다...(기록의 중요성)

다음 프로젝트부터는 힘들어도 TIL로 매일 매일의 내용을 작성해봐야겠다.