[JavaScript] URL 인코딩과 디코딩 쉽고 간단하게 적용

URL 인코딩과 디코딩은 웹 개발에서 자주 사용되는 기능입니다. URL 내에서 사용되는 문자들은 특정 규칙에 따라 인코딩되며, 이는 웹 브라우저가 URL을 제대로 해석하기 위해 필요합니다. 예를 들어, 공백은 %20으로 인코딩되고, 일부 특수 문자는 특정한 방식으로 변환됩니다. JavaScript에서 이러한 작업을 수행하는 방법을 아래와 같이 설명하겠습니다.

URL 인코딩/디코딩이 필요한 이유

URL에 포함될 수 없는 특수 문자나 공백을 안전하게 전달하기 위해서, URL 인코딩을 사용합니다. 예를 들어, 공백, #, ? 같은 문자들은 URL 내에서 문제를 일으킬 수 있으므로 인코딩이 필요합니다.

• 인코딩: URL 내의 특정 문자를 안전한 형식으로 변환
• 디코딩: 인코딩된 URL을 원래의 문자열로 변환

---

JavaScript로 URL 인코딩과 디코딩하기

JavaScript에서는 기본적으로 encodeURIComponent()와 decodeURIComponent() 함수를 사용하여 URL 인코딩과 디코딩을 쉽게 수행할 수 있습니다.

1. JavaScript로 URL 인코딩하기

encodeURIComponent() 함수는 URL에서 사용할 수 없는 문자를 인코딩된 문자열로 변환해 줍니다. 주로 쿼리 파라미터의 값을 안전하게 전달할 때 사용됩니다.

// 인코딩할 문자열
let originalString = "Hello World! This is a test for #URL encoding";

// URL 인코딩
let encodedString = encodeURIComponent(originalString);

console.log("원본 문자열: " + originalString);
console.log("인코딩된 문자열: " + encodedString);

 

결과:

원본 문자열: Hello World! This is a test for #URL encoding
인코딩된 문자열: Hello%20World!%20This%20is%20a%20test%20for%20%23URL%20encoding

2. JavaScript로 URL 디코딩하기

decodeURIComponent() 함수는 인코딩된 URL을 다시 원래의 문자열로 변환해 줍니다.

// 인코딩된 문자열
let encodedString = "Hello%20World!%20This%20is%20a%20test%20for%20%23URL%20encoding";

// URL 디코딩
let decodedString = decodeURIComponent(encodedString);

console.log("인코딩된 문자열: " + encodedString);
console.log("디코딩된 문자열: " + decodedString);

 

결과:

인코딩된 문자열: Hello%20World!%20This%20is%20a%20test%20for%20%23URL%20encoding
디코딩된 문자열: Hello World! This is a test for #URL encoding

 

참고 사항

• encodeURIComponent()는 URL 쿼리 파라미터에서 값을 인코딩할 때 사용되며, 전체 URL을 인코딩할 때는 적합하지 않습니다. 전체 URL을 인코딩할 때는 encodeURI()를 사용해야 합니다.
• encodeURIComponent()는 다음과 같은 문자를 인코딩합니다: ;,/?:@&=+$#
• encodeURI()는 URL 전체에서 사용되며, 쿼리 파라미터 값에는 적용되지 않습니다. 쿼리 파라미터의 값을 인코딩할 때는 반드시 encodeURIComponent()를 사용해야 합니다.

---

 

JavaScript에서 URL 인코딩과 디코딩은 매우 간단하게 수행할 수 있습니다. encodeURIComponent()와 decodeURIComponent() 함수는 URL 내에서 사용되지 말아야 할 문자를 안전하게 변환해주며, 이를 통해 웹 애플리케이션의 안정성을 보장할 수 있습니다.