중복된 Query string value 값 변환하기

(문제)

http://localhost:3000/search?category=BEAUTY+FOOD+ENTN

위와 같은 URL에서 query string paremter를 보자.

같은 key category 에서 중복된 value가 발생했을 때, searchParams.set은 value 값을 +로 연결해준다.

이때, +값이 아닌 다른 값으로 연결해주고 싶은데 어떻게 해야할까?

(해결)

다른 값인 , 으로 변경시켜 줄 때에는 ^1)replace를 활용한다. 이때 ^2)아스키 코드 값인 ,는 %2C로 표시가 되는데 이를 ^3)16진수인 decimal number를 찾아서 10진수를 찾아서 해결할 수도 있고, decodeURIComponent 함수를 사용하여 한번에 해결할 수도 있다.

const searchParams = new URLSearchParams(search);
const querys = searchParams.get("category")
const queryArrays = querys ? querys.split(" ") : []

searchParams.set("category, queryArrays.join(" ")) //[category=BEAUTY+FOOD+ENTN](http://localhost:3000/search?category=BEAUTY+FOOD+ENTN)
searchParams.set("category, queryArrays.join(",")) //[category=BEAUTY%2CFOOD%2CENTN](http://localhost:3000/search?category=BEAUTY+FOOD+ENTN)

//parsingQuery.js

const searchParams = new URLSearchParams(decodeURICOmponent(search).replace(','g, '+'))
// , 값으로 끊어지는 value 값들을 연결해주는 +값으로 인식하게 하여 parsing이 가능하게 한다.

^1) str.replace(regexp|substr, newSubstr|function)

첫 번째 인자 값을, 두 번째 인자 값으로 치환할 수 있다. 다음과 같이 사용했다.

먼저 정규식임을 알리기 위해서 앞뒤로 /로 감싸고, 뒤에 ‘g’라는 ‘global match’ modifier를 붙여준다.

replace(/,/g, ‘+’) 즉 , 값을 +로 치환하겠다는 의미

^2) 아스키 코드

URL 인코딩(Encoding)

1. URL은 아스키(ASCII) 문자 집합을 사용하여 인터넷을 통해서만 전송할 수 있으며, 종종 ASCII 세트 외부의 문자를 포함하기 때문에 URL은 유효한 ASCII 형식으로 변환되어야 한다.
   [출처] :: https://trustit.tistory.com/159

^3) 16진수인 Decimal number를 10진수 값으로 변환하기

String.fromCharCode(44)

console.log(String.fromCharCode(44)) // ,