Notion cloning(11.7 ~ 11.16) 회고

노션 클로닝

   

  약 10일 정도의 시간을 가지고 노션의 기본기능을 구현하는 개인 프로젝트를 진행했다. 우선 기본적인 요구 사항들은 다음과 같다.

 

1. 화면 좌측에 Root Documents를 불러오는 API를 통해 root Documents를 렌더링 합니다.
2. Root Documents를 클릭하면 오른쪽 편집기 영역에 해당 Documents의 Content를 렌더링 합니다.
3. 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
4. Document Tree에서 각 Document 우측에는 + 버튼이 있고, 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
5. 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
6. History API를 이용해 SPA형태로 만듭니다.
7. 루트 URL 접속 시엔 별다른 편집기 선택이 안된 상태입니다. /documents/{documentId}로 접속시, 해당 Document Content를 불러와 편집기에 로딩합니다.

---

개인 프로젝트 기간 초반

 

 

  우선 위 요구사항을 이해했지만, 막상 구조를 어떻게 컴포넌트들을 구성하면 좋을지를 생각했을때, 막막하기만 했다. 그리고 기존의 강의들을 다시 들어야 겠다는 생각이 들어 10일의 기간중에 3일 동안 기존의 강의들을 다시 듣기 시작했다. 사실 2번째 과제였던 TODOLIST도 겨우 만들었기 때문에, 조금은 벅차다는 생각이 들었었다. 그치만 기존 강의에 힌트가 충분히 주워졌을 것이라고 생각했고 TodoList를 만드는 강의, 그리고 postLists 즉, <li>를 클릭하면 편집기로 넘어가서 내용을 입력할 수 있는 강의들을 들었다. 그 결과 어떻게 하면 좋을지에 대한 감이 조금씩 잡혀가고 있었다. 그리고 기존에 TodoList 과제를 하면서 API를 활용하거나 컴포넌트 들간의 동작을 어떻게 연결시켜야 할 지에 대한 감은 조금씩 생겨나고 있었다.

 

---

코드 구현 시작

 

노션 클로닝 컴포넌트 설계

 

  기존 강의를 많이 참고 했고, App을 통해 하위 컴포넌트들에게 필요한 데이터들을 전달해주고 컴포넌트들 간의 연결은 메서드를 전달하여 컴포넌트들 간의 연결을 해야겠다고 생각하고 코드를 구현하기 시작했다. 처음에는 뭔가 코드가 술술(?) 작성되는 듯한 기분이 들어 정말 재미있게 코드를 작성했다. 그런데 점점 컴포넌트들이 하나 둘 추가되기 시작하면서 분명 내가 작성한 코드임에도 구조가 헷갈리기 시작했고 결국 중간에 고민하고 생각하는 시간이 늘어나기 시작했다.

 

  특히 코드를 구현하면서 id와 같은 데이터를 어느 컴포넌트에 넘겨주어야 하는지 또 어디서 부터 넘겨주어야 효율적인 것인지 어디서 fetch() GET을 해야하는지, 어디서 POST, DELETE를 해야 하는지와 같은 데이터를 주고 받는 일련의 과정에서 혼란이 굉장히 많았다. 그래서 코드를 작성하는 와중에 점점 더 헷갈리게 되는 경우도 발생하여 다시 처음부터 코드를 3번이나 작성했다.(...이때는 정말...휴..)

 

  그리고 점점 시간은 흘러갔고, 과제를 제출해야 하는 시간이 점점 다가오자 더 이상 고민만 하고 있을 수 없다는 생각에 과제를 구현하는것을 최우선 목표로 두고 코드를 구현했다. 

 

---

노션 클로닝 구현

 

 

 

GitHub - WooDaeHyun/FEDC3-4_Project_Notion_VanillaJS

 

  위의 기본 요구 사항 중 History API 부분을 제외하고는 나름대로 최대한 열심히 구현을 하기 위해 노력했고 100% 만족하거나 효율적인 코드들은 아니지만 어느 정도 구현이 된 것 같다. 하지만 과제를 수행하면서 아쉬운 점들도 굉장히 많았다.

 

1. Commit을 제대로 하지 않았다. 나의 불찰이고 굉장히 후회하고 있는 부분 중 하나이다. 코드를 작성하면서 처음에는 commit을 하면서 했으나 점점 코드들을 지웠다 작성했다를 반복했고 수정되는 내용도 많았고 틀린 코드들도 많다는 생각에 부끄러워서 그랬는지,,, commit을 나중에 해야겠다고 미뤄왔던것 같다. 그리고 이런 생각이 나중에는 코드를 수정하는데 비교 대상이 없어 시간이 더 많이 걸렸고, 그 동안 내가 코드를 구현하는 과정들을 기록하지 못했다. 지금 생각하면 10일 전으로 되돌리고 싶으나, 그럴수는 없으니 앞으로 최대한 commit 컨벤션도 지켜가며 git을 활용해야 겠다는 생각이 많이 들었다.
2. 시간상의 이유로 History API를 추가하지 못했다. ( 이 부분은 리뷰 기간에 다시 공부하여 추가해 볼 예정이다. )
3. 첫 페이지를 열었을 때, 아무런 document도 선택하지 않은 상태에서 보여지는 편집기에 title이나 content를 넣으면 아무런 예외 처리 없이 값이 들어가고 404Error를 발생시키는데, 이 부분을 처리하지 못했다. (처리하고자 시도는 했으나 문제가 해결되지 않아 우선 넘어갔다.)
4. 컴포넌트들을 잘못 구성하여 필요한 하위 컴포넌트에서 상위 컴포넌트로 id 값을 다시 전달하거나, 메서드들을 호출하기 위해 커스텀 이벤트를 남발했다. 

 

 

  반대로 이번에 노션 클로닝을 진행하면서 배운 부분들도 굉장히 많았다.

 

