옛날에 작성된 코드를 보면 아래와 같이 처리된 코드들이 있다.
function query({name,address,phone}) {
let arr = [];
name && arr.push(`name=${name}`);
address && arr.push(`address=${address}`);
phone && arr.push(`phone=${phone}`);
arr = arr.join('&');
return axios.get(`${URL}/user?${arr}`);
}
의도한 결과는 잘 나올것이다. 하지만 최근에는 URLSearchParams를 사용하면 쉽게 해결할 수 있다.
function query({name,address,phone}) {
let q = new URLSearchParams();
name && q.set(`name`,name);
address && q.set(`address`,address);
phone && q.set(`phone`,phone);
return axios.get(`${URL}/user?${q.toString()}`);
}
1. query({name:'djlee',address:'suwon'})
"name=djlee&address=suwon"
2. query({name:'djlee',address:'suwon',phone:undefined})
"name=djlee&address=suwon"
3. query({name:'djlee',address:'suwon',phone:'010-1234-1234'})
"name=djlee&address=suwon&phone=010-1234-1234"
URLSearchParams에 대한 다양한 사용법은 MDN URLSearchParams 에서 볼 수 있다.
최신의 방법을 사용하는게 좋은 것 같다.
이 URLSearchParams는 explorer를 제외한 나머지 브라우저에서는 전부 호환이 된다.
explorer가 종료를 발표하지 않았다면 아마 범용성을 고려해서 사용못했던 사람도 있을 수도 있다고 본다.
멈추지말고 계속 공부해보는 습관을 가져야 겠다.