TIL 24.11.13

📚 TIL

프로젝트 진행 시작

나는 노션 클로닝 프로젝트에서 에디터 부분을 맡았다. 팀원분이 API 모듈을 만들어 주셔서 그걸 이용해 봤는데 코드가 훨씬 깔끔해졌다! 모듈이 요런 거구나 배웠음

기능 구현

1. 삭제 기능 - 에디터 부분에서 휴지통을 눌렀을 때 삭제됨!

import { request } from "../../api/api.js";

const deleteBtn = document.querySelector(".deleteBtn");

const deletePost = (e) => {
  e.preventDefault();
  // documentId 받아오기
  const currentUrl = window.location.href;
  const documentId = currentUrl.split("/").pop();
  // 해당 id 삭제
  request({ method: "DELETE" }, documentId);
};

deleteBtn.addEventListener("click", deletePost);

2. 에디터 상단 경로 표시

import { request } from "../../api/api.js";

const breadCrumbCon = document.querySelector(".breadCrumb");

// api 데이터
const postData = await request({ method: "GET" });
// console.log(postData);

//data 경로 탐색
function findId(postData, targetId, path = []) {
  for (const post of postData) {
    // 탈출 조건: 현재 데이터의 id가 목표 id와 일치하면 타이틀 반환
    if (post.id === targetId) return [...path, post.title];

    // documents 배열 탐색하여 재귀 호출
    if (post.documents) {
      const result = findId(post.documents, targetId, [...path, post.title]);
      if (result) return result; // 목표 ID를 찾으면 결과 반환
    }
  }
  return null; // 목표를 찾지 못한 경우
}

//배열값 3개만 가져와서 표시
const pathTitle = () => {
  const path = findId(postData, 140046);
  if (path.length === 1) { return path; }
  else {
    return path
      .slice(-3)
      .map(v => {
        return v.length > 7 ? `${v.slice(0, 7)}...` : v;
      });
  }
};

//dom에 표시
let breadCrumbInner = `<ul>`;
pathTitle().forEach(title => {
  breadCrumbInner += `<li><a>${title}</a></li>`;
});
breadCrumbInner += `</ul>`;

breadCrumbCon.innerHTML = breadCrumbInner;

경로 / 표시는 어떻게 할까 하다가 css 선택자를 활용했다

.breadCrumb > li:not(:last-child)::after {
  content: " /";
  margin-left: 9px;
}

1. 게시물 삭제

• deleteBtn 요소에 클릭 이벤트 리스너 추가
• deletePost 함수로 현재 URL에서 documentId 추출
• 추출된 documentId로 DELETE 요청 보내 해당 게시물 삭제

2. 상단 경로(breadcrumb) 표시

• request 함수로 GET 요청하여 postData 가져옴
• findId 함수로 postData를 재귀적 탐색하여 특정 ID의 경로 찾음
• pathTitle 함수로 현재 페이지의 경로를 최대 3개까지 가져와 표시
• 각 경로 항목은 7자 초과 시 말줄임표로 처리
• breadCrumbInner에 HTML 형태로 경로 구성하여 화면에 표시

💬 마치며

종일 프로젝트 진행한 하루^.^ 깃허브를 사용하지 않아서 zip으로 주고받았는데 이게 맞나...? 싶었다. 방금 전에 내가 뭘 수정하고 넘긴 건지도 기억이 안 나는 현상... 깃허브의 소중함을 알게 됐다. 매번 헷갈렸던 재귀함수를 프로젝트에 사용해 볼 수 있어서 좋았다.