1/3 (몸 관리 실패, 화) TIL

(노드 심화 주차 프로젝트 중)

눈이 뜨겁다.

어제 내가 맡은 파트의 백 API를 만들고, 오늘은 프론트에서 요청을 보내오는 코드를 짰다. 대강의 html 페이지를 만들어놓고만 하려고 했는데도 근 한 달만에 해봐서 그런지 막막했다. 실제로 잘 동작하는지는 내일 더 건강한 컨디션으로 확인해봐야겠다.

---

프론트 동작 탐구

로그인 처리

- ajax() 방식과 axios 방식의 공통점과 차이점이 확연히 보인다.

• Ajax 버전:

// 로그인
function sign_in() {
  let email = $("#inputEmail").val();
  let password = $("#inputPassword").val();
  $.ajax({
    type: "POST",
    url: "/api/auth",
    data: {
      email: email,
      password: password,
    },
    success: function (response) {
      localStorage.setItem("token", response.token);
      window.location.replace("/goods.html");
    },
    error: function (error) {
      customAlert(error.responseJSON.errorMessage);
    },
  });
}

• axios 버전:

// 로그인
function sign_in() {
  let nickname = document.getElementById('loginNickname').value;
  let password = document.getElementById('loginPassword').value;
  axios
    .post('api/users/login', {
      nickname: nickname,
      password: password,
    })
    .then((response) => {
      console.log(response);
      localStorage.setItem('token', response.data.token);
      window.location.replace('/');
    });
}

로그인 인증 처리

순서대로 잘 따라가보면…

// assets/api.js
function getSelf(callback) {
  $.ajax({
    type: "GET",
    url: "/api/users/me",
    headers: {
      authorization: `Bearer ${localStorage.getItem("token")}`,
    },
    success: function (response) {
      callback(response.user);
    },
    error: function (xhr, status, error) {
      if (status == 401) {
        alert("로그인이 필요합니다.");
      } else {
        localStorage.clear();
        alert("알 수 없는 문제가 발생했습니다. 관리자에게 문의하세요.");
      }
      window.location.href = "/";
    },
  });
}

⇒ 요청이 문제없이 성공하면, callback을 실행시켜라. user 데이터를 넣어가지고.

// assets/order.html
<script src="/api.js"></script>
<script>
  $(document).ready(function () {
    getSelf(function (user) {
      const order = JSON.parse(sessionStorage.getItem("ordered"));
      $("#nickname").text(user.nickname);
      $("#btnOrder")
        .text(
          `$${number2decimals(
            order.reduce(
              (s, o) => s + Number(o.goods.price) * o.quantity,
              0
            )
          )} 결제`
        )
        .click(function () {
          postOrder(user, order);
        });
      $(".btn-confirm").click(function () {
        location.href = "/goods.html";
      });
    }); // 이만큼이 바로 콜백 함수.
  });

  function number2decimals(num) {
    return (Math.round(num * 100) / 100).toFixed(2);
  }
</script>

⇒ 저 getSelf()의 뜻인즉슨, 페이지 로딩이 완료되자마자 로그인 인증을 한 번 거쳐갔다 와서 노란 칠한 저 함수를 실행하라는 얘기이다.

Uploaded by N2T