쿼리 문자열 인코딩하기(한글 주소 깨짐 현상)_encodeURI

문제

프로젝트 도중 검색창에 영어를 치면 별 문제 없이 쿼리 값을 API path에 담아 서버에서 관련 데이터를 무사히 가져오지만, 한글을 칠 경우에는 해당 keyword의 값이 깨진 상태로 쿼리 값을 서버에 보내 제대로 데이터를 가져오지 못하는 문제가 있었다.

 

문제해결_encodeURI

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

encodeURI() - JavaScript | MDN

The encodeURI() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

 

찾아보니 한글 문자열을 쿼리에 포함시키기 전에는 인코딩하는 작업이 별도로 필요했었다.

이에 API 통신을 하기 전에 받아 온 keyword 값이 한글일 경우에는 해당 keyword를 encodeURI() 함수를 사용하여 인코딩해주는 작업을 하는 함수를 작성함으로써, 문제를 해결하였다.

( ... )

const checkHasIncode = keyword => {
  const check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글인지 식별해주기 위한 정규표현식

  if (keyword.match(check_kor)) {
    const encodeKeyword = encodeURI(keyword); // 한글 인코딩
    return encodeKeyword;
  } else {
    return keyword;
  }
};

export const searchKeyword = keyword => {
  return client.get(
    `${API.baseUrl}contents/search?keyword=${checkHasIncode(keyword)}`
  );
};

 

결과화면