[ TIL ] query parameter 로 특수문자 보낼때 encodeURIComponent 사용하기 (퍼센트 인코딩)

 

get 요청을 할 때 파일 이름을 파라미터로 보내서 엑셀 파일을 받아오는 기능이 있다. 

파일 이름에 특수문자가 포함되어있을 때 파일 이름을 제대로 보내지 못해 엑셀 파일을 못 받아오고 있었다. 

 

encodeURIComponent("test?");

 

퍼센트 인코딩은 그냥 인코딩 하고싶은 문자열을 표준내장 객체인 encodeURIComponent 을 사용해주면된다.

 

encodeURIComponent 도 있고 encodeURI 도 있는데 

둘의 차이는  encodeURIComponent 가 좀 더 많은 종류의 특수문자를 퍼센트 인코딩 한다는 것이다. 

 

encodeURIComponent 는 

Not Escaped:

    A-Z a-z 0-9 - _ . ! ~ * ' ( )

이걸 제외하고 인코딩 한다고 하고 

 

encodeURI 는

이스케이프 하지 않는 문자:

    A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

이걸 제외하고 인코딩한다고 한다. 

 

쿼리스트링 혹은 쿼리파라미터에 특수문자가 있을 때 encodeURIComponent 를 사용하면 되겠다 ~

 

URL 인코딩이란 URL 에서 URL로 사용할 수 없는 문자 혹은 URL 로 사용할 수 있지만 의미가 왜곡 될 수 있는 문자들을 

"%XX" 형태로 변환하는 것을 말한다. 

XX는 16진수 값이다. 그리고 URL 디코딩이란 변환된 URL 을 원래 형태로 되돌리는 것을 말한다. 

 

왜 변환 해 줘야 할까?

인터넷을 통해 전송할 수 있는 문자는 오로지 아스키 문자 라서 .

아스키 문자가 아닌 문자는 변환 해 주어야함 

한글 -> 아스키 문자 변화은 UTF-8 규칙을 따른다. 

 

아스키더라도 예약된 의미를 가지고있는 문자의 경우, 그 문자 자체의 의미를 전달하고 싶은 경우에는 이스케이프 처리가 필요하다. 

/ , & , = 들은 아스키 문자이지만 URL 내에서 특별한 의미를 지니고 있다. 그래서 이 문자들을 문자 그대로 전달하고 싶다면 이스케이프 처리가 필요하다

 

URL 은 공백문자가 허용되지 않는다 !! 공백은 %20 혹은 +로 인코딩 된다고 한다.

 

 

 

 

참조 

 

https://steady-snail.tistory.com/111

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

encodeURIComponent() - JavaScript | MDN

https://it-eldorado.tistory.com/61

[문자열 인코딩] ASCII, ANSI, UTF-8, UTF-16 등

https://it-eldorado.tistory.com/143

[Web] URL 인코딩/디코딩 (URL Encoding/Decoding)

 

 

+) 헷갈렸던 개념 정리 

Query string 쿼리스트링이란?

URL 에서 물음표 다음에 오는 것들이 쿼리 스트링

 

/profiles/velopert 

이런식으로 값을 전달하는건 파라미터