[ 타입스크립트(TypeScript) ] query문의 value값에 key값과 동일한 값이 들어가있을 때

📍 query문의 value값에 key값과 동일한 값이 들어가있을 때

본인인증 기능을 구현하던 중 query에 key1=value1&key2=value2값이 추가된 상태로 다른 페이지를 방문하고 마지막에 query문을 변수로 사용하려고 할 때 겪었던 일이다. 당시 URL은 http://localhost:3001/foo/bar?returnUrl=returnUrl=/foo&id=baz와 같았는데 query문을 분석하면 returnUrl=returnUrl=/foo가 한 묶음 id=baz가 한 묶음인 총 2개의 query가 나왔다.

 

두번째 query값은 별 이상이 없었으나, 첫번째 query가 이상했는데, 바로 첫번째 query의 key값인 returnUrl이 value값에도 들어가있다는 점이었다. 당시 value에 returnUrl=은 필요없기 때문에 해당 값을 제거해야 할 필요성을 느꼈는데, 나중에 매우 간편한 방법으로 해결했지만 처음엔 어떻게 제거해야할지 몰랐다. 그래서 qs 라이브러리의 encoder을 이용했다. 사용방법은 README를 참고하자.

728x90

stringify의 두번째인자에 encoder 함수를 선언하면 첫번째 인자에 query문이 넘어오게 되고, 네번째 인자인 type을 이용해 type이 value일 때 조건을 걸어 원하는 쿼리값이 넘어오면 includes를 통해 split을 하는방법을 사용했으나, 가독성이 매우 떨어지는 코드가 되었다. 그래서 곰곰이 생각 + 코드리뷰 끝에 떠올린것은 query문을 넘겨줄 때 key값을 만들어 넘기는 방법 대신 qs.parse를 이용하여 key값을 만들지 않고 value에 있는 값(returnUrl=/foo)의 returnUrl을 key값인 객체형태로 만들어 qs.stringify에 넘겨줄 때 spread operator를 사용했고 결과적으로 이전 코드보다 더 가독성이 좋아진 코드가 되었다. qs.stringify를 사용할 때 key값이 value에 중복선언 되어있어 제거해야하는 경우가 필요하다면 이 글처럼 parse + ...로 해결해보자. 불필요하게 encoder를 사용하지 않고도 해결 할 수 있다.

import { stringify } from 'qs'

// encoder example
var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str, defaultEncoder, charset, type) {
    if (type === 'key') {
        return // Encoded key
    } else if (type === 'value') {
        return // Encoded value
    }
}})

// before
const url = generateUrl({
    path,
    query: stringify(
      {
        returnUrl: returnUrlQuery,
        ordrIdxx,
      },
      {
        encoder: (query: string, _0, _1, type) => {
          if (type === 'value') {
            const value = 'returnUrl='
            const isValue = query.includes(value)
            if (isValue) {
              const [, extractValue] = query.split(value)
              return extractValue
            }
          }
          return query
        },
      },
    ),
  })

// after
import { stringify, parse } from 'qs'

const { path, query: returnUrlQuery } = parseUrl(returnUrl) // returnUrlQuery: returnUrl=/foo
const originalQuery = parse(returnUrlQuery)  // { returnUrl: '/foo' }

const url = generateUrl({
  path,
  query: stringify({
    ...originalQuery,
    baz,
  }),
  })  // url: /foo/bar?returnUrl=/foo

Reference

1. qs-stringify