query string 인코딩

Query String이 포함된 URL로 리다이렉션 시키는 로직이 필요했는데,
자꾸 중간에 에러가 발생했다.
이상한 것은 어쩔 때는 되고, 저쩔 때는 안되고..

기존 로직

기존에는 Query string을 전달 할 때 다음과 같이 전달했다.

const href = `https://base.url.com/path?key1=${value1}&key2=${value2}`;

위와 같이 URL을 string 형태로 만들어 보냈다.

문제 문제

해당 URL에서 value의 값들은 누락없이 잘 가져오고 있었다.
근데 이상하게 되고 안되고 케이스가 확률적으로 발생했다.

일단 로직을 바꿔보기로 했다.

URLSearchParams를 찾았다.
query string에서 값을 가져오기도 하지만, querystring을 만들기도 한다.

const qs = new URLSearchParams({key1: value1, key2: value2})

우연히 처음 찾은 방법이 문제를 해결했다.
오락가락 하던 확률이 사라졌다.

왜 이렇게 되었을까?

URLSearchParams로 생성된 query string을 분석한 결과,
내가 작성한 URL과 차이가 있었다.

인코딩!
기존 로직은 =, / 와 같은 기호들이 string 형태 그대로 전달되고 있었다.

그래서 정확히 어떤 상황인지 파악하기 위해 여러가지 시도를 해봤다.

시도 1

URL 전체를 encodeURIComponent로 인코딩했다.

const encodedURI = encodeURIComponent(href);

전체를 인코딩해서는 문제를 해결할 수 없었다.

시도 2

전달되는 value만 인코딩했다.

const encodedURI = `https://base.url.com/path?key1=${encodeURIComponent(value1)}&key2=${encodeURIComponent(value2)}`;

해결되었다.

결론

URL에 Query string을 포함해 사용할 땐,
key=value 형태에서 value를 URL 인코딩을 수행하고 전달해야 한다.