encodeURI()와 encodeURIComponent() 차이점 깔끔하게 정리하기

 

블로그 목적 

Javascript 관련 인코딩할때 사용하는 encodeURI()와 encodeURIComponent() 차이점에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다.

블로그 요약

간단한 예시를 들어, encodeURI()와 encodeURIComponent() 가 동일한 결과를 내놓을 경우와 다른 결과를 내놓을경우를 비교 해본다.

블로그 상세내용

우선, encodeURI()와 encodeURIComponent() 차이점을 간단하게 정리해볼까요?

우선, 해당 내용을 정리하기전에....
(간단한 용어 정리부터 들어가 보자!!)
 - 인코딩 : 네트워크에서도 사용할 수 있게 문자를 코드(ASCII,유니코드 등)로 변환하는 것을 우리는 인코딩, 인코드 하다라고 부른다.

본격적으로 인코드할때 사용하는 encodeURI()와 encodeURIComponent() 차이점을 간단하게 정리하자면..
 - encodeURI()는 URL 전체를 입력으로 받는다.
 - encodeURIComponent()는 URL에서 인코드할 부분만 입력으로 받는다

그럼, URI를 인코딩해서 보낼때 어떤 함수를 사용해야 할까?
다시말해서, URI 전체를 인코딩 할때는 encodeURI()를 사용하고 URI 파라메터를 인코딩 할때는 encodeURIComponent()를 사용하면 된다.!!!
(여기서 요점은, 2가지의 내용을 항상 머릿속에 넣어두고, 적절한 상황에 사용하도록 한다.)

그리고 꼭 참고해야할 것이있는데..

encodeURI는 알파벳, 0~9의 숫자, ; , / ? : @ & = + $ # - _ . ! ~ * ' ( ) 를 제외한 문자를 인코딩(이스케이프 처리) encodeURIComponent는 알파벳,0~9의 숫자 - _ . ! ~ * ' ( ) 를 제외한 문자를 이스케이프 처리 한다는 것!!

여기서 위의 내용을 보면...
encodeURIComponent는 / ? : @ & = + $ # 도 이스케이프 처리를 해버리는데 & ? 와 같이 uri에서 특수한 기능을 하는 문자는( ex. &는 uri에서 다음 파라메터를 나타냄) 인코딩 하면 안 되므로 path 전체를 인코딩 할때는 encodeURI를 사용해야 한다는 점이다!!
(꼭 머릿속에 넣어두자!!)

여기서 잠깐??
만약 파라미터 값에 # & 등의 특수문자가 값으로 들어갈 경우가 있을텐데요???
 - 이럴때는 인코딩 해줘야 하므로 파라미터 값에는 꼭! encodeURIComponet 사용해야 하는 것이죠!! (이해되셨죠??)

우선, 아래와 같이 간단한 사례를들어서..
encodeURI()와 encodeURIComponent() 를 사용할때 동일한경우나 차이가 날경우를 정리해보겠습니다. 

아래는 동일한결과를 나타내는 예시이다.

ex #1)
const a = encodeURI('https://example.com/안녕/세상아');

ex #2)
const b = `https://example.com/${encodeURIComponent('안녕')}/${encodeURIComponent('세상아')}`

둘 다 결과는 https://example.com/%EC%95%88%EB%85%95/%EC%84%B8%EC%83%81%EC%95%84 으로 같음

아래는 차이가 날경우를 나타내는 예시이다.

예를 들어, URL에서 "#"라는 이름의 폴더를 나타내고 싶다고 하자.
아래와 같이 URL이 될텐데

https://example.com/#/

하지만 이걸 그대로 쓰면 #이 앵커 지정자로 해석되어 버리므로 반드시 인코드해야 한다. 

결론적으로 encodeURI 와 encodeURIComponent를 사용할때 차이가 나는 이유를 설명하자면...

encodeURI는 개발자를 배려(?) 한답시고 https://example.com/#/ 그대로 내놓으므로 앵커로 인식되어 버리지만, encodeURIComponent는 #만 명시적으로 인코드할 수 있으므로 https://example.com/%23/ 과 같이 변환되어 앵커로 인식되지 않게 할 수 있는 것!!

다시말해서, encodeURI()와 encodeURIComponent() 를 상황에 맞게 사용하면 좋을것 같다..

여기서 귀찮다고 encodeURI만 사용한다고 한다면, 여러가지 디버깅해야할(?) 소지가 발생할 수 도 있으므로,
우리는 꼭 encodeURI()와 encodeURIComponent() 를 정확히알고 사용하자!!

오늘블로그는 여기서 마치겠습니다.
항상 믿고 봐주셔서 감사합니다.

결론

하나, 인코딩은 네트워크에서도 사용할 수 있게 문자를 코드(ASCII,유니코드 등)로 변환하는 것을 우리는 인코딩이라고 부른다.
둘, encodeURI()와 encodeURIComponent() 차이점을 간단하게 정리하자면..
 - encodeURI()는 URL 전체를 입력으로 받는다.
 - encodeURIComponent()는 URL에서 인코드할 부분만 입력으로 받는다

셋, 아래 내용을 참고해서 꼭 적절하게 사용하자

encodeURI는 알파벳, 0~9의 숫자, ; , / ? : @ & = + $ # - _ . ! ~ * ' ( ) 를 제외한 문자를 인코딩(이스케이프 처리) encodeURIComponent는 알파벳,0~9의 숫자 - _ . ! ~ * ' ( ) 를 제외한 문자를 이스케이프 처리 한다는 것!!