[회고]노션 클로닝.

팀원분이 만들어주신 로고 :D

데브 코스를 진행하면서 첫 번째 개인 프로젝트를 진행하였다. 

내용은 notion의 기능들을 비슷하게 구현해 보는 것이었다.

리뷰 반영까지 어느 정도 하고 나서 회고를 작성하고 싶어서 오래 걸린 것 같다.

흠...할만 할거같은데...?

 

아 처음엔 쉬울줄 알았지~~ 😁

 

 아예 처음부터 진행하는 것은 아니었고 여태까지 들었던 강의의 내용을 바탕으로 진행할 수 있었다.

강의의 내용을 바탕으로 요구사항들을 구현할 수 있겠다고 판단했기 때문에 프로젝트 시작 전, 계획 단계에서는 프로젝트가 어렵지 않을 것이라고 생각했다.

 

 누구나 그럴싸한 계획을 갖고 있다.. 처맞기 전까지는..

 

 가장 어려울 것이라고 예상됐던 문제는 화면 좌측에 문서 리스트를 구현하는 것이었다. <ul> 태그 안에 <li> 태그를 넣는 구조로 만들고 싶었는데 이것을 API fetch를 통해서 내려받은 자료구조를 활용해서 구현할 자신이 없었기 때문이다. 처음에 BFS, DFS를 활용하여 구현했었는데 <ul> 태그 안에 <li> 태그를 제대로 넣지 못하거나 출력 순서가 거꾸로 되어서 고민을 많이 했다. (지금 보면 이 쉬운걸 왜 못했나 싶다😅)

재귀적으로 구현했다.CSS를 inine으로 해서 지저분....

 기본적인 요구사항들을 구현하고나서 보너스 요구사항의 breadcrumb을 구현해보기로 했다. 좌측에 문서 리스트를 그릴 때 DFS, BFS의 방법을 고민했었는데 breadcrumb은 DFS를 사용하면 쉽게 구현할 수 있겠다 싶었다. DFS를 사용해서 선택한 문서를 찾았고, 그때까지의 경로와 해당 파일이 갖고 있는 하위 문서 리스트를 받아와서 breadcrumb을 구현했다. 

 

 구현 자체는 어렵지 않았지만 보고 있는 문서가 바뀔 때마다 breadcrumb을 갱신해 주는 것이 골치 아팠다. 열람 중인 문서가 바뀔 때마다 새롭게 fetch를 받다 보니 중복적인 fetch 작업이 많이 일어나서 breadcrumb의 갱신이 느리게 일어나는 문제가 있었다. 그래서 상위 컴포넌트에서 state의 변화가 일어날 때 열람 중인 문서의 ID를 받아오는 방식을 사용하려 했으나 애초에 컴포넌트 구조를 잘못 설계해서 열람 중인 문서의 ID를 받아오기도 어려웠다.(설계를 잘하자.. 진짜로...😑)

계획 했던 대략적인 DataFlow

 처음 구현할 때 위의 그림처럼 DataFlow를 구현하려 했으나 설계를 철저하게 하지 못해서인지 어느 순간 보니 컴포넌트 이곳저곳에서  Fetch를 사용하고 있었고 PostList에서 사용 중인 열람 중인 문서의 ID를 breadcrumb에서 사용하기 어려운 구조가 되어버렸다. (진짜 설계를 잘하자... 구현하기 전에 생각을 더 해보고..😣)

 

 결국은 열람중인 문서가 변할 때마다 history API를 이용하여 해당 경로로 새로 route 하는 방식으로 breadcrumb을 갱신했다. (완전 억지로..)

 일단은 완성...🙄

 마감 기한이 있으니 일단 '완성은' 했다. 기능(기본 요구사항 + 에디터 제외 보너스 요구사항 + breadcrumb으로 문서 이동시 사이드바에 결과 반영)은 정상적으로 됐지만 문서를 이동할 때 버벅거림이 심했고 breadcrumb의 갱신은 정말 눈에 보이게 느렸다. 왼쪽 사이드바에 현재 열람 중인 문서를 알 수 있도록 background를 변경했는데 이 또한 문서를 빠르게 바꾸면 '아~ 주 ~ 천 ~ 천~ 히 따라왔다...'.(아오 속 터져)

 

 그리고 기능을 이것저것 추가해서 인지는 모르겠지만 편집기를 이용하여 내용을 작성할 때 '한글만' 마지막 한 글자가 잘려서 보였다. API나 LocalStorage에는 정상적으로 내용이 들어갔지만 이상하게 편집기에서만 마지막 글자가 출력되지 않는 것이다. 이러한 현상이 항상 일어나는 것도 아니었고 간헐적으로 발생했기에 정확한 원인을 찾지 못하였다.

뭐가 문제냐고...

 그래서 이제 뭐함?🤔

 뭐하긴. 코드 리뷰를 바탕으로 코드를 수정했다. 중복되는 코드들을 함수로 빼내고 최대한 원래 계획했던 DataFlow처럼 흘러가게 만들었다. 아직도 더 수정해야 할 문제들이 있고 더 다듬어야 할 코드들이 남아있다. 오늘이 마지막 리뷰 반영일 이지만 앞으로 배울 내용이 더 남은 만큼 지속적으로 해당 내용들을 다듬어 나갈 계획이다. 

 

 아쉬운 점 + 느낀 점.

1. '설계가 중요하다'라는 걸 몸으로 느꼈다. Top-Down 방식으로 구현을 하더라도 어느 정도의 계획은 잘 세워놓고 진행해야 될 것이다. 

 

2. 코드 리뷰의 모든 내용을 제대로 반영하지는 못한 것 같다. 현재 내 결과물의 구조적인 문제도 있을 수 있고 아직 나의 실력이 모자라서 더 효율적인 구조나 방법을 생각하지 못한 이유도 있는 것 같다. 그래서 지속적으로 수정을 이어갈 생각이다. 불필요한 fetch를 제거하고 최상위 컴포넌트인 App 컴포넌트에서 state를 관리하며 state에 변동이 있을 때마다 하위 컴포넌트들로 유동적인 dataflow가 구성되도록 수정해 나갈 것이다.

 

3. 인라인, 코드로 지저분 하게 추가해놨던 CSS를 CSS파일로 따로 정리해야 한다.

 

4. richEditor를 구현하지 못한 건 아쉬움으로 남는다. 솔직히 욕심이 났지만 시간이 모자랐다. 아마 둘째 날, 넷째 날 왼쪽의 문서 리스트를 구현하다가 프로젝트를 2번 갈아엎었는데 그때 시간을 아꼈더라면 완벽한 richEditor는 아니더라도 어느 정도의 기능은 구현할 수 있었을 것 같다.(왜 그랬을 까....)

 

근데 아무튼 후회는 없음😎

 결과물이 완벽하지도 않고 모든 기능을 구현한 건 아니지만 후회는 없다. 진짜 열심히 했고 생각도 많이 했다. 지금 생각해보면 조금 더 열심히 할 수 있었을지도.........? 모르지만... 뭐...(나도 사람이야🤐) 

 다음 프로젝트를 진행할 때는 이번의 경험을 잊지 않고 더 발전하면 된다.

 

마지막으로....

 

 

모르는 게 있거나 어려운 게 있을 때마다

자기 할 일 제쳐두고 먼저 도와주고, 더 알려주려고 노력해 주신

'팀원'분들께 진심으로 감사드립니다.

 

 

👍