상품 검색 API 요청 관련 문제 정리

---

🟢 1. 내가 작성한 기존 코드

/**
 *  상품 검색 API
 * @param keyword 사용자가 입력한 검색어
 */
export const searchProducts = async (keyword: string): Promise<void> => {
   try {
      console.log('keyword : ', keyword);
      await httpClient.get(`/search/searchProducts/searchKeyword=${encodeURIComponent(keyword)}`);
   } catch (error: any) {
      console.error('상품 검색 실패:', error.response?.data || error.message);
      throw new Error('상품 검색 중 오류가 발생했습니다.');
   }
};

---

🔴 2. 발생한 에러와 증상

• 에러 메시지: 404 Not Found, 상품 검색 실패: undefined
• 증상: 프론트엔드에서 API를 호출했지만, 백엔드의 컨트롤러 (getProductsBySearchKeyword)가 호출되지 않음.

---

❌ 3. 문제점 분석

1. 잘못된 URL 형식 사용

await httpClient.get(`/search/searchProducts/searchKeyword=${encodeURIComponent(keyword)}`);

• URL 형식: /search/searchProducts/searchKeyword=example
• 잘못된 부분: searchKeyword=${keyword}가 쿼리 파라미터가 아닌, 경로의 일부(Path Parameter)처럼 인식

2. 백엔드 라우팅과 일치하지 않음

백엔드 라우터 설정

router.get('/searchProducts', PopularKeywordController.getProductsBySearchKeyword);

• 백엔드는 쿼리 파라미터를 기대하고 있는데, 실제 요청 URL은 경로 파라미터처럼 전달되었습니다.
• 백엔드가 요청을 인식하지 못해 404 Not Found 에러 발생

---

✅ 4. 문제 해결 방법

1. 올바른 API 호출 방식으로 수정

await httpClient.get('/search/searchProducts', {
    params: { searchKeyword: keyword },
});

2. 변경된 URL 형식

• 잘못된 URL: /search/searchProducts/searchKeyword=example

• 올바른 URL: /search/searchProducts?searchKeyword=example

• axios의 params 옵션을 사용하면, 자동으로 올바른 쿼리 파라미터 형식으로 변환

• 테스트 결과
  

---

💡 5. 정리

항목	기존 코드	수정된 코드
요청 URL	/search/searchProducts/searchKeyword=example	/search/searchProducts?searchKeyword=example
URL 전달 방식	직접 URL에 쿼리 문자열 작성 (=example)	axios의 params 옵션 사용 (params: { searchKeyword })
에러 메시지	404 Not Found, 상품 검색 실패: undefined	정상적으로 백엔드 컨트롤러 호출됨
문제 원인	쿼리 파라미터를 경로 파라미터처럼 사용	올바른 쿼리 파라미터 형식으로 수정
문제 해결 방식	params 옵션 사용으로 URL 자동 생성	컨트롤러 진입 및 정상 응답 처리