11/28 TIL | 레벨 테스트 작업 일지 Day 1. 기획 및 Rest API 설계!

드디어 이제 포폴 주간 직전의 레벨 테스트 주간! 2주 동안 그간의 배운 지식들을 모두 활용해서 기프트샵 웹 애플리케이션을 만들어야 한다. 오늘부터 2주간 마카오 기프트샵 작업 일지로 TIL을 작성하기로 마음먹었고, 오늘의 작업 목표와 달성률은 아래와 같다.

오늘 작업 목표 달성률(100%)

✅ 사용자 스토리 작성하기
✅ 인수 테스트(전체 시나리오) 작성하기
✅ F/E URL 설계하기
✅ 디자인 시스템 설계하기
✅ Rest API 설계하기

작업 회고

오늘 한 작업 중 아무래도 가장 많은 시간이 들었던 것은 REST API 설계였다. 그동안의 강의에서는 항상 제공받은 API 설계로만 작업을 해왔기 때문에 막상 이렇게 시간이 오래 걸릴 줄 몰랐는데, 실제로 내가 어떻게 API를 호출해서 마카오톡 선물하기의 원하는 결과물을 얻어올 수 있을지 직접 설계하려니까 확 어려워져서 고민을 좀 오래 했다. 고민이 될 때마다 옆자리 짝꿍들한테 의견을 구하고, 그렇게 완성한 나의 API 문서는 아래와 같다! 요청 주소 페이지를 클릭하면 이렇게 요청 예시와 응답 예시를 같이 확인할 수 있다.

그런데 설계하면서 한 가지 고민됐던 부분이 GET /users/me로, 내 계정 정보를 반환하는 API이다. 지난 마카오뱅크 강의에서 내 계정 정보를 반환하는 API로 사용되었고, bankStore의 fetchAccount 메서드에서 헤더에 accessToken을 같이 API를 호출하면 계정의 이름과 계좌 번호, 잔액을 반환받을 수 있었다. (코드는 아래와 같음)

async fetchAccount() {
  const url = `${baseUrl}/accounts/me`;

  const { data } = await axios.get(url, {
    headers: {
      Authorization: `Bearer ${this.accessToken}`,
    },
  });

  return {
    name: data.name,
    accountNumber: data.accountNumber,
    amount: data.amount,
  };
}

그런데, 우리 마카오 기프트샵에서는 내 정보 중에 잔액만 사용하기 때문에 로그인을 성공했을 때 현재 가지고 있는 잔액을 반환하게끔 만들어 store의 amount에 한번 저장시켜주면 되는 거 아닌가 싶은 생각도 드는 것이다;; 근데 문득 방금 이 글을 작성하면서 머릿속으로 고민해 본 결과 /users/me는 필요하다는 결론을 내렸다.

잔액을 로그인 시 받고, 그것으로 이후의 처리들을 한다 치면, 로그인하는 경우에만 최신 상태의 잔액을 확보할 수가 있는 셈인데, 그럼 주문이 성공했을 때 실제 서버에 있는 잔액이 차감되게 되고, 차감된 잔액(실제 서버에 존재하는)이 새로 고침할 때마다 내 프론트랑 동기화되어야 하니까 필요하다는 생각이 들었다.. 아니면 주문이 성공하면 프론트 잔액에서 차감, 서버 잔액에서 차감? 이런 식으로 진행이 되어야 한다는 건데.. 그건 더욱 이상한 거 같고... 무튼 그래서 /users/me를 통해 내 잔액 정보를 조회할 수 있는 API를 만들기로 결심!

내일 한번 동기들은 어떻게 API 설계를 어떻게 했나 훑어봐야겠다! 무튼 2주 간 그동안 배운 내용을 잘 활용해 좋은 결과물을 만들고, 궁금한 것은 질문도 많이 하고, 많은 것을 배워갈 수 있기를! 그리고 면역력 떨어지지 않게 건강 관리 잘 해서 2주를 보내보자! 파이탱탱!💪🥹