[TIL🔥] Day16~20(5주차 노션 클론 코딩)

Introduction

노션 클론 코딩 개인 프로젝트에 너무 힘을 쏟은 나머지 5주차 TIL을 몰아서 오늘 쓰는 나 반성해~🥲
저번주 월화수목금은 진짜 머릿속에 노션 생각 뿐이었다...
하나를 해결하면 또 다른 하나에 부딪히고...좀만 코드를 고치면 바로 오류가 뜨고...
그래도 일단 기본 구현 사항 구현은 성공했다. 코드가 매우 지저분하고 맘에 들진않지만 그래도 바닐라 JS에 조금은 익숙해졌다. 그리고 열심히 몰입한 나 자신에게도 심심한 위로의 말을 건네고 싶다.
이번 TIL은 프로젝트를 진행하며 어렵고 막혔던 부분을 정리함으로써 문제를 짚어보도록 하겠다.

👩🏻‍💻 노션 클론 코딩 프로젝트

☑ 기본 구현 사항

1. 화면 좌측에 문서 렌더링
   • 문서는 트리 구조로 루트 문서는 하위 문서를 가짐
2. 각 문서는 추가와 삭제 기능을 가짐
   • 추가 시 하위 문서가 추가됨
   • 삭제 시 문서가 삭제되고, 하위 문서는 루트 문서가 됨
3. 화면 우측에는 편집기가 있으며, 편집기에 입력 내용은 자동으로 서버에 저장됨
4. History API를 이용해 SPA 형태로 구현
   • 기본은 문서가 선택되지 않은 상태
   • 문서 id를 가진 url로 접속 시 해당 문서를 편집기에 로딩

🌴 Tree View (menu)

노션을 보면 루트 문서와 하위 문서들로 메뉴 구성이 가능한 것을 확인할 수 있다. 이러한 메뉴 구성은 ul과 li 태그의 조합으로 생성할 수 있다.

<ul>
    <li>루트 문서1</li>
    <li>루트 문서2</li>
    <ul>
    	<li>하위 문서 1</li>
        <li>하위 문서 2</li>
    </ul>
</ul>

계속해서 반복되는 구조이므로 map함수와 재귀 함수를 통해 구현해보았다.
처음에는 map 말고 forEach를 이용해 구현하려했으나 계속해서 undefined가 출력되었다.
내가 map과 forEach의 차이를 아직 정확히 이해하지 못했던 탓이었다.
map의 경우 수정된 새로운 배열을 반환하는 반면에 forEach는 어떠한 값도 반환하지않는다. 그래서 push로 새로운 변수에 추가해줘야만 새로운 배열을 얻어낼 수 있다.
map()과 forEach()

여러번의 시도 끝에 Tree View를 구현해내는데 성공했다.

// tree menu 만들기 : map + 재귀
  const createTreeView = (document) => {
    return document
      .map(
        ({ id, title, documents }) => `
      <li data-id=${id} class="documentItem">${
          documents.length > 0
            ? `<span class="hasChild">${title}</span>`
            : `${title}`
        }
      <button class="createDoc"><i class="fas fa-folder-plus"></i></button>
      <button class="removeDoc"><i class="fas fa-trash-alt"></i></button>
      ${
        documents.length > 0
          ? `<ul class="hasChildUl">${createTreeView(documents)}</ul>`
          : ""
      }
      </li>`
      )
      .join("");
  };

🚀 추가와 삭제 기능

추가와 삭제 기능 같은 경우에는 TodoApp을 만들며 연습해 본 적이 있어 나름 쉽게 구현했던 것 같다.
이벤트 위임을 사용하여 className이 일치하는 경우, 함수에 id값을 넘겨버리는 방법을 사용했다.
함수의 경우는 DocumentsPage라는 상위 컴포넌트에서 정의해주었다.

구현 코드는 아래와 같다.

$documentList.addEventListener("click", (e) => {
    const $li = e.target.closest("li");
    if ($li) {
      const { id } = $li.dataset;
      const $button = e.target.closest("button");
      if (e.target.className === "documentItem") {
        onSelect(id);
      } else if ($button.className === "createDoc") {
        onCreate(id);
      } else if ($button.className === "removeDoc") {
        onRemove(id);
      }
    }
  });

또한, e.target.dataset, e.target.closest 등 이벤트가 발생한 타겟의 속성도 완벽히 공부해 잘 활용해야함을 느꼈다.

😢 컴포넌트 구조 & state 관리

프로젝트를 진행하면서 가장 어려웠던 것은 컴포넌트 구조로 여러 기능들을 쪼개는 과정이었다.
시간은 한정되어있고, 머릿속에 이런식으로 구성해야겠다 이런 생각만 가지고 코딩에 들어가니 구조가 매우 비효율적이었다...

원래 처음 생각은 DocumentList 컴포넌트(=트리 구조의 document 리스트가 들어있음)를 DocumentsPage(=좌측 navBar) 컴포넌트에 불러오고,
Editor(=편집기) 컴포넌트를 DocumentEditPage(=우측 편집기 페이지)에 불러와
App 컴포넌트에서 DocumentsPage, DocumentEditPage 컴포넌트를 관리하는 것이 목적이었다.

