개발자 도구 · URL 인코더 및 디코더
퍼센트 인코딩 작동 방식: 문자에서 UTF-8 바이트, %XX 시퀀스까지
· 작동 방식
URL 인코딩 utf-8 퍼센트 인코딩 개발자
백분율 인코딩은 문자를 인코딩하지 않습니다. 바이트를 인코딩합니다. 이 게시물에서는 문자가 UTF-8 바이트가 된 다음 16진수 쌍이 되는 방법과 악센트 문자가 2개의 %XX 그룹을 사용하는 반면 이모티콘은 4개를 사용하는 이유를 보여줍니다.
'é'가 %E9가 아닌 %C3%A9로 바뀌는 이유 — 아래의 바이트 레이어를 나타내는 관찰
주니어 개발자가 URL에서 %C3%A9를 보면 백분율 인코딩은 문자가 아닌 바이트에서 작동합니다. 문자 é는 1바이트가 아닙니다. UTF-8는 C3 A9 두 개로 인코딩합니다. RFC 3986의 백분율 인코딩 규칙은 간단합니다. 각 바이트를 백분율 기호 뒤에 두 개의 16진수 숫자로 인코딩합니다. 이러한 구별은 설명을 신비한 것에서 논리적인 것으로 변화시킵니다.
백분율 인코딩을 이해하려면 UTF-8을 이해해야 합니다. 텍스트는 문자 인코딩을 사용하여 바이트로 변환되어야 합니다. UTF-8은 URL 및 웹의 표준입니다. 문자를 가변 길이 바이트 시퀀스로 표현합니다. ASCII는 1바이트, 악센트 문자는 2바이트, 이모티콘은 4바이트를 사용합니다. 각 단계는 문자, 유니코드 코드 포인트, UTF-8 바이트, %XX 쌍으로 구분됩니다. 바이트를 이해하지 않고 16진수로 건너뛰는 것은 요점을 놓치는 것입니다.
RFC 3986의 백분율 인코딩 규칙 — 1% 뒤에 바이트당 2개의 16진수, 대문자 선호
RFC 3986는 하나의 규칙을 정의합니다. 즉, 각 바이트를 백분율 뒤에 두 개의 대문자 16진수 숫자로 인코딩합니다. 인코딩이 필요하지 않은 예약되지 않은 문자는 문자, 숫자, 하이픈, 밑줄, 마침표 및 물결표입니다. 다른 모든 것은 인코딩되어야 합니다. 공백은 %20, 슬래시는 %2F, 백분율 기호는 %25가 됩니다. 이렇게 하면 쿼리 값의 특수 문자가 URL 구조를 손상시키는 것을 방지할 수 있습니다.
공백은 바이트 0x20으로 인코딩되어 %20이 됩니다. 슬래시는 0x2F이며 %2F가 됩니다. 이는 1바이트가 필요한 ASCII 문자입니다. 악센트 문자와 이모티콘은 다릅니다. 백분율 기호는 %25이 됩니다. 콜론과 같은 예약된 구분 기호는 구조를 보존하기 위해 인코딩됩니다. 이렇게 하면 쿼리 매개변수에 포함된 앰퍼샌드나 등호로 인해 구문 분석이 중단되는 것을 방지할 수 있습니다. 각 바이트는 %HH가 됩니다.
UTF-8 가정된 문자 세트 — 최신 URL이 UTF-8인 이유와 레거시 예외가 있는 곳
UTF-8은 가변 길이 인코딩을 사용합니다. 코드 포인트 0부터 127까지의 ASCII는 1바이트입니다. 악센트가 있는 라틴 문자를 포함하여 128부터 2047까지의 문자는 2바이트입니다. 동아시아 스크립트에서 일반적으로 사용되는 2048부터 65535까지의 문자는 3바이트입니다. 대부분의 이모티콘을 포함하여 65535 위의 문자는 4바이트입니다. 각 바이트에는 뒤에 오는 바이트 수를 나타내는 비트가 앞에 붙습니다.
악센트 문자 é는 유니코드 코드 포인트 U+00E9입니다. UTF-8는 이를 0xC3 및 0xA9의 2바이트로 인코딩합니다. 퍼센트 인코딩은 %C3%A9를 생성합니다. 독일어 ü(U+00FC)는 0xC3 0xBC로 인코딩되어 %C3%BC가 됩니다. 스페인어 ñ (U+00F1)는 0xC3 0xB1로 인코딩되어 %C3%B1이 됩니다. 패턴은 일관됩니다. 첫 번째 바이트는 2바이트 시퀀스를 나타냅니다. 악센트 부호가 있는 문자 하나는 인코딩 시 6자로 확장됩니다.
작업된 예: 'café 😀' 바이트 단위 인코딩 — 코드 포인트, UTF-8 바이트 및 결과 문자열
Emoji는 바이트 레이어를 명확하게 만듭니다. 엄지손가락을 치켜든 이모티콘 👍은 코드 포인트 U+1F44D입니다. UTF-8는 이를 4바이트(F0 9F 91 8D)로 인코딩합니다. 퍼센트 인코딩은 %F0%9F%918D(하나의 기호에 대해 12개의 문자)를 생성합니다. 스마일리 😀 (U+1F600)는 F0 9F 98 80로 인코딩되어 %F0%9F%9880가 됩니다. 4바이트 시퀀스는 12퍼센트 인코딩된 문자가 됩니다.
혼합 텍스트는 바이트 이해가 중요한 이유를 보여줍니다. "café 😀"이라는 문구에는 일반 ASCII, 악센트 및 이모티콘이 포함되어 있습니다. 문자 c, a, f는 63, 61, 66로 인코딩됩니다. é는 C3 A9로 인코딩됩니다. 공백은 20로 인코딩됩니다. 이모티콘은 F0 9F 98 80로 인코딩됩니다. 결과는 "caf%C3%A9%20%F0%9F%9880"입니다. 인코딩이 필요한 바이트를 이해하면 출력을 예측할 수 있습니다.
역방향 디코딩 — %XX 그룹을 바이트로 수집한 다음 이를 UTF-8로 해석합니다.
디코딩하면 프로세스가 반전됩니다. 디코더는 %XX 쌍을 검색하여 이를 바이트 값으로 수집합니다. %C3%A9를 보면 C3, A9바이트를 추출한다. UTF-8 디코딩은 이를 문자 é로 해석합니다. %C3만 있는 것처럼 시퀀스가 불완전한 경우 결과는 오류입니다. 디코더는 UTF-8 접두사 비트를 통해 C3에 두 번째 바이트가 필요하다는 것을 알고 있습니다.
16진수에서는 대소문자가 중요하지 않습니다. %C3%A9와 %c3%a9는 동일하게 디코딩됩니다. RFC에서는 대문자 또는 소문자를 허용하지만 대문자가 선호됩니다. 그러나 문자의 대소문자는 중요합니다. é(%C3%A9)는 É(%C3%89)와 동일하지 않습니다. URL 비교는 백분율 인코딩을 정규화해야 하며, 그렇지 않으면 동일한 리소스를 다르게 취급할 위험이 있습니다. 프레임워크는 캐싱 전에 정규화됩니다.
대소문자가 16진수에서는 문제가 되지 않지만 다른 곳에서는 문제가 되는 이유 — 정규화 규칙 및 URL 비교
RFC 3986에서는 도메인 이름에 대한 퓨니코드와 제출에 대한 양식 인코딩을 별도의 규칙으로 언급합니다. Punycode는 DNS 호환성을 위해 백분율 기호 없이 비ASCII 도메인 이름을 인코딩합니다. 도메인 😀.example은 "xn--js8h.example"이 됩니다. 양식 인코딩은 한 가지 예외를 제외하고 백분율 인코딩을 수정합니다. 공백은 %20 대신 더하기 기호가 됩니다. 신청서/x-www-form-urlencoded로 제출된 양식은 공백에 플러스를 사용합니다.
URL 인코더 도구는 구성 요소 인코딩, 전체 URL 인코딩, 양식 인코딩의 세 가지 모드를 모두 표시합니다. encodeURIComponent를 사용한 구성 요소 인코딩은 쿼리 값에 적합한 구분 기호를 포함한 모든 특수 문자를 인코딩합니다. encodeURI를 사용한 전체 URL 인코딩은 전체 URL의 구조적 문자를 보존합니다. 양식 인코딩은 POST 본문용입니다. 각각은 UTF-8을 사용합니다. 인코딩되지 않은 채로 남겨지는 바이트만 다릅니다.
퓨니코드 및 양식 인코딩: 퍼센트 인코딩 확장이 아닌 형제 표준
바이트 관점은 URL 미스터리를 해결합니다. 하나의 이모티콘에 12개의 문자가 필요한 이유는 무엇입니까? UTF-8은 4바이트를 사용하므로 각각 %HH가 됩니다. 일부 URL에는 슬래시가 %2F인 반면 다른 URL에는 일반 슬래시가 있는 이유는 무엇입니까? 인코딩 모드가 결정하기 때문에 경로 세그먼트의 슬래시는 인코딩되지 않은 상태로 유지되지만 쿼리 값 내에서는 잘못 읽는 것을 방지하기 위해 %2F여야 합니다.
예측 가능한 백분율 인코딩을 바이트 단위로 생각하세요. 문자는 유니코드 코드 포인트입니다. UTF-8은 바이트 표현입니다. 퍼센트 인코딩은 전송 형식입니다. 캐릭터 확장은 UTF-8 레이어에서 발생합니다. 16진수 대소문자는 디코딩에 영향을 주지 않지만 문자 대소문자는 영향을 미칩니다. 엄격한 접두사 규칙으로 인해 UTF-8에서 잘못된 바이트 시퀀스가 실패합니다. URL 인코더 도구는 이러한 진행 상황을 보여줍니다.
요점: 바이트 단위로 생각하기 — 브라우저에 붙여넣은 텍스트에 대해 URL 인코더 및 디코더가 정확한 %XX 출력을 표시하는 방법
작업된 예: "café 😀" 인코딩. 카페라는 단어에는 ASCII 단일 바이트인 c, a, f 문자가 있습니다: 63, 61, 66. é는 UTF-8 2바이트입니다: C3 A9. 공간은 20입니다. 이모티콘 😀은 4바이트입니다: F0 9F 98 80. 예약되지 않은 ASCII 문자는 계속 표시됩니다. 결과: "caf%C3%A9%20%F0%9F%9880". 이는 하나의 이모티콘이 12자로 확장되는 이유를 보여줍니다.
요약: 문자가 아닌 바이트 단위로 생각하세요. UTF-8 인코딩 후에 백분율 인코딩이 적용됩니다. 각 바이트는 %HH가 됩니다. 가변 길이 UTF-8은 문자가 다르게 확장됨을 의미합니다. ASCII는 %XX(2자), 2바이트 액센트는 %XX%XX(6자), 4바이트 이모티콘은 %XX%XX%XX%XX(12자)가 됩니다. URL 인코더 도구에 텍스트를 붙여넣고 진행 상황을 관찰합니다.