1. 컴포넌트를 설계하는 방법에 대해서 조금씩 감이 잡혀가기 시작했다. 처음에는 todoList를 만드는것도 굉장히 어렵고 복잡한 것이라고만 생각했는데 단 10일만에 todoList의 기본적인 기능을 구현하는것이 이제는 그렇게 복잡한 일이 아닌것처럼 느껴졌다.
2. API를 통해 데이터를 받거나 생성하거나 삭제하는것이 익숙해 졌다. 그와 더불어 async await에 대한 활용도 조금 나아진것 같다.
3. HTML 태그들을 어떻게 구성하면 좋은지에 대한 감이 왔다. 기존에는 HTML 태그를 단순히 개념적으로만 이해했다면 이제는 실제로 어떻게 사용되는지에 대해서 알게 되었다.
4. 이벤트 핸들러를 등록하고 또 이벤트 발생시 이를 활용하는것이 익숙해졌다. 불과 10일 전만 하더라도 전혀 알지 못해 쩔쩔매고 있었는데 이제는 자연스럽게 어디에 이벤트를 넣어주면 좋을지를 고민하고 있는 내가 된 것 같다.
5. 모듈화를 통해서 export하고 import하는 과정들이 익숙해졌다. 
6. 하나의 컴포넌트에서 어떤식으로 코드를 구성하면 좋은지에 대한 감도 생겼다.
7. CSS에 대한 걱정이 조금은 줄어들었다. 아직 많이 부족하지만, 정말 좋은 조원을 만나 CSS에 대한 전반적인 접근방법과 디테일한 내용들에 대해서 설명들을 수 있었고 이를 통해서 어떻게 접근해야 하는지 조금은 감을 잡는 계기가 된 것 같다.
   (다연아 고맙다!!!)

---

과제를 마무리 하며

 

 

  예전에 어렸을때 한 번 경험해 본 것인데, 조금은 개발과 관련이 없는 이야기이지만 우리 집에서는 '한자'교육을 굉장히 엄하게 시켰던 적이 있다. 지금 생각해보면 이유는 모르겠으나 굉장히 한자 급수에 진심이었다. 그 당시 제일 어렵기로 소문난 곳이 '한자어문회'에서 인증하는 시험이었고 지금은 3급이지만 그 당시에는 4급부터 국가공인으로 인정을 받았었다. 당시에 초등학생이었던 나에게는 꽤나 어려웠었던 것 같다. 그리고 4급을 처음 도전했을때 당당하게 떨어졌다... ㅎ 그리고 거기서 우리 부모님의 선택은 4급을 다시 재도전하는것이 아니라 3급을 도전하라고 권유하셨고 3급을 공부했다. 4급을 공부할 때와 마찬가지로 3급은 정말 너무 하기 싫어했었던 기억이 있다. 근데 정말 신기한것은 3급 공부를 하다보니 4급이 우습게 느껴졌었다. 속된 말로 정말 정답이 바로 바로 보일 정도로 쉽게 느껴졌던 경험을 한 적이 있다. 물론 그 당시에 4급은 따고, 3급을 따지는 못했다. ( cs지식과 별개로 조금 자랑해 보자면 ㅎㅎㅎㅎㅎ 지금은 한자 2급이다. 부모님 감사합니다!!!) 무튼 이번에도 공부를 하면서 이와 비슷한 느낌을 받았던것 같다. 굉장히 어렵다고 생각한 것들이 이제는 조금 쉽게 느껴지는걸로 바뀌고 새로운 어려운 것들이 생겨났다. 뭐라고 정확하게 표현할 수는 없지만 이러한 것들이 성장하고 있다는 증거가 아닐까 생각된다. 기존에 어렵게 느껴졌던 것들이 이제는 쉽게 느껴지고, 새로운 어려운 것들이 등장하고를 반복하다 보면 나를 기준으로 쉬워지는 영역이 넓어지고 있는 것이기 때문이다. 그래서 이번 노션 클로닝 프로젝트는 나에게 엄청난 공부가 되었다고 확신한다. 물론 어려워서 골골 거리기는 했지만,,,ㅎㅎ 또 이게 나중에는 '왜 어려워 했지?'를 속으로 외치면서 과거를 회상하는 날이 올것이라고 믿는다!!!