[VanillaJS] Notion Clone 프로젝트

❗❗  데브코스 21~25일차 (08.30~09.03)

 

👨‍💻 Notion Clone 프로젝트

5주차는 VanillaJS 개인 프로젝트로 진행되었다.

지난번에 실습한 "자동 저장 편집기 만들기"를 활용하여 Notion clone 과제였다.

기본 요구 사항은 다음과 같다.

 

✏️ 기본 요구사항

바닐라 JS만을 이용해 노션을 클로닝합니다.

 

기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

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

 

✏️ 추가 개발

• 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
• 삭제 버튼을 구현하여 삭제 이벤트 발생시 편집 컴포넌트 안보이게 구성
• github page를 이용하여 배포

 

📣중요 컴포넌트 구성도 

• App.js
  • NotionPage.js (li_click, remove, create 이벤트 발생)
    • NotionList.js (documents 목록 렌더링)
  •  NotionEditPage.js (하단 목록의 li_click 이벤트 발생
    • Editor.js (편집 기능)

📣기본 데이터 흐름 설명

1. App에서 라우팅에 따라 목록표시(NotionPage),  편집기능(NotionEditPage)을 렌더링해줍니다.
2. NotionPage에서 서버에서 받아온 데이터를 NotionList로 넘겨 화면 렌더링을 해줍니다.
3. Li click, 추가 button, 삭제 button 이벤트 발생 시 해당 id 값을 찾아 NotionEditPage로 id 값을 넘긴다.
   3-1. 초기화면, 삭제 이벤트 시에는 Editor 페이지를 숨깁니다.
4. NotionEditPage 에선 받아온 id 값을 기준으로 서버에 요청하여 해당 정보를 Editor로 넘겨줍니다.
5. Editor에서 해당 정보를 기준으로 수정하고 수정된 정보를 1.5초 간격으로 서버에 요청을 보내 업데이트합니다.
6. 해당 document 편집 시, document에 포함된 목록들이 하단에 나타나고 클릭 시, 해당 컴포넌트 edit로 넘어가게 됩니다.

 

✍ 개인 소감

이번 프로젝트를 통해 어떤 순서로 프로젝트 개발을 수행해야 하는지 학습 할 수 있었다.
큰 문제로부터 시작하여 작은 문제로 나누는 것이 정말 중요하다고 깨달았다.

또한, state와 setState를 통해 데이터 관리에 대해서 명확하게 이해할 수 있었다.
서로 독립된 컴포넌트 구성으로 작성하되, 필요한 정보는 setState를 통해 초기화하고,
렌더링을 해주면 된다. 이 과정은 react에서 setState로 값을 바꾸고 해당 값을 통해
화면이 렌더링 되는 과정에 똑같아서 금방 이해할 수 있었다. 개발할 수록  VanillaJS의 중요성을 깨닫는 것 같다.

그리고 fetch API 통신 과정에서 비동기 흐름 처리에 대해서도 학습할 수 있었다.
API 통신이나 렌더링 과정에서 비동기 처리가 정상적으로 처리해주지 않았다면 값이 꼬이거나,
화면 렌더링이 꼬이는 과정을 통해 비동기를 조금 더 이해할 수 있었다.

그 외에 개발 로직, 이벤트 처리, dom 조작 등 많은 것을 학습할 수 있는 기회였다.!
데브코스 활동 이후 가장 집중력 있게 학습한 것 같다. 그만큼 재밌었고, 배울 점이 많았다.

아쉬운 점 : 시간이 부족하여 디자인을 고려하지 못해 notion처럼 꾸미지 못했다.

 

배포 주소 

https://minsu-zip.github.io/w4-Project_Notion_VanillaJS/

 

전체 코드는 다음의 주소에서 확인 할 수 있습니다.

https://github.com/minsu-zip/w4-Project_Notion_VanillaJS/tree/1a/%234_minsu-zip_working