[23.06.27~23.07.06] 노션 클로닝 회고

이번 23.06.27~23.07.06 약 2주간 노션 클로닝 프로젝트를 진행했습니다.

먼저,
기본 요구사항

• 바닐라 JS만을 이용해 노션을 클로닝
• 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링
• Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링
• 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링
• 각 Document 우측 + 클릭시 클릭한 Document의 하위 Document로 새 Document 생성 & 편집 화면으로 이동
• Document Save API를 이용해 지속적으로 서버에 저장
• History API를 이용해 SPA 형태로 제작

보너스 요구사항

• div와 contentEditable을 조합해서 좀 더 Rich한 에디터 제작
• 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링
• 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가

기본 요구사항은 전부 달성했고, 보너스 요구 사항도 제일 마지막 요구사항은 제외하고 전부 구현했습니다.

구현하며 어려움이 있었는데,
1. Class를 이용하며 구현하려고했기 때문에 기본적인 사용법을 헷갈렸다.
2. content-type를 적지않아 push가 되지 않는 문제 발생

postman을 이용하면 잘 되기에 문제가 없는줄 알았는데 Hidden 항목으로 숨어있어서 따로 지정해주지 않아도 되었던것이다..

멘토님의 도움을 통해 문제를 알아냈고, 재미있는건 다른 팀원분도 같은 문제를 겪어 고생하고 있었는데 이를 해결하는데 도움을 줄 수 있었다.
3. 주소가 localhost:3000일때 새로고침하면 문제가 없는데, /post/00000쪽으로 이동한 뒤 새로고침을 하게되면 css가 안나온다.. -> 절대경로, 상대경로 문제
4. 라우트 처리를 안해주면 /post/00000쪽에서 새로고침을 했을 때 title과 content가 나타나지 않는다.
5. vercel로 배포하고나니 라우팅이 막힌다. -> vercel spa routing이라 검색하면 해결법이 나오는데 링크를 참고해 해결했다.

위의 해결방법을 통해 모든 문제를 해결했습니다.
노션 클로닝을 하며 제일 힘들었던 것은 욕심이난다는 점이었습니다.
구현을 하며 새로운것을 추가했으면 좋겠다는 욕심이 저를 사로잡고, 저는 그 욕심에 무리하며 추가 기능을 추가하려고하는 순환이 있었습니다. 그렇기 때문에 제가 해오던 원래의 루틴을 잃었고 생활 패턴이 망가지며 몸이 안좋아지는 악순환을 겪게 되었는데, 매니저님의 Done is better than perfect라는 말에 정신을 차렸습니다.
기능만 많이 추가한 오류 가득한 코드보단 요구사항은 제대로 마친 기능은 적더라도 제대로된 작동을 하는 코드가 훨씬 중요하다는 말이 제 머리를 강타해 욕심을 거두게 되었습니다. 시간을 들여 천천히 업그레이드 하는 방식으로 진행하기로 저와 약속하고 마감을 했습니다.

제가 노션을 추가로 작업한다면
1. 글자 편집기능 추가(bold, 색, 하이라이트 등)
2. 검색기능
3. 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능

이 세가지를 추가하고싶고
2번은 제가 블로그를 만드는 중인데, 블로그에도 적용을 해야하는 부분이기 때문에 노션에서 연습겸 꼭 해봐야 할 것 같다고 생각됩니다.

마치며..
이번 프로젝트에선 최소 사항은 반드시 완벽하게 해결하고 그 뒤는 욕심나도 건강을 챙기며 진행하자!라는 교훈을 얻었습니다.
다음 프로젝트는 팀프로젝트이지만 이 교훈을 적절하게 적용해보며 진행해보도록 노력하겠습니다.

p.s.
귀여운 데브코스분들