📌 프로젝트 설명
바닐라 JS만을 이용해 📄노션을 클로닝📄합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.
👩💻 요구 사항과 구현 내용
기본 요구사항
해당 프로젝트는 크게 문서 목록과 편집기 두가지 부분으로 구성되어있다.
- 문서 목록
- 루트 문서들을 보여준다.
- 루트 문서에 하위 문서가 있는 경우, 해당 루트 문서 아래에 트리 형태로 보여준다.
- 하위 문서 추가 기능
문서 우측+버튼을 클릭하면 하위 문서로 새 문서를 생성하고 편집화면에 보여준다.
- 편집기
- 자동 저장 기능
저장 버튼을 따로 두지 않고 지속적으로 서버에 저장되도록 한다.
- 자동 저장 기능
- 공통
- History API를 이용해 SPA 형태로 만든다.
- 루트 URL 접속 시엔 편집화면을 보여주지 않고 메인 화면을 보여준다.
- /documents/{documentId} 로 접속시, 해당 문서의 편집화면을 띄워준다.
📍목표
데브코스 첫번째 프로젝트인 📄노션을 클로닝 프로젝트📄 이다.
JS만을 이용하여, Fetch API를 이용해 API 서버의 데이터를 주고 받으면서, History API를 이용해 SPA 형태로 만들면서 노션과 비슷한 편집기를 구현하면서 JS의 기본기를 다진다.
🏃♂️1일차🏃♂️
📷 UI
💻구현한것💻
-
설계
- Fetch API 를 이용해 새 페이지가 추가 될때마다 API 서버의 데이터를 저장하고, 필요할때 불러와서 렌더링한다.
- 노션의 기본틀인 좌측에 📄문서목록, 우측에 편집기 를 History API를 이용해 SPA 형태로 구현
-
문서 목록
- 루트 문서들을 보여준다.
- 루트 문서에 하위 문서가 있는 경우, 해당 루트 문서 아래에 트리 형태로 보여준다.
- 하위 문서 추가 기능
문서 우측+버튼을 클릭하면 하위 문서로 새 문서를 생성하고 편집화면에 보여준다.
-
편집기
- 자동 저장 기능
저장 버튼을 따로 두지 않고 지속적으로 서버에 저장되도록 한다.
- 자동 저장 기능
🔥느낀점
- API를 불러오는 것 부터 어려움을 겪었으나, 여러가지 고민과 시도끝에 API.js로 모듈을 따로 생성하여 이제는 자신감있게 원하는 데이터를 불러오고 내보낼 수 있게 되었다.
- History API를 이용해 SPA 형태로 구현하면서, 사용자의 편의성을 높이는데 중요함을 깨달았다.
- 문서들을
<ul> <li>태그로 묶어서 표현을 하고, 하위 문서 추가시 재귀함수를 이용해<li>태그안에 또<ul>태그안에 추가하는 방식으로 구현하였다. 재귀를 이용했다는 것에 뿌듯하였다.
- 첫날이라 그런지 집중이 잘 되었고 무엇인가 만드는 재미가 쏠쏠했다.🔥
⛔문제점
- 문서삭제버튼을 누르면, 태그안의 태그를 넣다보니 하위문서 삭제시 접근이 잘 되지 않았다.(하위 폴더 삭제시 상위폴더도 삭제)
🔧임시방편
- 삭제버튼
-을 만들어 놓기만 하였고, 계속해서 방법을 생각해 보았다.
🏃♂️2일차🏃♂️
📷 UI
💻구현한것💻
-
기능
- 목록과 편집기 사이 padding 추가, css연습
-
문서 목록
- 문서 목록 클릭시 하위 폴더 노출
- 문서 목록 클릭시 하위 폴더 노출
-
편집기
- CSS연습
🔥느낀점
- css를 연구해보느라 시간을 거의 다써서 시간관리의 중요성을 다시한번 깨달았고 우선순위를 정했다.
나의 우선순위:
1.기능구현
2.스타일 css입히기
3.문서화
⛔문제점
1일차와 동일하다.😥
- 문서삭제버튼을 누르면, 태그안의 태그를 넣다보니 하위문서 삭제시 접근이 잘 되지 않았다.(하위 폴더 삭제시 상위폴더도 삭제)
🔧임시방편
- 삭제버튼
-을 만들어 놓기만 하였고, 계속해서 방법을 생각해 보았다.
🏃♂️3일차🏃♂️
📷 UI
💻구현한것💻
- 문서 삭제 기능 (✅1일차 문제해결!)
- 문서 목록에서 각 문서 우측에는
―버튼이 있다. - 해당 버튼을 클릭하면 해당 문서를 삭제한다.
- 문서 목록에서 각 문서 우측에는
- 삭제, 추가 버튼에 마우스오버 메시지를 띄워 사용자 편의성을 높인다.
- 1차 CSS구현
🔥느낀점
- 문서 삭제 기능 (✅1일차 문제해결!)
삭제 기능도 추가기능과 마찬가지로, 페이지는 트리형태로 되어있기에, 재귀형태로 해당 문서를 찾아서 삭제한다. 만국의 재귀라고 느꼈다.
css를 내 나름대로 입혀 보았는데, 처음이라 그런지 쉽지않았다.
문제가 점점 해결되고, 기능이 구현이 되면서 재밌었다.
⛔문제점
:hover기능을 통해 마우스오버형태를 하려고 하였으나,
<li>태그로 구성되어 있다보니 상위폴더에 마우스를 올리면, 하위태그도 전부 오버된다.
🔧임시방편
- 페이지 리스트 hover효과 제거
🏃4일차🏃♂️
📷 UI
💻구현한것💻
- 휴지통 기능
- 삭제 버튼을 누른 페이지들은 로컬스토리지에 저장되어 휴지통에 담는다.
- 휴지통 클릭시 삭제한 페이지들이 나온다
- 해당 버튼을 클릭하면 해당 문서를 삭제하고 휴지통에 들어간다.
- 각 페이지 리스트들은
+(복구)-(삭제) 버튼을 갖는다. +복구를 누르면 페이지의 title을 수정후 복구 시킨다.-(삭제)를 누르면 영구삭제 확인 메세지와 함께 영구 삭제가된다.
- 2차 CSS구현
🔥느낀점
- 🗑휴지통
노션의 휴지통기능을 보면서 편리하다고 느껴서 구현해보고 싶었는데, api서버 특성상 post get delete 정도 까지 밖에 없어서, 임시로 저장할 공간이 로컬 스토리지가 생각나 로컬스토리지에 저장해놓고, 렌더링해주는 방식으로 구현하였다. 로컬스토리지까지 사용을 해보니, 정말 내가 개발자라도 되는 줄 알았다.
URL형태로 데이터를 넘겨주고 받을때, decode와 encode의 중요성을 느꼈다.. history api를 위해, push형태로 로컬 스토리지의 title을 넘겨주다보니, decode되어 넘어와 적잖이 당황했다.
css를 노션과 비슷한 색으로 해보았다.
⛔문제점
🗑휴지통
영구삭제는 문제가 없이 보여지는데, 복구를 구현하려고 하니 문제가 생겼다.
-
문제 설명:
-
페이지가 휴지통에 옮겨질때, 서버에서 문서를 DELETE를 하고 로컬스토리지로 옮겨진다.
-
페이지 목록을 보여줄때, 서버데이터를 기반으로 페이지 목록이 렌더링 된다. 따라서 DELETE를 하고 로컬스토리지에 저장한다.
-
서버안의 페이지는 각 id와 content, 하위문서는 parent값으로 상위 문서의 id를 갖는다.
-
그렇게복구를 위해 다시 이 페이지를 post 하려고 하니, post할때, 서버는 id를 정해주고, 정해진 id와 title, parent를 받는다.
-
그러나 로컬 스토리지의 페이지들은, 삭제되기전 id를 갖고있기에, 다시 서버데이터로 들어가려면 id를 받고, 새로 post해야 한다....
🔧임시방편
- 로컬스토리지에 content는 빼고, tilte을 남겨두어 복구 할때 title을 넘겨준다.
-
🏃5일차🏃♂️
📷 UI
💻구현한것💻
- 하위 문서 접기/펼치기 기능 ✅3일차 hover문제해결!
- 문서 좌측
▶을 클릭하면 하위 문서들을 접었다 펼칠 수 있다.
- 문서 좌측
- 🗑휴지통
- 휴지통 :hover 구현 && 접었다 펼칠 수 있게 구현
- 3차 CSS수정 (페이지목록&& 편집기 디테일)
🔥느낀점
접었다 폈다 하는 기능도 간단히 구현 될 줄 알았으나, 생각보다 오래 걸렸다. 재귀로 구현했던
<li>태그들을 다루다보니, 원하는 값에 접근하기가 쉽지않았고, className으로 접근했기에 변수이름과 class이름의 작명에 대한 중요성을 깨달았다.
js안에서 html들을 조작하는 것이 결코 쉬운일이 아니라는 것을 느꼈다.
css 작업은 언제나 어렵다...
⛔문제점
4일차 휴지통 복구 문제와 동일
🏃6일차🏃♂️
📷 UI
💻구현한것💻
- 🗑휴지통
- 우측 하단에 휴지통 비우기 를 누르면 휴지통이 비워진다.
- 편집기
- 편집기 우측하단 에 🏠home 버튼을 누르면 메인화면으로 간다.
- 첫 화면 구성
- 4차 CSS수정 (페이지목록 && 편집기 && 휴지통 디테일)
- 파비콘 추가
🔥느낀점
css 작업은 언제나 어렵다...
사용자의 편의성을 고려하여 설계하는 것이 정말 어렵구나..를 느꼈다.
⛔문제점
- 페이지 추가시 노션처럼 입력될때마다 렌더링
- 휴지통은 로컬스토리지로 구현이 되어있기 때문에 ♻(복구) 버튼을 누를시, 로컬스토리지에서 title값만을 받아 와서, api를 통해 다시 'post' 하여 id를 받아 새로운 문서가 된다.(기존 제목에서 수정을 해야만 복구가능)
