URLSearchParams append·set: UTM을 더할 때 같은 키가 겹치는 이유
URLSearchParams.append()는 같은 키가 있어도 새 값 쌍을 추가합니다. set()은 해당 키의 값을 지정하면서 같은 키의 다른 값은 지웁니다. UTM을 붙인 주소에서 같은 이름이 두 번 보인다면 두 메서드의 역할부터 확인하세요.
1. append는 새 쌍을 덧붙입니다
링크 목록에서 반복 키를 발견했다고 곧바로 오류라고 지우지는 마세요. 검색 필터처럼 여러 값을 의도한 주소도 있을 수 있습니다. 먼저 이 주소에서 키 하나가 한 값만 가져야 하는지, 여러 선택을 표현하는지 구분하는 편이 좋습니다.
아래는 외부로 요청하지 않는 문자열 예시입니다. 실제 서비스나 추적 링크에 접속해서 결과를 얻었다는 뜻은 아닙니다.
const p = new URLSearchParams('tag=book&tag=life');
p.append('tag', 'travel');
console.log(p.toString());
// tag=book&tag=life&tag=travel2. set은 같은 키의 값을 하나로 정합니다
| 원본 | 조작 | 결과 |
|---|---|---|
| tag=book&tag=life | append('tag','travel') | tag가 세 번 |
| tag=book&tag=life | set('tag','travel') | tag=travel |
| 키가 없는 상태 | set('tag','travel') | 새 tag 쌍 생성 |
기존 UTM을 새로운 값 하나로 교체하려는 목적과, 검색 필터를 하나 더 넣으려는 목적은 다릅니다. 메서드 이름을 외우기 전에 결과 주소에서 몇 개의 같은 키가 남아야 하는지를 먼저 적어보세요.
3. 바꾼 주소와 원본을 따로 비교합니다
자체 점검 목록에는 원본 URL / 변경 목적 / 사용한 메서드 / 변경 뒤 쿼리 / 확인할 목적지를 남깁니다. 문자열을 정리하는 작업과 실제 서비스가 반복 키를 어떻게 처리하는지 확인하는 작업을 같은 완료 표시로 묶지 마세요.
블로그의 버튼 주소를 바꾸는 경우라면 원본을 보존하고 해당 버튼의 전체 목적지를 대조합니다. 모든 반복 키를 자동 삭제하는 규칙을 한꺼번에 적용하기보다, 필요한 키와 기대 결과를 정한 뒤 검토하는 편이 안전합니다.
set을 쓰면 URL의 유효성 검증도 끝나나요?
아닙니다. 여기서 확인한 것은 쿼리 키·값을 바꾸는 동작입니다. 도메인·페이지 존재·실제 공개 상태는 별도로 확인해야 합니다.
자료 확인: 2026년 10월 20일. MDN append, MDN set
대표 이미지는 AI로 제작한 개념 삽화이며, 본문 도표는 설명을 위해 직접 구성했습니다.
