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

📌 프로젝트 설명

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

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

기본 요구사항

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

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

📍목표

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

🏃‍♂️3일차🏃‍♂️

📷 UI

💻구현한것💻

• 문서 삭제 기능 (✅1일차 문제해결!)
  • 문서 목록에서 각 문서 우측에는 ― 버튼이 있다.
  • 해당 버튼을 클릭하면 해당 문서를 삭제한다.
• 삭제, 추가 버튼에 마우스오버 메시지를 띄워 사용자 편의성을 높인다.
• 1차 CSS구현

🔥느낀점

• 문서 삭제 기능 (✅1일차 문제해결!)
  삭제 기능도 추가기능과 마찬가지로, 페이지는 트리형태로 되어있기에, 재귀형태로 해당 문서를 찾아서 삭제한다. 만국의 재귀라고 느꼈다.

css를 내 나름대로 입혀 보았는데, 처음이라 그런지 쉽지않았다.

문제가 점점 해결되고, 기능이 구현이 되면서 재밌었다.

⛔문제점

:hover기능을 통해 마우스오버형태를 하려고 하였으나, <li> 태그로 구성되어 있다보니 상위폴더에 마우스를 올리면, 하위태그도 전부 오버된다.

🔧임시방편

• 페이지 리스트 hover효과 제거