< 1차 팀 프로젝트 - 노션 클로닝 >
< 작업 내용 >
- 페이지 삭제
- 휴지통 버튼 클릭 시 현재 페이지 삭제
- 사이드바 목록에서 제거
- 기본 페이지로 이동 시키기
<!-- index.html -->
<body>
...
<nav class="side-bar__nav">
<ul id="side-bar__nav-list" class="side-bar__nav-list">
</ul>
</nav>
...
<form action="#">
<button>Document Title</button>
<button type="button" id="icon__delete">
<img src="./assets/delete-icon.svg" alt="" class="icon" />
</button>
</form>
...
<script type="module" src="./src/router.js"></script>
<script type="module" src="./src/editor.js"></script>
<script type="module" src="./src/sidebar.js"></script>
</body>- 강사님께서 계속 생기는 오류에 대해 조언을 주셨음.
: script type을 module로 했을 때, 관련 에러를 없앨 수 있다
( 하지만 난 어떤 오류인지 왜 생겼는지 알 수 없어서 일단 적어만 뒀음..)
// editor.js
import { fetchDeleteDocument, navigateTo } from "./utils.js";
document
.getElementById("icon__delete")
.addEventListener("click", async function (e) {
e.preventDefault();
// utils.js에 있는 history에서 state 불러오기
if (!history.state) return;
// history에서 가져온 id값 사용
const docId = history.state.id;
await fetchDeleteDocument(docId);
const target = document.querySelector(`[data-id='${docId}']`);
const deleteTarget = target.parentElement.parentElement;
deleteTarget.remove();
navigateTo("", "/");
});// rendering.js
import { navigateTo } from "./utils.js";
...
const navListEl = document.getElementById("side-bar__nav-list");
if (navListEl.childElementCount === 0) {
makeDocuments(docs);
navListEl.addEventListener("click", async (e) => {
e.preventDefault();
const target = e.target;
if (target.tagName === "A") {
const id = e.target.dataset.id;
const pathname = new URL(e.target.href).pathname;
console.log(`클릭한 문서 ID : `, id);
navigateTo({ id }, pathname);
}
});
}
};// utils.js
// 페이지를 렌더링하는 함수
export const navigateTo = async (state = { id: null }, pathname) => {
history.pushState(state, null, pathname);
const documentContent = await fetchDocumentContent(state.id);
renderEditor(documentContent);
};
export const fetchDeleteDocument = async (docId = "") => {
try {
const response = await fetch(`${BASE_URL}/${docId}`, {
method: "DELETE",
headers: { "x-username": username },
});
if (!response.ok) throw new Error(`문서 ${docId}를 삭제하지 못했습니다.`);
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error("문서 내용 요청 실패:", error);
}
};< 부족한 점 >
- delete 했을 때 하위 페이지가 있는 경우, 하위 페이지까지 삭제됨
- 하위페이지가 삭제 된 페이지의 위치까지 올라와야 하는 문제 해결 필요
- 새로 생기고 삭제되는 값들을 불러오는 방법을 전혀 알지 못함
< 배운 점 / 느낀 점 >
- 용재님의 주도 하에 코드 작성 (전반적인 주도적 코드작성 불가..)
- 다른 파일에서 작성한 내용을 import/export 들고 와서 사용 가능
- fetch와 async...await 사용법에 대한 이해력이 부족함
첫 시작!