12-6. Global 오브젝트 / 인코딩, 디코딩

encodeURI()

• URI를 인코딩(Encoding)하여 반환 (URI란 주소창 끝에 첨부되는 값을 뜻합니다.)

  • Uniform Resource Identifier

  • 인코딩 제외 문자를 제외하고 “%16진수%16진수” 형태로 변환

      var uri = "data?a=번&b=호";
      console.log(encodeURI(uri)); // data?a=%EB%B2%88&b=%ED%98%B8
    

data?a=%EB%B2%88&b=%ED%98%B8
“번, 호” 이렇게 두 글자만 인코딩 되었습니다.
나머진 인코딩 제외 문자입니다.
이렇게 인코딩 되는 이유는 주소창 끝에 이렇게 ‘번’, ‘호’를 그대로 표시하면 가독성이 좋죠?
그럼 데이터를 쉽게 볼 수 있습니다.
그런데 위와 같이 인코딩해서 표시하면 가독성이 아무래도 좀 떨어지죠?
이를 위한 목적이 가장 큽니다.

이렇게 사용하게 된 것은..
2005년에 Ajax가 나왔는데, Ajax에서는 비동기 통신을 제공하거든요.
그런데 Ajax에선 위와 같이 인코딩하지 않고 JSON으로 파싱해서 보내줍니다.

JSON 형태는 문자열 형태입니다.
즉 “” 큰 따옴표 안에 작성된 형태거든요.
그래서 인코딩을 위와 같이 하지 않습니다. 인코딩을 안합니다.
단, 주소창 끝에 표시하지 않고 보이지 않는 영역으로 서버로 전송됩니다.
요즘엔 대부분 이런 Ajax, JSON 비동기 통신을 사용해서 데이터를 전송합니다.

JSON에 대해선 뒤에서 다루겠습니다.

여튼 이 인코딩 방법은 Ajax가 나오기 전에 동기 방법을 썼습니다.
여기서 동기와 비동기를 자세하게 말씀드리기 좀 그렇습니다만, 간단히 말씀드리자면, 웹 페이지에 id와 비밀번호를 입력했습니다.
그리고 회원가입 버튼을 클릭하면, 서버로 전송되죠?
이때 동기 방법은 서버에서 처리가 끝나서 웹페이지로 돌아올 때까지 다른 것을 하나도 처리 못합니다.
즉, 웹페이지가 먹통상태가 되어가지고 웹페이지의 다른 버튼을 클릭하더라도 클릭이 안됩니다.

반면 비동기 통신은 똑같은 방법이더라도 서버하고 브라우저하고 통신하는 와중에도 웹페이지의 다른 버튼을 클릭해도 클릭이 작동합니다.
그래서 비동기 통신방식의 UI가 굉장히 좋습니다.
아무때라도 다른 처리를 할 수 있기 때문입니다.

그래서 요즘 대부분의 웹페이지는 비동기 통신방법을 사용하고 있습니다.
그렇다고 위와 같은 인코딩 방식을 아주 사용 안하는 것은 아니니까 ‘이런 것이 있다’ 주소창에 위와 같은 데이터가 표시되면, 아 저것은 인코딩한 거구나.
이정도만 아셔도 될 거 같습니다.

이러한 개념정도만 아셔도 나중에 인코딩 관련에 대해서 찾아보시기 수월할겁니다.
인코딩 제외 문자만 유의하시면 됩니다.

• 인코딩 제외 문자

  • 영문자, 숫자
  • # ; / ? : @ & = + $ , - _ . ! ~ * ( ) 따옴표

encodeURIComponent()

이것은 앞의 encodeURI()와 같습니다.
다만, 인코딩 제외 문자가 적습니다.

• URI를 인코딩하여 반환

  • "; / ? : @ & = + $ ,"를 인코딩하는 것이 encodeURI()와 다릅니다.

  • 인코딩 제외 문자를 제외하고 “%16진수%16진수” 형태로 변환

      var uri = "data?a=번&b=호";
      console.log(encodeURIComponent(uri)); // data%3Fa%3D%EB%B2%88%26b%3D%ED%98%B8
    

encodeURIComponent() 함수는 encodeURI() 함수보다 인코딩 제외 문자가 적다 정도만 알고 넘어가면 됩니다.

• 인코딩 제외 문자

  • 영문자, 숫자
  • # - _ . ! ~ * ( ) 따옴표

decodeURI()

• 인코딩을 디코딩(Decoding)하여 반환

• 파라미터에 encodeURI()로 인코딩한 문자열 작성

    var uri = "data?a=%EB%B2%88&b=%ED%98%B8";
    console.log(decodeURI(uri)); // data?a=번&b=호
  

decodeURIComponent()

• 인코딩을 디코딩하여 반환

• 파라미터에 encodeURIComponent()로 인코딩한 문자열 작성
  제외하는 문자의 정도가 다릅니다.

• 디코딩 / 인코딩 : 사람이 알아볼 수 있는 문자로 변환 / 없는 문자로 변환
• 디코딩 / 인코딩에서 제외하는 문자가 있다.

이 정도로만 익히시고 필요할 때 검색해서 사용하시면 됩니다.