오늘 마주한 문제점!! params가 내가 원하는 형태로 변경되지 않음 이슈!
문제 상황
URL 파라미터 값을 읽어와 버튼 텍스트를 업데이트하는 기능을 구현하던 중, URL에 인코딩된 값이 포함되어 발생하는 문제를 발견!
결론적으로 특수문자(%, #) 또는 잘못된 인코딩 형식이 포함된 경우 decodeURIComponent가 처리하지 못해 발생한 에러다. 따라서 URL의 전체 파라미터를 디코딩하는 방식이 아닌 올바른 순서로 처리해야함!
구현하고자 하는 부분
키워드를 선택하면 선택된 키워드로 params가 변경되는데, 이렇게 변경된 params를 button component의 text로 사용해야함!
발생한 문제
원본 URL
/?sortBy=VIEW_COUNT&options=탈의실%25파우더룸실제 변경된 URL
?sortBy=VIEW_COUNT&options=%ED%83%88%EC%9D%98%EC%8B%A4%25%ED%8C%8C%EC%9A%B0%EB%8D%94%EB%A3%B8해당 경로의 params를 불러왔을 때 한국어로 구성된 부분이 인코딩이 되어 출력된다
문제 해결 과정
1. 기존 코드
기존에는 URL 파라미터를 바로 디코딩한 뒤 파라미터 값을 추출하는 방식으로 작성했다.
const URLParams = new URLSearchParams(params);
const optionsResult = URLParams.get('options') || '기본값';
let decoding = optionsResult;
try {
decoding = decodeURIComponent(optionsResult);
} catch (e) {
console.error('디코딩 오류:', e);
}URIError: URI malformed at decodeURIComponent
이 방식에서 params 문자열에 포함된 잘못된 인코딩 값으로 인해 decodeURIComponent가 에러를 발생시킨것!
2. 디코딩 순서 변경
정확한 디코딩 순서 설정이 잘못된다는것을 파악했다.
URL의 파라미터 값을 먼저 추출한 뒤 개별적으로 디코딩을 수행하도록 처리 순서를 변경했다
이렇게 하면 decodeURIComponent가 처리해야 할 값의 범위를 좁혀 에러 발생 가능성을 줄일 수 있을 것!
const decodParams = decodeURIComponent(params);
const URLParams = new URLSearchParams(decodParams);
console.log(URLParams);
const sortByResult = URLParams.get('sortBy') || '기본값';
const optionsResult = URLParams.get('options') || '기본값';
console.log('params', params);
console.log('sortByResult', sortByResult);
console.log('optionsResult', optionsResult);그래서 정규표현식으로 수정을 하기보다 디코딩 순서를 바꿔버렸다!
디코딩을 거치고 options와 sortBy의 value 값을 호출하는 방법으로 수정했다!
이제 decodeURIComponent는 개별 값만 처리하도록 했다! 오류가 발생하지 않음!
디코딩 전후 결과
-
디코딩 전
%ED%83%88%EC%9D%98%EC%8B%A4%25%ED%8C%8C%EC%9A%B0%EB%8D%94%EB%A3%B8 -
디코딩 후
탈의실%파우더룸
options 값의 길이를 활용해 키워드 개수를 알아야 하는 경우 %를 기준으로 나눴다!
const optionsLength = decoding.split('%').length; // 키워드 개수 계산
console.log('options의 길이:', optionsLength);그럼 이렇게 산뜻하게 문제 해결 완료!!!
이번 문제 해결을 통해 배운점
-
디코딩 처리 순서의 중요성
URL의 전체를 디코딩하기보다 필요한 값을 먼저 추출한 뒤 디코딩을 수행해야 에러를 방지할 수 있다! -
정규표현식 사용 지양
특수문자를 제거하는 대신 디코딩 순서를 변경하는 것으로 문제를 해결할 수 있다!
이제 다음 작업을 해봐야지...
