encodeURIComponent, encodeURI 사용 이유

이게 뭔데?

const uri = "https://example.com/search?query=안녕하세요";
const encoded = encodeURI(uri);
console.log(encoded); 
// https://example.com/search?query=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94

 

직접 코드를 보는게 이해가 빠를꺼다. encodeURI는 :  /  ?  &  = 등의 특수기호는 변환하지 않고 나머지 문자들을 변환한다고 보면된다. 

근데 여기서 특이한 점은 앞에 주소나 path는 인코딩 시켜주지 않는다는 점이다. 아마 이건 내부적으로 경로로 인정한 값을 제외한 값만 인코딩해준다

encodeURI("https://example.com/search?query=https://www.naver.com");
// "https://example.com/search?query=https://www.naver.com"

 

참고로 쿼리스트링에 주소값을 넣은경우도 마찬가지로 따로 인코딩되지는 않는다.

 

 

const queryParam = "안녕하세요&좋은날";
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%26%EC%A2%8B%EC%9D%80%EB%82%A0

 

encodeURIComponent는 encodeURI와 비슷하지만 특수 기호도 모두 포함해서 변환해준다. 

 

왜 사용하는거야?

 

일단 encodeURI 부터 보자. 

 

const url = "https://www.naver. com";
const safeUrl = encodeURI(url);
console.log(safeUrl);
// https://www.naver.%20com

 

url 문자열에 띄어쓰기가 포함된 경우 이를 그대로 브라우저에서 location.href등을 이용한다면 의도된대로 링크가 이동되지는 않는다. 아래처럼 띄어쓰기는 인코딩 되기 때문이다. 

encode의 경우 잘못된 주소를 정상적인 주소로 바꿔주지는 않지만 띄어쓰기가 포함된 링크 주소를 서버나 프록시에서 확인할 때 예상치못한 버그가 발생할 수 있다. 이를 방지하고자 최소한의 조치라고 보면된다. 

 

 

const query = encodeURIComponent("https://www.naver.com?redirect_url=''");
const url = `https://example.com/search?query=${query}`;

console.log(url);
// https://example.com/search?query=https%3A%2F%2Fwww.naver.com%3Fredirect_url%3D'%27'

 

그 다음은 encodeURIComponent이다. 사실 encodeURIComponent가 더 활용성이 크다. 위에 코드에서 url주소에 query라는 변수값을 넣는데 query안에도 마찬가지로 ? 쿼리스트링 시작값이 존재한다.

이 상황에 아무 인코딩 없이 변수값만 넣는다면 어디가 쿼리스트링의 시작값인지 브라우저나 서버는 판단하기가 어려워진다. 이를 방지하고자 특수기호까지 포함한 인코딩 방식인 encodeURIComponent를 사용해 안전하게 url을 전달할 수 있다.