비회원 장바구니 기능 구현 중 발생한 JSON 파싱 오류와 해결 과정

최근 프로젝트에서 비회원 장바구니 조회 기능을 구현하게 되었습니다.
프론트엔드에서는 사용자가 로그인하지 않아도 상품을 담을 수 있도록 localStorage에 상품 정보를 저장하고 있었고, 이 데이터를 서버로 전달해 장바구니 페이지를 구성하는 흐름이었습니다.

처음에는 단순히 localStorage에서 꺼낸 데이터를 서버로 넘기기만 하면 되는 간단한 작업처럼 보였습니다. 그러나 실제 구현 과정에서 몇 가지 기술적인 제약과 예상치 못한 상황이 발생하게 됩니다.

가장 먼저 마주한 문제는 백엔드에서 GET 메서드를 사용하되, body에 데이터를 실어 보내달라는 요청이었습니다.
하지만 HTTP 명세상 GET 요청은 body를 지원하지 않으며, axios와 같은 클라이언트 라이브러리에서도 해당 데이터는 무시됩니다. 결국 이 방식은 사용할 수 없다는 것을 확인하게 되었고, 대안으로 query string을 이용해 데이터를 전달하는 방식을 선택했습니다.

이후 또 다른 문제가 발생했습니다.
비회원 장바구니는 상품 ID와 수량 정보를 localStorage에 배열 형태로 저장하고 있는데, 단일 상품의 경우는 ID와 수량을 그대로 전달하면 문제없이 작동했습니다.
그러나 사용자가 장바구니에 여러 개의 상품을 담고 있는 경우, 이 정보를 배열 형태로 직렬화하여 saleProductId 파라미터에 그대로 넣어 전달하자 서버에서 JSON 파싱 오류가 발생했습니다.

URL에 직접 JSON 문자열을 넣으면서 발생한 이슈였고, 문제를 해결하기까지 다양한 시도를 하게 됩니다.

get method에 body 사용

백엔드 개발자가 비회원 장바구니 조회에서 get method를 통해 body로 내용들을 보내어 달라고 요청

body의 값이 비어있다고 나옵니다.

이에 대한 내용을 찾아본 결과 공식 문서에서 http에서는 axios로 get method에서 body를 지원하지 않는다고 합니다.

queryString encoding

get method에서 body를 통해 할 수 없다는 것을 알게되고 난 후 queryString으로 상품id와 수량을 List형태로 보내기로 하였습니다.

saleProductId에 상품에 대한 정보들을 보내주었습니다.

여기서 문제점이 백엔드 서버에서 올바르지 않은 데이터를 반환한다는 에러가 발생했습니다.

시도

JSON.parse와 JSON.stringify를 통해 해당 내용을 백엔드 서버로 보내었지만SyntaxError: Unexpected token & in JSON at position 10 이와 같은 에러로 인해 다른 방법을 시도하였습니다.

해결

export async function GET(request: NextRequest) {
  try {
    // URL 파라미터에서 상품 ID 목록 추출
    const { searchParams } = new URL(request.url)
    const saleProductIdParam = searchParams.get('saleProductId')

    try {
      const cartItems = JSON.parse(saleProductIdParam as string)
      const encoding = encodeURIComponent(JSON.stringify(cartItems))

      // 서버 HTTP 클라이언트 생성
      const serverClient = await createServerHttpClient()

      // 비회원 장바구니 상품 조회 API 호출
      const response = await serverClient.get(`carts/guest?saleProductId=${encoding}`)

      // 성공 응답 반환
      return NextResponse.json(response.data, {
        status: 200,
      })
    } catch (parseError) {
      console.error(
        '상품 ID 목록 파싱 실패:',
        parseError instanceof Error ? parseError.message : '알 수 없는 오류',
      )
      return NextResponse.json({ error: '잘못된 상품 ID 형식입니다.' }, { status: 400 })
    }
  } catch (error) {
    // 에러 발생 시 처리
    console.error(
      '비회원 장바구니 조회 실패:',
      error instanceof Error ? error.message : '알 수 없는 오류',
    )
    return NextResponse.json({ error: '장바구니 상품 조회에 실패했습니다.' }, { status: 500 })
  }
}

localstorage에서 받아온 상품에 대한 정보를 JSON.Parse를 통해 배열로 복원하고 JSON.stringify를 통해 문자열로 변환 후 이에 대한 내용을 다시 encodeURIComponent를 통해 인코딩을 진행한 후 백엔드 서버에 보내주고 백엔드 서버에서 디코딩을 통해 해결하였습니다.