FEDC3-4-project-notion-vanillaJS: A JavaScript repository from WooDaeHyun

📌 과제 설명

<기본 요구 사항>

[o] 화면 좌측에 Root Documents를 불러오는 API를 통해 root Documents를 렌더링합니다.

[o] Root Documents를 클릭하면 오른쪽 편집기 영역에 해당 Documents의 Content를 렌더링 합니다.

[o] 해당 Root Document에 하위 Document가 있는 경우 , 해당 Document 아래에 트리 형태로 렌더링 합니다.

[o] Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면 , 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.

[o] 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.

[x] History API를 이용해 SPA형태로 만듭니다.

[o] 루트 URL 접속 시엔 별다른 편집기 선택이 안된 상태입니다. /documents/{documentId} 로 접속시 , 해당 Document content를 불러와 편집기에 로딩합니다.

👩‍💻 요구 사항과 구현 내용

2022-11-17.8.24.50.mov

부족했던 점

코드를 작성하면서 삭제와 수정을 반복하여 commit 내역들이 깔끔하게 보이지 않을것 같다는 걱정에 중간 중간 commit을 하지 않고 그냥 코드를 작성 했습니다. 하지만 나중에는 오히려 코드를 수정하는데 비교 대상이 없어 수정하는데 더 많은 시간이 걸렸던것 같고, 그 동안의 과정들을 기록하지 못했던것 같습니다. 다음 과제부터는 commit 컨벤션을 지켜가며 최대한 git을 활용해 보고자 합니다.
시간상의 이유로 Hitory API를 추가하지 못했습니다. 리뷰기간에 다시 공부하여 추가해 볼 예정입니다.
첫 페이지가 열렸을 때, 아무런 document도 선택하지 않은 상태에서 보여지는 편집기에 title이나 content를 넣으면 아무런 예외 처리 없이 값이 들어가고 404에러를 발생시키는데, 이 부분을 처리하지 못했습니다.
컴포넌트들을 잘못 구성하여 필요한 하위 컴포넌트에서 상위 컴포넌트로 id 값을 다시 전달하기 위해 커스텀 이벤트를 남발해서 작성한 것 같습니다.

위와 같은 컴포넌트를 구성하고 싶었으나 코드를 구현해 나갈수록 컴포넌트의 의미와 다르게 컴포넌트들 간의 의존성이 높아지는 코드를 구현한 것 같습니다.

✅ PR 포인트 & 궁금한 점

컴포넌트 방식으로 코드를 작성할 때 상위 컴포넌트 또는 하위 컴포넌트에서 id와 같은 필요한 데이터를 주고 받을 때, 코드를 구현하기 전 설계를 하는 과정에서부터 어디에 어떤 데이터가 필요하고 어떻게 전달하고 주고 받을지 미리 다 정리를 한 후에 코드를 작성하는것이 일반적인 방법인가요?? 과제를 수행하면서 가장 어려웠던 부분이 스코프 때문에 원하는 값을 컴포넌트들 끼리 넘겨주지 못해서 막히는 경우가 많았습니다.