본문 바로가기

JavaScript & JQuery

인코딩 관련 함수

  웹 개발을 하다보면 클라이언트 <-> 서버 간 데이터를 주고받을때 데이터가 깨지거나, 원하는 값을 제대로 전달받지 못하는 경우가 발생합니다. 클라이언트<->서버간 데이터를 주고받을 때 XML, URL 파라메터, 한글, 특수문자등의 데이터를 인코딩/디코딩 함수를 통하여 변환을 적절하게 해주어야 합니다.


1. Javascript 인코딩 관련 함수


escape()

A~Z, a~z, 1~0 , @*-_+./ 등이 아스키문자가 아니라면 모두 유니코드 형식으로 변환

 

encodeURI()

escape() 비슷하지만 인터넷 주소 표시에 쓰이는 특수문자들 (:;/=?&)등의 특수문자는 인코딩이 되지 않음 . 보통 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩 사용


encodeURIComponent()

encodeURI()에서 (;:/=?&)등의 특수문자들이 추가로 인코딩이


인코딩 된 값

 디코딩 된 값

 %26

 &

 %2F

 /

 %3A

 :

 %3F

 ?

 %3D

 =










2. Javascript 디코딩 관련 함수


unescape()

유니코드 형식의 문자가 원문자로 변환

 

decodeURI()

encodeURI()로 인코딩된 값을 원문자로 변환

 

decodeURIComponent()

encodeURIComponent()로 인코딩된 값을 원문자로 변환




3. 활용 예시

   

  3.1 escape()

 클라이언트 -> 서버측으로 한글,특수문자 등의 값을 전달할때

 Ex_ '(싱글쿼테이션), "(더블쿼테이션), 한글 등

      

 

  3.2 encodeURI()

 클라이언트 -> 서버측으로 URL 파라메터를 전달할때
 (필자 의견으로는 encodeURIComponent() 함수를 더 많이사용하는것 같음)


Ex_ 서버측으로 전달하려는 값이 https://www.mypage.aspx?type=home&returnURL=A 같은 형태일경우

     

   

  3.3 encodeURIComponent()

 클라이언트 -> 서버측으로 URL을 전달할때, URL 파라메터 안에 URL 형태가 존재하는 경우


 Ex_ 서버측으로 전달하려는 값이 https://www.mypage.aspx?  type=home&returnURL=https://www.naver.com?type=login&status=susscess 같은 형태일경우에 returnURL파라메터 안의 값을 전부 encodeURIComponent()로 인코딩해서 전달해야 한다.


만일 클라이언트 측에서 인코딩하여 서버로 전달하지 않으면, 서버측에서는 returnURL 파라메터의 값을 꺼냈을때 https://www.naver.com?type=login&status=susscess 가 아닌 https://www.naver.com?type=login 만 꺼내지게 됩니다. &status 파라메터가 잘리게 되기 때문에 원하는 returnURL값이 꺼내지지 않게 됩니다.