[Bug] 검색페이지 쿼리스트링 특수기호 URI 인코딩/디코딩

[jwo1024]

버그 내용

특수기호 "%" 가 검색에 입력되었을때, URI 에 인코딩되지 않고 그대로 들어가서, useSearchParams 를 통해 쿼리스트링 값을 가져올때 올바른 keyword를 얻어오지 못하는 문제.

참고자료

• encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

기타

[jwo1024]

[jwo1024]

useSearchParams 를 활용하여 쿼리 스트링을 읽어오고 있는데, 따로 decoding 을 하지 않아도 된다. (오히러 decoding 을 할경우 URI malformed 에러가 나온다.)

http://localhost:3000/search?keyword=%25abc&type=2 이 URL 에서

const type = searchParams.get("type"); get을 사용하여 type 을 가져올때

"%25abc" 를 기대했지만, "%abc" 가 가져와진다.

디코딩은 이미 해서 가져와지기 때문에 적용하지 말자

[jwo1024]

추가로 selectMenu 시 발생하는 useEffect 순환문제 해결

• 순환문제가 발생하여, url 로 keyword 변경시 selectMenu useEffect 에서 keyword를 초기화 해버려 검색이 불가한 이슈가 있었다.

selectMenu가 의존성으로 들어가있는 useEffect 를 삭제하고, 슬라이드메뉴 버튼 클릭 시 메뉴를 변경하도록 수정하였다.