데브코스 - 첫번째 프로젝트 - 노션클로닝 - 6일차

📌 프로젝트 설명

바닐라 JS만을 이용해 📄노션을 클로닝📄합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

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

기본 요구사항

해당 프로젝트는 크게 문서 목록과 편집기 두가지 부분으로 구성되어있다.

• 문서 목록
  • 루트 문서들을 보여준다.
  • 루트 문서에 하위 문서가 있는 경우, 해당 루트 문서 아래에 트리 형태로 보여준다.
  • 하위 문서 추가 기능
    문서 우측 + 버튼을 클릭하면 하위 문서로 새 문서를 생성하고 편집화면에 보여준다.
    
• 편집기
  • 자동 저장 기능
    저장 버튼을 따로 두지 않고 지속적으로 서버에 저장되도록 한다.
• 공통
  • History API를 이용해 SPA 형태로 만든다.
  • 루트 URL 접속 시엔 편집화면을 보여주지 않고 메인 화면을 보여준다.
  • /documents/{documentId} 로 접속시, 해당 문서의 편집화면을 띄워준다.

📍목표

데브코스 첫번째 프로젝트인 📄노션을 클로닝 프로젝트📄 이다.
JS만을 이용하여, Fetch API를 이용해 API 서버의 데이터를 주고 받으면서, History API를 이용해 SPA 형태로 만들면서 노션과 비슷한 편집기를 구현하면서 JS의 기본기를 다진다.

🏃‍6일차🏃‍♂️

📷 UI

💻구현한것💻

• 🗑휴지통
  • 우측 하단에 휴지통 비우기 를 누르면 휴지통이 비워진다.
• 편집기
  • 편집기 우측하단 에 🏠home 버튼을 누르면 메인화면으로 간다.
  • 첫 화면 구성
• 4차 CSS수정 (페이지목록 && 편집기 && 휴지통 디테일)
• 파비콘 추가

🔥느낀점

css 작업은 언제나 어렵다...

사용자의 편의성을 고려하여 설계하는 것이 정말 어렵구나..를 느꼈다.

⛔문제점

• 페이지 추가시 노션처럼 입력될때마다 렌더링
• 휴지통은 로컬스토리지로 구현이 되어있기 때문에 ♻(복구) 버튼을 누를시, 로컬스토리지에서 title값만을 받아 와서, api를 통해 다시 'post' 하여 id를 받아 새로운 문서가 된다.(기존 제목에서 수정을 해야만 복구가능)