URL 쿼리 파싱은 어떻게 할래?

velog 블로그에서 tistory로 이전한 데이터 입니다. 2020-12-2

도입

네이버 FE 면접에서 url query를 파싱하는 방법에 대해 물어봤던 적이 있다.
아마 뛰어난 분들은 잘 하시겠지만 간단하게 만드시는 분들도 많을 것이다.

당시에 나는 어떻게 했을까?

내 풀이

문제 예시: key=123&name=djlee&address=suwon
결과 : {key: "123", name: "djlee", address: "suwon"}

function queryParsing(str) {
    const result = {};
    const arr = str.split('&');

    arr.forEach(sub => {
        const [key,value] = sub.split('=');
        result[key] = value;
    });

    return result;
}

고민사항

array가 들어왔을 땐, 그리고 한글일 땐?
어떻게 할까?

다시 풀어보자

• array에 한글 포함 경우 (제약사항: query 배열을 받는 경우가 다양하기에 예시와 다를 수 있다. )

  예시: page=1&sort=newest&language=%ED%95%9C%EA%B5%AD%EC%96%B4%2C%EC%A4%91%EA%B5%AD%EC%96%B4%2C%EC%98%81%EC%96%B4
  앞전 코드로의 결과 : {page: "1", sort: "newest", language: "%ED%95%9C%EA%B5%AD%EC%96%B4%2C%EC%A4%91%EA%B5%AD%EC%96%B4%2C%EC%98%81%EC%96%B4"}
  아래 코드로의 결과 : {page: "1", sort: "newest", language: Array(3)}
        > language: (3) ["한국어", "중국어", "영어"]
  

function queryParsing(str) {
const decodedQuery = decodeURIComponent(str);
const result = {};

const arr = decodedQuery.split('&');
arr.forEach(sub => {
    const [key,values] = sub.split('=');
    const arrValue = values.split(',');
    result[key] = arrValue.length > 1 ? arrValue: values;
});
return result;

}

결과가 잘 들어온다. 하지만 Object result에 바로 들어가는 게 맘에 들지 않는다.  

## 개선하기

function queryParsing(str) {
const decodedQuery = decodeURIComponent(str);
const result = new Map();

const arr = decodedQuery.split('&');
arr.forEach(sub => {
    const [key,values] = sub.split('=');
    const arrValue = values.split(',');
    result.set(key,arrValue.length > 1 ? arrValue: values);
});
return Object.fromEntries(result);

}
fromEntries는 node v12 부터 지원하기 때문에 MDN 문서도 자주 읽어서 이해하자.

## 결론

보통은 axios나 parser가 적용된 express를 사용하다보면 파싱을 따로 안해도 결과를 받아올 수가 있다.
하지만 문제를 풀어야 하는 입장에서 주워진다면 어떻게 할지 고민해 보는것도 좋은 것 같다.

내 풀이가 좋다고는 말할 수 없다. 따라서 좋은 생각이 있는 분이 댓글을 남겨주시면 보고 배우고 싶다.