그런데 코딩을 하다보니, DocumentEditPage의 데이터가 변경될 때마다 DocumentsPage를 재렌더링해야하다보니 DocumentsPage 컴포넌트를 DocumentEditPage에서 관리할 수 밖에 없는 그런 구조가 되어버렸다...

뭔가 많은 컴포넌트들이 너무 얽히고 얽혀 이렇게 하는게 맞나 싶은 생각이 계속 들었다...
시간이 한정되어있다보니 일단 구현에만 초점을 맞춰 어떻게든 구현해내긴 했는데 만족스럽지 않았다...😵

그리고 아직 state를 관리하는 것도 확실히 이해하지못한 것 같다...
계속해서 프로젝트를 리팩토링하는 과정을 거쳐야겠다...!!!🔥

💫 히스토리 API 이용해 SPA 형태로 구현

SPA 형태의 경우 모든 정적 리소스를 최초에 한번 다운로드하고, AJAX를 이용해 페이지 갱신에 필요한 데이터만 받아 변경된 부분만 재렌더링하는 것을 말한다.
이러한 경우 전체적인 트래픽이 감소하고 사용자 경험을 향상시킬 수 있지만, url이 변경되지않으므로 히스토리 관리(뒤로 가기, 앞으로 가기 등)가 어렵다.

이를 해결해주는 것이 바로 history API이다. history의 pushState 메서드는 주소창의 url을 변경하고 url을 history에 추가한다. replaceState 메서드의 경우는 현재의 history를 수정해 원하는 url로 업데이트해준다.

이번 프로젝트에서는 특정 document를 선택했을 경우와 새로운 문서를 생성했을 경우
push를 이용하여 url을 현재 document의 id로 변경해주는 코드를 작성하였다.

onSelect: async (id) => {
      push(`/documents/${id}`);
    },
onCreate: async (id) => {
     const createdDoc = await request(`/documents`, {
        method: "POST",
        body: JSON.stringify({
          title: "새로운 문서",
          parent: id,
        }),
      });
      push(`/documents/${createdDoc.id}`);
      this.render();
    }

여기서 주의할 점은 pushState와 replaceState 메서드는 주소창의 url을 변경할 뿐 HTTP 요청이 서버로 전송되지는 않는다. 따라서 request를 이용해 서버에 요청을 보낸 후 받은 데이터를 이용해 재렌더링해주는 과정이 필요하다.

DocumentEditPage에서 문서의 타이틀을 변경하고 그 변경한 내용으로 DocumentsPage가 재렌더링되어 변경된 타이틀이 적용되어야하는데 위의 과정을 제대로 안해줘서 쩔쩔맨 기억이 난다.

사실 setState를 이용해 렌더링하는 과정을 한번에 관리하는 것이 좋을 것 같은데, 아직 컴포넌트가 유기적으로 연결되어있는 구조를 정확히 파악하지 못해서 적용하지못했다...
강의를 복습하며 다시 처음부터 시작해봐야겠다!!!

💧 개선해야할 점

1. DocumentList Toggle 관련
- 열리는 토글은 정상 동작하나, 페이지 추가 또는 삭제 시 토글이 다시 닫히는 현상 발생

2. 삭제 버튼 기능 관련
- 자식 document 삭제 시 해당 document의 하위 document가 삭제된 document의 위치로 가지않고, 루트 document로 가는 현상
- 현재 선택된 문서 삭제 시 editor가 없어지지않고 남아있는 현상(=/documents/로 렌더링이 안되는 문제)

3. Document onSelect 관련
- 이미 선택되어있는 document를 또 선택 시 콘솔창에 오류 발생, 기능은 정상 동작

😖 아직 미완성된 노션 구경하기

🙇🏻‍♀️ 첫 개인 프로젝트 소감...

내가 알고있다고 생각했던 부분도 직접 구현해보니 진정으로 알고있던게 아니었고...
생각보다 시간은 빨리 흘러가고 생각지도 못한 부분에서 많은 오류를 경험했다...
그래도 바닐라 JS에 조금은 익숙해졌고, 성장해나감을 느낄 수 있었다. 아직 갈 길이 멀긴하지만...ㅠㅠ
또한, 이번 프로젝트는 작동하는 코드를 만들기에 집중하긴 했지만, 코드는 쉽게 지저분해졌고 변수명 나중에 짜야지라는 생각도 이번 프로젝트를 계기로 버리기로 했다.
그리고 설계 과정이 정말 중요함을 느꼈다. 아 이렇게 이렇게 하면 되겠지라고 생각하고 바로 코딩을 시작했던 것이 문제였다. 다음 프로젝트 때는 진짜 세세한 부분까지 정확히 알고 설계한 후에 코딩을 시작해야겠다.
코딩하면서 길을 잃지 않도록...🥲
마지막으로 꼭 리팩토링하기!!!!가 나의 다음 목표이다!!!🔥🔥🔥