[JavaScript] encodeURI() , encodeURIComponent() 차이점 알고 사용하기

URI를 인코딩해서 보낼때 어떤 함수를 사용해야 할까?
--> URI 전체를 인코딩 할때는 encodeURI()를 사용하고 URI 파라메터를 인코딩 할때는 encodeURIComponent()를 사용하면 된다.

 

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

encodeURIComponent는 알파벳,0~9의 숫자 - _ . ! ~ * ' ( ) 를 제외한 문자를 이스케이프 처리

 

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

그리고 파라미터 값에 & 등의 특수문자가 값으로 들어갈 때는 인코딩 해줘야 하므로 파라미터 값에는 encodeURIComponet 사용

 

예시)

https://javascript.com?name=co&ding 

파라메터로 들어가는 name의 value에 &이 들어가므로 encodeURIComponent를 사용하여 인코딩 해줘야 한다.

+

파라메터 값에 & 등의 특수한 기능을 하는 문자가 들어가는 경우 encodeURI로 전체를 인코딩하는 경우 문제가 생길 수 있으므로 파라메터가 표함되지 않은 path부분("http://javascript.com?name=")은 값자체로 넘겨주고 파라메터만 encodeURIComponent를 사용해서 인코딩하는 방법을 추천합니다.

const name = "co&ding";		//uri의 파라메터 name으로 들어갈 값
const uri = "https://javascript.com?name=" + encodeURIComponent(name); //파라메터 값만 인코딩

참고
인코딩 : 어떤 네트워크에서도 사용할 수 있게 문자를 코드(ASCII,유니코드 등)로 변환하는 것

이스케이프 : 문자열을 인코딩하는 것