Notion Clone
4주차에서 5주차는 Notion Clone 프로젝트를 진행했다. Notion Clone이 시작될 때, 처음으로 오프라인으로 수업이 진행되었다. 첫째, 둘째날에 강남으로 가서 오프라인 교육장에서 교육생 모두가 Notion Clone 프로젝트를 시작하였다.
🎈 4주차 회고
첫 시작부터 힘들었다.. 노션을 보면 왼쪽에 사이드바가 있는데 Document들이 나열되어있고 Document안에 자식 Document가 있는걸 볼 수 있다. (토글 기능을 통해 자식 Document를 펼쳐서 열람할 수 있다.) 이 모든 Documents를 트리 구조로 화면에 그리는 것부터 큰 난관이었다.
처음 생각했던 방법은 토글 버튼을 눌렀을 때, 자식 요소가 있으면 자식 요소를 나타내고 없다면 "하위 페이지 없음"을 표시하려고 했다. 필요할 때마다 데이터를 가져오는 방법으로 한 개의 Document에서 그 자식 요소를 조회하는 것을 쉬웠다. 하지만 하나의 root Document의 모든 자식을 조회하고 또 다른 root Document의 자식을 조회할 때, undefined 오류가 발생했는데 이는 조회할 때마다, 상태값을 변경하는 식으로 코드를 짰는데 마지막으로 조회한 상태에서 root Document를 찾으려고 하니 당연히 undefined 오류가 발생하는 것이다.
이를 해결하기 위해, 조회하고 나서 항상 다시 root로 상태를 변경해야할 것 같다. 하지만 이 방법으로 해결하지 못하여 처음에 데이터를 다 가져오고 화면에 재귀 함수를 통해 그린 후, root Document를 제외한 나머지 document들은 가려놓았다. 그 방법으로 하니, 어느 document를 조회했는지 신경쓸 필요가 없었고, Toggle 버튼을 통해서 이미 그려놓은 자식 요소를 화면에 보여주기만 하면 돼서 훨씬 간편하게 코드를 짤 수 있었다.
🎈 5주차 회고
5주차를 시작하면서 처음부터 설계를 잘못했다는 것을 깨달았다.. 지금까지 들었던 강의들이 Bottom-Up 형태로 코드를 짰었다. 그래서 이번 Notion Clone 프로젝트도 Bottom-Up 형태로 짜다 보니 새로운 기능을 추가하거나 데이터를 관리할 때마다 fetch를 통해 API를 가져오는 형태가 되어버렸다. 자고로 데이터는 최상단 컴포넌트에서 관리하여 하위 컴포넌트로 보내는 것이 옳다고 생각했지만, 어떻게든 구현만은 해보자라는 식으로 덕지덕지 코드를 붙여가며 개발을 하다보니 내 생각과 다르게 프로젝트가 흘러가버렸다.
끝으로..
Notion Clone을 하면서 처음 설계가 중요한 것을 깨달았다. 어떤 컴포넌트가 있고 어느 기능을 구현할 것인지 구체적으로 다 정하면 Bottom-Up방식으로 개발하는 것이 좋지만, 디테일하게 다 설계하지 못하면 Top-Down방식으로 하나하나 구현한 다음 컴포넌트를 분리하는 것이 좋을 것 같다고 느꼈다.
앞으로 프로젝트를 시작할 때, 설계부터 잘 만든 후, 변동 사항에서 손 쉽게 로직을 변경할 수 있는 유도리있는 코드를 짜보도록 노력해야겠다.
