URL을 안전하게 인코딩하거나 디코딩합니다. 쿼리 파라미터의 특수문자, 한글, 공백 등을 처리하여 올바른 URL을 생성합니다.
URL 인코딩(퍼센트 인코딩)은 URL에서 안전하지 않은 문자를 %와 16진수 코드로 변환하는 과정입니다. URL은 ASCII 문자만 허용하므로 한글, 특수문자, 공백 등은 인코딩이 필요합니다. 예를 들어 공백은 %20, @는 %40, 한글 "안녕"은 %EC%95%88%EB%85%95으로 변환됩니다. RFC 3986 표준에 정의되어 있으며, A-Z, a-z, 0-9, -, _, ., ~ 외의 문자는 인코딩해야 합니다. 쿼리 파라미터, 경로, 해시 등 URL의 각 부분마다 인코딩 규칙이 다릅니다.
URL에서 특수문자는 특별한 의미를 가지므로 값으로 사용하려면 인코딩이 필수입니다. 예를 들어 &는 파라미터 구분자이므로 값에 &를 포함하려면 %26으로 인코딩해야 합니다. =는 키-값 구분자, ?는 쿼리 시작, #은 프래그먼트 시작을 의미합니다. 공백도 +나 %20으로 인코딩합니다. 한글이나 특수문자를 인코딩하지 않으면 서버에서 올바르게 파싱하지 못하거나 404 오류가 발생합니다. 특히 검색어, 사용자 입력값을 URL에 포함할 때는 반드시 인코딩하세요.
쿼리 파라미터는 URL에서 가장 자주 인코딩이 필요한 부분입니다. 예: https://example.com/search?q=검색어&category=IT. 여기서 "검색어"와 "IT"는 모두 인코딩해야 합니다. JavaScript의 encodeURIComponent()를 사용하면 =, &, ? 등도 인코딩되어 쿼리 파라미터 값으로 안전하게 전달됩니다. encodeURI()는 URL 전체를 인코딩할 때 사용하지만 =, &, ?는 인코딩하지 않아 쿼리 값에는 부적합합니다. 항상 키와 값을 개별적으로 encodeURIComponent()로 인코딩하세요.
JavaScript에는 두 가지 URL 인코딩 함수가 있습니다. encodeURI()는 URL 전체를 인코딩하며 :, /, ?, &, = 같은 URL 구조 문자는 인코딩하지 않습니다. 완전한 URL을 인코딩할 때 사용합니다. encodeURIComponent()는 URL의 부분(파라미터 값 등)을 인코딩하며 구조 문자도 모두 인코딩합니다. 쿼리 파라미터, 경로 세그먼트 같은 개별 컴포넌트에 사용합니다. 대부분의 경우 encodeURIComponent()를 사용하는 것이 안전합니다. decodeURI()와 decodeURIComponent()로 각각 디코딩할 수 있습니다.
한글이나 다른 언어로 된 도메인 이름(예: 한국.com)은 Punycode로 변환됩니다. Punycode는 유니코드 도메인을 ASCII로 표현하는 방법으로, xn-- 접두사를 사용합니다. 예: "한국.com"은 "xn--3e0b707e.com"으로 변환됩니다. 브라우저는 자동으로 이 변환을 수행하지만, 코드에서 직접 처리할 때는 Punycode 라이브러리가 필요합니다. URL의 경로나 쿼리는 일반 퍼센트 인코딩을 사용하지만, 도메인은 Punycode를 사용한다는 점에 주의하세요.
URL 인코딩 시 주의사항이 있습니다. 사용자 입력은 항상 인코딩하여 XSS 공격을 방지하세요. 이미 인코딩된 URL을 중복 인코딩하지 않도록 주의하세요(이중 인코딩 문제). URL을 구성할 때는 각 부분을 개별적으로 인코딩한 후 결합하세요. fetch(), axios 같은 HTTP 클라이언트는 자동으로 인코딩하는 경우가 많으니 중복을 피하세요. 서버에서는 자동 디코딩을 지원하므로 대부분 명시적 디코딩이 불필요합니다. URL을 로깅하거나 디버깅할 때는 디코딩된 형태를 확인하는 것이 읽기 쉽습니다.