블로그 주소의 +가 공백으로 읽힐 때: 검색 값과 실제 더하기 기호 구분
검색 값의 +를 실제 더하기 기호로 보존해야 한다면 주소 문자열을 만드는 방식을 확인하세요. URLSearchParams 생성자는 검색 문자열 안의 +를 공백으로 읽습니다. 링크가 열린다는 확인과 검색 값이 보존됐다는 확인을 나눠야 합니다.
1. 같은 글자처럼 보여도 해석된 값은 다르기
MDN의 URLSearchParams 안내는 더하기 기호 보존 문제를 별도로 설명합니다. 이 규칙은 검색 매개변수를 읽고 쓰는 방식에 관한 것입니다. 주소의 모든 위치에 있는 +를 무조건 바꾸라는 의미가 아닙니다.
| 검색 문자열 | get("q")로 읽는 값 | 확인할 뜻 |
|---|---|---|
| q=A+B | A B | 가운데가 공백 |
| q=A%2BB | A+B | 더하기 기호가 값 안에 있음 |
표는 실제 비공개 링크가 아닌 자체 연습 값입니다. 두 경우를 로컬 계산으로 확인했습니다. 검색어나 캠페인 코드에 +가 포함되어 있다면 원래 값과 읽은 값을 나란히 놓아 비교하세요.
2. 값을 이어 붙이기보다 append로 구성
값을 문자열에 그대로 끼워 넣으면 원래 +와 공백 표현을 혼동할 수 있습니다. MDN은 개별 키와 값을 append로 추가하는 방식을 설명합니다. 아래 코드는 URLSearchParams가 어떻게 문자열을 만드는지 보는 연습이며 실제 링크를 열거나 외부에 데이터를 보내지 않습니다.
const params = new URLSearchParams();
params.append("q", "A+B");
params.toString(); // q=A%2BB
params.get("q"); // A+B개별 값에 append를 쓸 때는 이미 인코딩한 문자열을 다시 넣지 않습니다. 예를 들어 원래 값과 이미 변환한 값을 섞으면 % 기호가 다시 인코딩되어 예상과 다른 문자열을 만들 수 있습니다. 어떤 단계에서 변환했는지 기록하는 것이 먼저입니다.
3. 원본 값·저장 주소·읽은 값 나란히 검수
가상의 블로그 도구가 ‘A+B’라는 분류 값을 링크에 넣는다면 원본 값, 도구가 저장한 검색 문자열, 목적지에서 읽은 값을 비교합니다. 화면에 같은 페이지 제목이 보인다고 분류 값까지 같다고 판단하지 않습니다.
코드 안의 값과 실제 공개 링크의 값이 같은지 따로 확인하세요. 실제 사이트가 검색 값을 처리하는 방식은 그 사이트의 구현에 달려 있습니다. URLSearchParams의 연습 결과를 모든 서버의 결과로 확대하지 않습니다.
인증 토큰이나 개인정보가 들어간 실제 주소를 공개 예제에 복사하지 마세요. 재현에는 위와 같은 무해한 자체 값으로 충분합니다. 점검 기록도 링크 전체보다 문제 위치와 원본·변환 단계의 차이를 남기는 편이 좋습니다.
4. 자주 묻는 질문
주소의 모든 +를 %2B로 바꾸면 되나요?
위치와 원래 의미를 먼저 확인해야 합니다. 이 글은 검색 값을 URLSearchParams로 처리하는 범위를 설명합니다.
get으로 값이 나왔으면 링크 이동도 확인됐나요?
문자열 계산과 실제 공개 페이지 이동은 별도 확인입니다. 원하는 내용이 표시되는지도 보세요.
인코딩을 두 번 하면 더 안전한가요?
같은 값에 변환을 반복하면 원래 값과 달라질 수 있습니다. 원본 값과 처리 단계를 구분하세요.
MDN 더하기 기호 보존 예제 확인자료 확인: 2026년 10월 8일. MDN: URLSearchParams
대표 썸네일 삽화는 이해를 돕기 위해 AI로 제작했습니다.
