[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션

강의

39 책 정보 보기

파일 생성

book.html 생성
book.css 생성
book.js 생성

book.js 큰 틀

25 - 39 책 정보 보기 - book.js 큰 틀

book.js

function getToken() {
  return localStorage.getItem("token");
}

async function getUserByToken(token) {
  try {
    const res = await axios.get(`https://api.marktube.tv/v1/me`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return res.data;
  } catch (error) {
    console.log("getUserByToken error", error);
    return null;
  }
}

async function getBook(bookId) {
  const token = getToken();
  if (token === null) {
    location.assign("/login");
    return null;
  }
  try {
    const res = await axios.get(`https://api.marktube.tv/v1/book/${bookId}`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return res.data;
  } catch (error) {
    console.log("getBook error", error);
    return null;
  }
}

async function logout() {
  const token = getToken();
  if (token === null) {
    location.assign("/login");
    return;
  }
  try {
    await axios.delete(`https://api.marktube.tv/v1/me`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
  } catch (error) {
    console.log("logout error", error);
  } finally {
    localStorage.clear();
    location.assign("/login");
  }
}

async function deleteBook(bookId) {
  const token = getToken();
  if (token === null) {
    location = "/login";
    return;
  }
  await axios.delete(`https://api.marktube.tv/v1/book/${bookId}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
}

function bindLogoutButton() {
  const btnLogout = document.querySelector("#btn_logout");
  btnLogout.addEventListener("click", logout);
}

function render(book) {
  const detailElement = document.querySelector("#detail");
  detailElement.innerHTML = `<div class="card bg-light w-100">
    <div class="card-header"><h4>${book.title}</h4></div>
    <div class="card-body">
      <h5 class="card-title">"${book.message}"</h5>
      <p class="card-text">글쓴이 : ${book.author}</p>
      <p class="card-text">링크 : <a href="${
        book.url
      }" target="_BLANK">바로 가기</a></p>
      <a href="/edit?id=${book.bookId}" class="btn btn-primary btn-sm">Edit</a>
      <button type="button" class="btn btn-danger btn-sm" id="btn-delete">Delete</button>
    </div>
    <div class="card-footer">
        <small class="text-muted">작성일 : ${new Date(
          book.createdAt
        ).toLocaleString()}</small>
      </div>
  </div>`;

  document.querySelector("#btn-delete").addEventListener("click", async () => {
    try {
      await deleteBook(book.bookId);
      location.href = "/";
    } catch (error) {
      console.log(error);
    }
  });
}

async function main() {
  // 버튼에 이벤트 연결
  bindLogoutButton();
  // 브라우저에서 id 가져오기
  const bookId = new URL(location.href).searchParams.get("id");
  // 토큰 체크
  const token = getToken();
  if (token === null) {
    location.href = "/login";
    return;
  }
  // 토큰으로 서버에서 나의 정보 받아오기
  const user = await getUserByToken(token);
  if (user === null) {
    localStorage.clear();
    location.href = "/login";
    return;
  }
  // 책을 서버에서 받아오기
  const book = await getBook(bookId);
  if (book === null) {
    alert("서버에서 책 가져오기 실패");
    return;
  }

  console.log(book);
  // 받아온 책을 그리기
  render(book);
}

document.addEventListener("DOMContentLoaded", main);

40 책 정보 수정

파일생성

edit.html , edit.css, edit.js 생성하기

edit.js 큰 틀

async function main() {
  // 브라우저 id 가져오기
  // 토큰체크
  // 토큰으로 서버에서 나의 정보 받아오기
  // 책을 서버에서 받아오기
  // 받아온 책을 그리기
}

document.addEventListener("DOMContentLoaded", main);

book.js

function render(book) {
  const titleElement = document.querySelector("#title");
  titleElement.value = book.title;

  const messageElement = document.querySelector("#message");
  messageElement.value = book.message;

  const authorElement = document.querySelector("#author");
  authorElement.value = book.author;

  const urlElement = document.querySelector("#url");
  urlElement.value = book.url;

  const form = document.querySelector("#form-edit-book");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    event.stopPropagation();
    event.target.classList.add("was-validated");

    try {
      await updateBook(book.bookId);
      location.assign(`book?id=${book.bookId}`);
    } catch (error) {
      console.log(error);
    }
  });
}

async function updateBook(bookId) {
  const titleElement = document.querySelector("#title");
  const messageElement = document.querySelector("#message");
  const authorElement = document.querySelector("#author");
  const urlElement = document.querySelector("#url");

  const title = titleElement.value;
  const message = messageElement.value;
  const author = authorElement.value;
  const url = urlElement.value;

  if (title === "" || message === "" || author === "" || url === "") {
    return;
  }

  const token = getToken();
  if (token === null) {
    location.assign("/login");
    return;
  }

  await axios.patch(
    `https://api.marktube.tv/v1/book/${bookId}`,
    {
      title,
      message,
      author,
      url,
    },
    {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }
  );

  const cancelButtonElement = document.querySelector("#btn-cancel");
  cancelButtonElement.addEventListener("click", (event) => {
    event.preventDefault();
    event.stopPropagation();
    location.assign(`book?id=${book.bookId}`);
  });
}

async function getUserByToken(token) {
  try {
    const res = await axios.get("https://api.marktube.tv/v1/me", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return res.data;
  } catch (error) {
    console.log("getUserByToken error", error);
    return null;
  }
}

function getToken() {
  return localStorage.getItem("token");
}

async function getBook(bookId) {
  const token = getToken();
  if (token === null) {
    location.href = "/login";
    return null;
  }
  try {
    const res = await axios.get(`https://api.marktube.tv/v1/book/${bookId}`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return res.data;
  } catch (error) {
    console.log("getBook error", error);
    return null;
  }
}

async function main() {
  // 브라우저 id 가져오기
  const bookId = new URL(location.href).searchParams.get("id");
  // 토큰체크
  const token = getToken();
  if (token === null) {
    location.href = "/login";
    return;
  }
  // 토큰으로 서버에서 나의 정보 받아오기
  const user = await getUserByToken(token);
  if (user === null) {
    localStorage.clear();
    location = "/login";
    return;
  }
  // 책을 서버에서 받아오기
  const book = await getBook(bookId);
  if (book === null) {
    alert("서버에서 책 가져오기 실패");
    return;
  }
  console.log(book);
  // 받아온 책을 그리기
  render(book);
}

document.addEventListener("DOMContentLoaded", main);

25 - 40 책 정보 수정

19회차 인증샷

올인원 패키지 : 프론트엔드 개발👉https://bit.ly/3m0t8GM