[웹 프로그래밍] GET 방식으로 query string 넘길 때 특수문자 사라짐 현상

웹에서 GET방식으로 어떤 값을 넘겨줄 때 간혹 제대로 나오지 않는 문자가 있습니다. 바로 특수문자중에 +와 &인데 GET방식으로 하면 Query String으로 URL의 뒤에 '?'문자와 함께 같이 붙어져서 URL을 구성합니다. Query String 방식으로 넘겨주면 +와 &는 생략이 되는데 저같은 경우는 검색 기능을 넣을 때 버그사항으로 경험했습니다. 검색어 중에 (+)와 같은 기호가 들어가는 부분이 있었는데 +가 생략되는 바람에 엉뚱한 결과물이 나오거나 아예 안나오는 상황이 발생했습니다. 이는 해결 방법은 간단합니다.

 

---

 

해결방법

간단하게 URI의 인코딩 방식인 퍼센트 인코딩(percent-encoding)으로 인코딩을 해주면 됩니다. 퍼센트 인코딩에 따르면 알파벳이나 숫자 등 몇몇 문자들을 제외한 나머지 특수문자들은 옥텟 단위로 묶어서, 16진수 값으로 인코딩합니다. 즉 +와 &만 퍼센트 인코딩으로 바꿔주거나 URI 전체를 퍼센트 인코딩으로 바꾸어주면 됩니다.

 

function replace(url) {     url= url.replace(/&/g,"%26").replace(/\+/g,"%2B");     return url; }

 

또는

 

function replace(url) {     url= encodeURIComponent(url);     return url; }

 

퍼센트 인코딩으로 인코딩 및 디코딩을 해주는 함수가 javascript에 4종류가 있는데 다음과 같습니다.

 

• encodeURI( uri ) : URI에서 자주 사용하는 : ; / = ? & 등을 제외하고 인코딩하는 함수
• encodeURIComponent( uri ) : 모든 문자를 인코딩하는 함수
• decodeURI( uri ) : encodeURI의 결과물을 디코딩하는 함수
• decoudeURIComponent ( uri ) : encodeURIComponent의 결과물을 디코딩하는 함수

 

 

---

 

 

퍼센트 인코딩 규약이 정의되어 있는 RFC 3986에 따르면 URI에서 중요하게 사용되는 예약문자가 있고, 그렇지 않은 비예약 문자가 있습니다. 예약문자는 위에서 인코딩시켜준 +와 &말고도 아래와 같이 더 많습니다.

 

예약문자

! * ' ( ) ; : @ & = + $ , / ? # [ ]

 

 

 

비예약문자

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 - _ . ~

 

비예약 문자는 위와 같습니다. 비예약 문자들은 인코딩할 필요 없고 안하는 것을 권장합니다.

 

 

 

참고

https://www.codingfactory.net/10377

https://ko.wikipedia.org/wiki/%ED%8D%BC%EC%84%BC%ED%8A%B8_%EC%9D%B8%EC%BD%94%EB%94%A9