URLSearchParams

axios로 params를 붙여 get요청한 url을 unity팀에 그대로 보내줘야 했다.

api호출시 url의 쿼리스트링은 내가 직접 작성한게 아니라 axios라이브러리가 처리해주었고,

게다가 url안에 특수문자가 있어서 인코딩한 url을 보내야 하는게 어떻게 할지 고민이였다.

 

그 해결 방법은 URLSearchParams

 

1. 필요성

• URL 쿼리스트링 문자열을 쉽게 만들수 있음.
• 쿼리스트링 형식의 URL에서 쉽게 키,값을 조회할 수 있음.
• (url에서 특수 문자나 공백을) 자동으로 인코딩해줌. 

 

2. 쿼리스트링 url 만들기

✅ 생성자 함수 new URLSearchParams
: url에서 쿼리파라미터 관련 정보를 파싱한 인스턴스 객체를 리턴함

new URLSearchParams(); // URLSearchParams {size: 0}

 

new URLSearchParams([  
  ["format", "dxf"],
  ["layerName", "line_layer"]
]);  // URLSearchParams {size: 2}

 

✅ 메서드 append() : 인스턴스 객체에 키-값을 넣음

URLSearchParams.append()   
params.append("format", dxf);
params.append("layerName", line_layer); // URLSearchParams {size: 2}

 

✅ 메서드 toString() : 인스턴스 객체를 쿼리스트링  문자화, 인코딩된 url 주소가 문자로 나온다

URLSearchParams.toString()
// format=dxf&layerName=line_layer&testparams=a_id%3A1%3Bb_id%3A9%5C%2C13%5C%2C

 

3. 쿼리스트링 url 조회하기 

✅ 프로퍼티 size : 쿼리스트링 파라미터 수 조회

new URLSearchParams().size; // 2

 

✅ 메서드 get() : 쿼리스트링 값 조회 

{}.get("format") // dxf
{}.get("layerName") // line_layer

 

✅ 메서드 entries() : 쿼리스트링 키-값을 순회하기 위한 iterator 반환

const entries = params.entries();

for (const entry of entries) {
     console.log(entry); // ['format', 'dxf'],  ['layerName', 'line_layer']
}

 

4. 관련 URL 프로퍼티

✅ url.SearchParams

: URLSearchParams 객체를 반환함.

: 읽기전용 프로퍼티

// https://example.com/?name=Jonathan%20Smith&age=18
let params = new URL(document.location).searchParams; // {}
params.get("name"); // 'Jonathan'
parseInt(params.get("age")); // 18

 

✅ url.Search

: url에 있는 쿼리스트링을 문자열로 반환함

: 읽기,쓰기 가능 프로퍼티

const url = new URL("https://example.com/?name=Jonathan%20Smith&age=18",);

// <읽기>
url.search; // "?name=Jonathan%20Smith&age=18"

// <쓰기>
url.search = new URLSearchParams("format=dxf&layerName&r=line_layer").toString();
// "?format=dxg&layerName=line_layer"

 

 

 

 

 

---

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

https://developer.mozilla.org/en-US/docs/Web/API/URL/search

https://www.daleseo.com/js-url-search-params/