구현 기능

---

쇼핑몰 상세 조회 페이지를 Dynamic Routes로 URL을 /malls/[mallName]로 설정해놓았고,
쇼핑몰 상세 조회 API인 /auth/malls/{mallId}를 호출하기 위해 mallName을 mallId로 변환해야 하는 상황

전체 쇼핑몰의 id와 name 리스트를 받아오는 API인 /malls/list를 호출하는 getMallsList() 함수를 먼저 구현한 뒤,

export const mallNameToMallId = async (mallName: string) => {
  const mallsList = await getMallsList();
  return mallsList.filter((mall) => mall.name === mallName)[0].id;
};

불러온 쇼핑몰 리스트에서 mallName과 name이 일치하는 쇼핑몰의 id를 리턴하도록 mallNameToId 함수를 구현하였다.

문제

---

mallName이 한글로 된 쇼핑몰 페이지에 들어갔더니 mallNameToMallId(mallName)가 undefined를 반환하며 제대로 작동되지 않는 것을 발견하였다.

params.mallName을 console.log()로 찍어보니 %EC%97%98%EB%AC%B4%EB%93%9C와 같이 출력이 되었다.

해결

---

mallNameToMallId(decodeURI(mallName))

decodeURI() 함수를 사용하여 인코딩된 URL을 디코딩한다

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI