URL 인코더 및 디코더

URL은 원래 인터넷을 통해 ASCII 텍스트를 전송하도록 설계되었습니다. URL 사양(RFC 3986)은 특수 목적을 위해 특정 문자를 예약합니다: '?'는 경로와 쿼리 문자열을 분리하고, '&'는 매개변수를 분리하고, '='는 키와 값을 분리하고, '#'는 프래그먼트를 표시하고, '/'는 경로 세그먼트를 분리합니다. 이러한 문자가 URL의 데이터 부분(검색 쿼리나 매개변수 값)에 나타나면 구조적 구분자로 해석되지 않도록 인코딩해야 합니다.

URL 인코딩(퍼센트 인코딩)은 예약된 문자 또는 비ASCII 문자 각각을 퍼센트 기호(%)와 문자의 바이트 값을 나타내는 두 개의 16진수 숫자로 대체합니다. 예를 들어, 공백은 %20이 되고, 앰퍼샌드는 %26이 되며, 슬래시는 %2F가 됩니다. 예약되지 않은 집합(A-Z, a-z, 0-9, 하이픈, 밑줄, 마침표, 물결표)의 문자는 인코딩되지 않습니다. JavaScript 함수 encodeURIComponent()가 이 인코딩을 처리하며, decodeURIComponent()가 이를 역으로 수행합니다.

현대 URL은 유니코드 문자(이모지, CJK 문자, 악센트 문자)도 처리해야 합니다. 이러한 문자는 먼저 UTF-8 바이트로 인코딩된 다음, 각 바이트가 퍼센트 인코딩됩니다. 예를 들어, 커피 이모지 ☕(U+2615)는 UTF-8 바이트 E2 98 95로 인코딩되어 URL에서 %E2%98%95가 됩니다. 브라우저와 서버는 URL을 입력하거나 폼을 제출할 때 이 인코딩을 자동으로 처리하지만, 개발자는 API 엔드포인트, 리디렉트 URL 또는 데이터 URI를 구축할 때 URL을 수동으로 인코딩하거나 디코딩해야 하는 경우가 많습니다.

웹 응용 프로그램에서 URL을 통해 데이터를 전달할 때 URL 인코딩은 필수적입니다. 일반적인 시나리오에는 API 쿼리 매개변수 구축(검색어, 필터 값 인코딩), 원래 URL을 매개변수로 포함하는 리디렉트 URL 생성(예: /login?redirect=%2Fdashboard), 포함된 이미지나 글꼴을 위한 데이터 URI 생성, 제목과 본문 매개변수가 있는 이메일 링크 인코딩(mailto:?subject=...&body=...)이 포함됩니다. OAuth 흐름도 상태 매개변수와 콜백 URL을 위해 URL 인코딩에 크게 의존합니다.

일반적인 버그는 이중 인코딩입니다. 이미 인코딩된 문자열을 다시 인코딩하는 것입니다. 예를 들어, '%20'을 인코딩하면 '%2520'이 됩니다(퍼센트 기호 자체가 %25로 인코딩됨). 문자열의 현재 상태를 확신할 수 없는 경우 재인코딩 전에 항상 디코딩하세요. 또 다른 일반적인 문제는 encodeURIComponent() 대신 encodeURI()를 사용하는 것입니다. encodeURI()는 ?, &, =와 같은 예약 문자를 인코딩하지 않아 매개변수 값 인코딩에 부적합합니다. 개별 매개변수 값에는 encodeURIComponent()를 사용하고, 완전한 URL에만 encodeURI()를 사용하세요.