따꼼 트러블 슈팅 | 아이 접종 리스트 데이터 전송 오류 해결 과정

1. 문제 원인

아이 기본 정보를 입력하고 2단계 접종 정보를 전송하려고 했으나, 1단계에서 등록된 아이 정보가 없어서 데이터 전송에 실패했습니다.
1단계에서 아이 정보를 입력한 후 child 테이블에 아이의 기본 정보가 저장되며 uid가 자동 생성됩니다. 이 uid가 있어야만 2단계에서 아이 접종 리스트 데이터를 제대로 전송할 수 있기 때문에, 다음 버튼 클릭 시 생성된 uid를 2단계로 전달하는 로직이 필요했습니다.

 

2. 해결 과정

1. 데이터 전송 코드 수정: Supabase의 .insert() 메서드를 사용하여 child 테이블에 기본 정보를 입력할 때, 단일 객체가 아니라 배열 형태로 전달하고 있었습니다. 이로 인해 single() 메서드가 작동하지 않았고, 새로 생성된 uid 값을 불러오지 못했습니다.
2. 코드 수정 내용:
   • insert를 배열에서 객체 형태로 수정하여 단일 데이터가 삽입되도록 했습니다.
   • .single() 호출 앞에 .select()를 추가해, 생성된 데이터의 상세 정보를 반환받도록 변경했습니다.

 

---

.select()

.select()는 Supabase의 JavaScript 클라이언트에서 데이터베이스에 삽입, 업데이트, 삭제 작업을 수행한 후 원하는 데이터를 선택해 반환하도록 하는 메서드입니다. 주로 insert, update, delete 등 데이터를 조작하는 메서드와 함께 사용되며, 이 메서드를 호출하면 조작 후의 데이터를 조회해서 반환할 수 있습니다.

.select()의 역할과 사용 이유

기본적으로 insert나 update와 같은 작업에서는 결과로 조작된 데이터를 자동으로 반환하지 않습니다. 그래서 .select()를 추가로 호출하여 특정 컬럼이나 전체 데이터를 반환하도록 할 수 있습니다. select() 메서드를 사용하면, 방금 삽입된 id와 같은 중요한 정보를 바로 가져올 수 있어 편리합니다.

 

---

 

수정 전 코드

//  수정 전
const { data: childData, error } = await supabase
  .from("child")
  .insert([{
    user_id: user.id,
    name: name,
    birth: birthday,
    profile: profileImageUrl,
    notes: notes ?? "" 
  }])
  .single();

수정 후 코드

// 수정 후
const { data: childData, error } = await supabase
  .from("child")
  .insert({
    user_id: user.id,
    name: name,
    birth: birthday,
    profile: profileImageUrl,
    notes: notes ?? "" 
  })
  .select()  
  .single();

 

위 코드에서 .select()를 사용하여 child 테이블에 새로운 데이터가 삽입된 후, 해당 데이터를 조회해 data에 할당합니다. 삽입된 uid와 같은 정보를 바로 얻을 수 있어, 데이터 조작 후의 결과를 즉시 활용해야 하는 경우 유용합니다.

 

3. 결과

이렇게 코드를 수정함으로써 1단계에서 아이의 uid가 제대로 생성되고 2단계로 전달되어, 접종 리스트 데이터를 정상적으로 전송할 수 있게 되었습니다.

 

 

4. 배운 점

이번 문제를 해결하면서 얻은 주요 배움은 다음과 같습니다:

1. 단계 간 데이터 전달의 중요성
   1단계에서 생성된 아이의 uid를 2단계로 전달하는 방식이 잘못되어 문제가 발생했습니다. 이 문제를 해결하면서, 단계별로 필요한 데이터를 올바르게 전달하는 구조를 설계하는 것이 얼마나 중요한지 배웠습니다. 특히, uid 같은 식별자 값은 이후 단계에서 데이터가 제대로 연결되도록 보장하는 필수 요소임을 다시 확인하게 되었습니다.
2. single()과 여러 행 반환에 대한 이해
   single() 메서드를 사용할 경우 하나의 행만 반환되므로, 여러 행을 처리할 때는 사용하지 말아야 한다는 점을 배웠습니다. 2단계에서 여러 접종 리스트 데이터를 보내기 위해 single()을 제거함으로써 데이터가 정상적으로 전송되도록 수정할 수 있었습니다.
3. 코드 수정 후 데이터 흐름 검증
   수정된 코드로 인해 1단계에서 uid가 정상적으로 생성되고, 2단계로 전달되면서 접종 리스트 데이터 전송이 성공하는 과정을 검증할 수 있었습니다. 이를 통해 코드 수정 후의 테스트와 데이터 흐름 확인이 얼마나 중요한지 느꼈습니다.

이러한 과정을 통해, 단계 간 데이터 전달의 구조와 supabase의 메서드 사용에 대한 이해가 높아졌고, 앞으로의 개발에서 데이터 흐름을 더욱 신중히 고려해야 함을 배우게 되었습니다.