달마다 2번씩은 포스팅을 해보려고 노력중이라.. 자바스크립트 개발에 입문한지 얼마 안됐을때  했던 실수를 꺼내본다. ( 리마인드 차원에서도..)

지금은 mdn 이나 다른 공식 문서를 보고 JS 기본 함수를 항상 사용하는데 당시에는 다른 사람의 코드나 stackoverflow 의 만들어놓은 코드를 참조 하다가 인코딩 하는 곳에서도 내장 함수가 다르게 사용되는 것을 보고 의문을 가졌었다.

일반적으로 간단히 인코딩을 위해서 알려진 내장 함수는 3가지가 있는데

  • escape()
  • encodeURI()
  • encodeURIComponent()

이렇게 3가지다. 물론 해당 인코딩을 디코딩 하는 함수는 다음과 같다.

  • unescape()
  • decodeURI()
  • decodeURIComponent()

하지만 이 3가지  비슷하면서도 차이점이 있어서 개발시에 잘 판단해서 사용해야 한다.

즉 용도가 다르단 말이다.

우선 escape 를 보게되면 해당 함수는 더이상 사용하지 말아야 한다.

왜냐하면 해당 함수는 deprecated 된 함수인데. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

링크를 보더라도 웹 표준 스펙에서 제거 되었다는 내용을 확인할 수 있다.
일부 브라우저에서는 하위 호환성 때문에 지금도 존재하지만. 해당 함수는

encodeURI/ encodeURIComponent 로 교체 되어서 더이상 사용하면 안되는 함수다.

그럼 encodeURI 와 encodeURIComponent 함수의 차이점을 살펴 보면  아래 표현된 문자를 제외하고 인코딩을 하게 된다.

encodeURI
      ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) # a-z 0-9
encodeURIComponet

 – _ . ! ~ * ‘ ( ) a-z 0-9

 

encodeURI("=")  === "="  // true
encodeURIComponent("=") === "="  //false
encodeURIComponent("=") === "%3D"  //false

처럼 다른 결과가 나오게 되며 비슷해 보이지만 전혀 다른 용도로 사용한다.

URI 를 인코딩 하는경우 즉 path 의 경우에는 encodeURI 를 사용하지만 파라미터를 인코딩 하는 경우에는 encodeURIComponent 를 사용해야 한다.

https://kazikai.net/list?page=1&size=10 과 같은  api를 인코딩 한다고 가정했을때 2개의 결과는 전혀 다른 결과가 나오게 된다.

보통 프론트엔드 개발시에 ( 요즘엔 Node.js 를 이용한 백엔드 개발에서도..) URI를 인코딩 하는 경우가 빈번하기 때문에 아마 이런 실수를 한 코드가 오픈소스에서도 종종 발견된다. 실제로 stackoverflow 나 다른 개발 커뮤니티에서는 해당 방식에 대한 질문이 종종 올라온다. ( 2017년도에는 별로없는데 2016년까지는 꽤 있다. 나만 헷갈린게 아닌가보다. )

즉 비슷해 보이지만. 항상 공식문서를 읽고 상황에 맞는 함수를 사용하자.

3줄 요약

  1. escape/unesape 는 쓰지말자 
  2. encodeURI 는 URI 전체 인코딩 할때 
  3. URI 의 파라미터 인코딩 할때는 encodeURIComponent