Notable은 노션앱을 타게팅하여 구현한 메모장 서비스입니다.
Notable 둘러보기
이슈
API서버는 왓챠의 로토님이 제공해주신 서버를 활용하여 개발을 진행했습니다.
하지만 현재(2022년 1월 11일 기준) API 서버를 종료하신듯 하여 서버요청이 동작하지 않는것을 확인하였습니다.
2022년 2월경 nodejs 와 express 로 API 서버 구현 후 재 연결하도록 리팩토링 예정입니다.
현재 서버 정상 동작합니다!!
프로젝트 상세 소개
사용한 기술 스택
javascript, HTML, SCSS
핵심 기능
문서 목록
•
루트 문서들을 보여준다.
•
루트 문서에 하위 문서가 있는 경우, 해당 루트 문서 아래에 트리 형태로 보여준다.
•
하위 문서 추가 기능문서 우측 + 버튼을 클릭하면 하위 문서로 새 문서를 생성하고 편집화면에 보여준다.
편집기
•
자동 저장 기능저장 버튼을 따로 두지 않고 지속적으로 서버에 저장되도록 한다.
공통
•
History API를 이용해 SPA 형태로 만든다.
•
루트 URL 접속 시엔 편집화면을 보여주지 않고 메인 화면을 보여준다.
•
/documents/{documentId} 로 접속시, 해당 문서의 편집화면을 띄워준다.
추가기능
•
문서 목록을 넘어가는 긴 제목은 생략 부호(...) 를 넣어서 표시한다.
•
현재 편집중인 문서의 제목을 브라우저의 탭에 보여준다.
•
하위 문서 접기/펼치기 기능
◦
문서 좌측 을 클릭하면 하위 문서들을 접었다 펼칠 수 있다.
을 클릭하면 하위 문서들을 접었다 펼칠 수 있다.◦
어떠한 이벤트가 발생되어도 문서들을 접기/펼치기 상태는 유지된다.
•
문서 삭제 기능
◦
문서 목록에서 각 문서 우측에는 휴지통 버튼이 있다.
◦
해당 버튼을 클릭하면 삭제 확인 메시지가 뜨고 확인을 누르면 해당 문서를 삭제하고 업데이트 된 문서 목록을 보여준다.
구현상세
App컴포넌트
•
노션 앱 특성상 모든 문서가 API서버와 동일한 상태를 유지하기 때문에 App컴포넌트는 상태를 갖지 않습니다. (상태를 가질 필요성이 없다고 생각합니다.)
•
모든 네트워크 요청은 App컴포넌트가 담당합니다. 네트워크 요청의 결과인 데이터를 하위 컴포넌트들인 Sidebar와 Editor 컴포넌트에게 전달하고 setState합니다.
•
네트워크 요청의 결과 데이터를 전달할 때는 어떠한 합성도 없이 일관성을 유지하도록 하였습니다.
•
하위 컴포넌트들의 요청의 동작은 App에서 관리합니다.
◦
첫 로딩(initialize) - App이 API서버로부터 rootDocuments 데이터를 받아 Sidebar에 초기화하고 Editor에게 빈 객체(빈 문서)를 초기화합니다.
◦
로고 클릭(clickLogo) - App이 API서버에게 rootDocuments 데이터를 받아 Sidebar의 상태를 변경하고, Editor에게 빈 객체(빈 문서)를 전달합니다.
◦
문서 클릭(clickDocument) - App이 API서버로부터 rootDocuments 데이터를 받아 Sidebar의 상태를 변경하고 Editor에게 클릭한 문서 객체를 전달합니다.
◦
문서 생성(addDocument) - App이 API서버에게 새로운 문서 생성을 요청하고, rootDocuments 데이터를 받아 Sidebar의 상태를 변경하고 Editor에게 생성한 문서 객체를 전달합니다.
◦
문서 수정(updateDocument) - App이 API서버에게 문서 수정을 요청하고, rootDocuments 데이터를 받아 Sidebar의 상태를 변경합니다.
◦
문서 삭제(deleteDocument) - App이 API서버에게 문서 삭제를 요청하고, rootDocuments 데이터를 받아 Sidebar의 상태를 변경하고, Editor에게 빈 객체(빈 문서)를 전달합니다.
•
라우터 이벤트 처리는 App에서 관리합니다.
Sidebar 컴포넌트
•
Sidebar컴포넌트 상태는 아래와 같습니다.
◦
루트문서(rootDocuments)
◦
선택된 문서(selectedDocument)
◦
토글 된(펼치기 된) 문서들의 아이디 배열(toggledDocumentIds)
•
Sidebar 컴포넌트에서 App에게 처리요청은 아래와 같습니다.
◦
로고 클릭(clickLogo)
◦
문서 클릭(clickDocument)
◦
문서 생성(addDocument)
◦
문서 삭제(deleteDocument)
editor 컴포넌트
•
editor 컴포넌트는 현재문서(currDocument) 상태 1개만 갖습니다.
•
editor 컴포넌트는 APP에게 문서 수정(updateDocument) 요청을 합니다.
가장 고민이 많았던 부분
앱의 특성상 API요청이후 리렌더링 되는 작업이 많습니다. 이에 따라 문서 접기/펼치기 정보를 유지하기 위해 고민을 하게 되었고 자연스럽게 컴포넌트들의 책임과 상태관리에 대해 집중했습니다.
새로 배우게된 점
노션클로닝 프로젝트를 하면서 상위 컴포넌트와 하위 컴포넌트의 책임에 대해 깊게 고민했습니다.
App은 네트워크 요청하고 하위 컴포넌트들에게 원본데이터를 전달하도록 했습니다.
하위 컴포넌트들인 Sidebar와 Editor는 원본 데이터를 받아서 렌더링하고 사용자 요청을 App에게 요청합니다.
Sidebar와 Editor 컴포넌트가 다른곳에서도 재사용될 수 있도록 추상화하면서 작성했습니다.
이슈
하지만 현재(2022년 1월 11일 기준) API 서버를 종료하신듯 하여 서버요청이 동작하지 않는것을 확인하였습니다.
리팩토링 계획 (2022년 2월 중순 예정)
•
nodeJS + express + mongoDB + mongoose 조합으로 api서버 구축 후 API 재연결
•
store 도입
◦
네트워크 요청을 스토어에서 관리하기
◦
컴포넌트에서 필요한 데이터 처리 메서드 제공하기
◦
컴포넌트에서는 데이터가 필요하면 store에서 제공해주는 메서드를 사용하기
◦
store에게 데이터를 요청했을 때 데이터가 없다면 네트워크 요청하여 데이터를 갱신하기
•
상위 컴포넌트와 하위 컴포넌트의 책임을 나누기
◦
하위 컴포넌트는 단순히 데이터를 전달받아 보여주는 역할(상위 컴포넌트에서 데이터를 내려주는 방식)
◦
네트워크 요청은 store에게 위임하기
◦
데이터관련 요청을 하는 컴포넌트는 콜백을 상위에서 주입받지 않고 해당 컴포넌트가 store에서 제공하는 메서드를 사용하여 즉각 요청하기
