URL 인코더·디코더

두 가지 인코딩의 차이

• 전체 인코딩 (encodeURIComponent) — / ? & = : 같은 URL 구분 문자까지 전부 변환합니다. 쿼리 값 하나를 넣을 때 씁니다. 예: 검색어 "A&B"를 ?q=A%26B로.
• URL 인코딩 (encodeURI) — 구분 문자는 그대로 두고 한글·공백 같은 것만 변환합니다. URL 전체를 안전하게 만들 때 씁니다.

이럴 때 필요합니다

주소창에서 복사한 링크가 %EC%95%88%EB%85%95처럼 보일 때 디코딩하면 원래 한글이 보입니다. 반대로 API 요청이나 링크 파라미터에 한글을 넣어야 할 때 인코딩합니다. 카카오톡·엑셀에서 링크가 중간에 끊긴다면 공백·특수문자를 인코딩하지 않아서인 경우가 많습니다.

디코딩 시 +는 공백으로 처리합니다(폼 전송 방식 호환).

퍼센트 인코딩이 왜 필요한가

URL에는 영문·숫자와 일부 기호(-_.~)만 안전하게 쓸 수 있습니다. 한글·공백·특수문자는 바이트 단위로 쪼갠 뒤 % + 16진수 두 자리로 바꿔야 서버가 제대로 알아듣습니다.

한글 한 글자는 UTF-8에서 3바이트라 %XX%XX%XX 아홉 글자가 됩니다. "한" → %ED%95%9C. 한글이 섞인 주소를 복사하면 유난히 길어지는 이유입니다.

공백은 %20 일까 + 일까

둘 다 쓰이지만 위치에 따라 다릅니다.

• 경로(path) — 반드시 %20. 여기서 +는 그냥 더하기 기호로 읽힙니다
• 쿼리스트링 — 폼 전송 방식에서는 +가 공백을 뜻합니다

헷갈린다면 %20을 쓰는 쪽이 항상 안전합니다. 모든 위치에서 공백으로 해석됩니다.

encodeURI 와 encodeURIComponent

자바스크립트에는 두 함수가 있고 잘못 고르면 링크가 깨집니다.

• encodeURIComponent — / ? & = # 까지 전부 변환합니다. 값 하나를 인코딩할 때 씁니다
• encodeURI — 위 기호는 그대로 둡니다. 주소 전체를 한 번 정리할 때 씁니다

검색어처럼 &가 들어갈 수 있는 값에 encodeURI를 쓰면 그 &가 파라미터 구분자로 오해돼 값이 잘립니다. 파라미터 값에는 encodeURIComponent가 원칙입니다.

# 뒤는 서버에 전달되지 않습니다

URL에서 # 이후(프래그먼트)는 브라우저 안에서만 쓰이고 서버로 가지 않습니다. 값 안에 #가 들어가야 한다면 반드시 %23으로 인코딩해야 합니다. +도 %2B로 바꾸지 않으면 공백으로 바뀔 수 있고, &는 %26으로 써야 파라미터가 끊기지 않습니다.