[TIL] 240731 (최종 프로젝트 디자인 적용, 결제 유효성 검사 및 기존 데이터 추가)

솔·2024년 7월 31일

TIL nextjs supabase

TIL

목록 보기

115/268

🥞 오늘 한 일

최종 프로젝트
- 공구템 쪽 변경된 디자인 맞춰 UI 변경
- 자취템, 공구템 한 번에 가져오는 갯수 변경
- 공구템 상세, 리스트 페이지 탑 버튼 삽입
- 결제 폼 페이지
  - 유저 주소 자동 입력
  - 유저 이메일 자동 입력
  - 이메일, 휴대폰 번호 유효성 검사
- 결제 메인 페이지
  - 한 번 구매한 사람은 다시 구매할 수 없도록 설정

기술면접 연습

이벤트 버블링과 캡처링에 대해 설명해주세요.

이벤트 버블링과 캡처링은 모두 이벤트가 전파되는 방식을 뜻하고, 방향이 다릅니다. 먼저 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 것을 뜻하고, 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 것을 뜻합니다.

이벤트 위임에 대해 설명해주세요.

이벤트 위임은 하위 요소의 이벤트를 상위 요소로 위임하는 것을 뜻하는데, 버블링과 캡처링을 통해 상위 요소에 이벤트를 위임하고, 이벤트 함수 내에서 하위 요소를 판단하여 이벤트를 처리하면 성능을 최적화할 수 있는 장점이 있습니다.

자바스크립트의 this가 어떤 값을 가지는지 각 상황을 가정하여 설명해주세요.

일반 함수를 호출할 때는 전역 객체인 window를 뜻하고, 객체의 메서드를 호출할 때는 해당 객체를 의미합니다. 콜백 함수는 함수가 실제로 호출되는 상황에 따라 달라집니다. 마지막으로 화살표 함수는 생성된 함수의 스코프에 따라 달라집니다.

🍽️ 트러블 슈팅

supabase에서 결제 내역 삭제 시 반영 안 되는 오류

결제 후, 마이 페이지에서 결제 내역을 확인하는 route handler는 아래와 같았다.

// route.ts
import { createClient } from "@/supabase/client";
import { NextRequest, NextResponse } from "next/server";

export async function GET(
  request: NextRequest,
  { params }: { params: { userId: string } }
) {
  const { userId } = params;
  const supabase = createClient();
  try {
    const { data } = await supabase
      .from("payments")
      .select()
      .eq("user_id", userId)
      .single();

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error: "포스트를 가져오는 데 실패했습니다." });
  }
}

일단 가져오는 것까지는 잘 되었는데, supabase 데이터베이스에서 해당 데이터를 삭제해도 계속 데이터가 남아있는 것이다. 때문에 여러 코드를 살펴 보았지만 원인을 찾을 수 없었는데, 알고보니 위 파일에서 createClient를 가져올 때 server가 아니라 client에서 가져와서 문제가 생겼던 것...
때문에 문제가 된 부분을 아래와 같이 변경했고, 문제 없이 잘 작동되었다.

// route.ts
import { createClient } from "@/supabase/server";

🍴 돌아보기

UI 작업은 어렵지 않고 노가다만 하면 되지만 사실 크게 어려울 것도 고민할 것도 없어서 왠지 시간을 날리는 기분이다... 그래도 꼭 필요한 작업이긴 하니까 무의미하다고 생각하지 말자. 결제 기능도 슬슬 끝이 보일랑 말랑 하는데, 디테일하게 들어가면 수정할 것이 많으니 조금 더 서둘러서 월요일 중간 발표 때 문제 없이 작동할 수 있도록 만들어두어야겠다.