encodeURIComponent

프로젝트에서 bridge 연결하는 부분에서 url을 생성할 때 encodeURIComponent함수를 사용한다. 해당 함수로 인코딩할때와 searchParams로 인코딩할 때 반환값에 차이가 있어서 정리했다.

• URI (식별자)
  하나의 리소스를 가리키는 문자열

• URL (위치)
  웹 상에서의 위치로 리소스 식별 (주소로 많이 알고 있는데, 서버에 자원을 요청하기 위해 입력하는 영문 주소다.)

• URN (이름)
  주어진 바운더리 내 이름으로 리소스 식별 ex) ISBN

  
  

encodeURIComponent

사용 목적

• URI로 데이터를 정확하게 전달하기 위해서 문자열을 인코딩하기 위해 사용
  A-Z a-z 0-9 - _ . ! ~ * ' ( )를 제외한 모든 문자를 변환한다.
  ex)
  http://a.com?name=egoing&job=programmer&blogger 의 경우 job의 값에 해당하는 부분에 &가 들어가며 파라미터의 의미에 오류가 생김
  => http://a.com?name=egoing&job=programmer%26blogger에서 %26로 치환하므로써 기존 의도대로 해석할 수 있다.

• URI 인코딩 메서드로 가장 적합하다. encodeURI()의 경우 HTTP요청 시 GET과 POST에서 특별한 문자열로 취급하는 & + = 등을 인코딩 하지않지만 ecodeURIComponent()는 상위 세 문자로 인코딩 대상에 포함한다. ex)
  name=value 형식으로 전달 / name=value 쌍이 있을 때는 &를 구분자로 사용 / 공백 문자는 + 기호로 변경되어 전달

사용 방법

encodeURIComponent(string) => 인코딩된 문자열 반환

decodeURIComponent

사용 목적

• encodeURIComponent를 통해서 만들어진 URI을 정상적인 문자열로 디코드하기 위해 사용
  ex)

let a = http://a.com?name=egoing&job=programmer%26blogger;
a = decodeURIComponent(a);
console.log(a) // http://a.com?name=egoing&job=programmer&blogger

사용 방법

• decodeURIComponent(encodedURI) => 디코딩된 문자열 반환

---

cf) 유사함수
-escape : A-Z a-z 0-9 @*-+./ 를 제외하고 모두 인코딩
-encodeURI : 인터넷 주소에서 사용하는 특수문자( A-Z a-z 0-9 ; , / ? : @ & = + $ - . ! ~ * ' ( ) # )는 변환하지 않는다. 매개변수 : 완전한 URI
-decodeURI : encodeURI로 이스케이핑 된 문자열을 디코딩

---

new URL

• 매개변수로 제공한 URL을 나타내는 새로운 URL 객체를 반환한다.

const url = new URL(url [, base])
// url = 절대 또는 상대 URL을 나타내는 string
// base = url이 상대URL일 경우 사용할 기준 URL string
// 유효한 값이어야 한다.

const newUrl1 = new URL('https://a.com/admin'); // 절대url
const newUrl2 = new URL('/admin', 'https://a.com'); // 상대url + base

console.log(newUrl1.toString());
console.log(newUrl2.toString());

>>>> result <<<<
https://a.com/admin
https://a.com/admin

searchParams

• encoded search params를 가진 url을 생성할 수 있다.

const newUrl = new URL('https://a.com/admin');
 newUrl.searchParams.set('id', '1 2 3'); // 숫자 + 공백
  newUrl.searchParams.set('company', 'hd'); // 영어
  newUrl.searchParams.set('이 름!', '김홍대'); // 한글
  newUrl.searchParams.set('etc', '/?:@&=+$-_.!~*'); // 특수문자

console.log(newUrl.toString());
>>>> result <<<<
https://a.com/admin?id=1+2+3&company=hd&이+름!=김홍대&etc=%2F%3F%3A%40%26%3D%2B%24-_.!~*&buttonType=
// searchParams 사용했을 땐 한글은 인코딩이 안된다..! (encodeURIComponent는 한글 인코딩됨)
// key값도 인코딩되어서 나온다

• non-latin letters / spaces 는 자동으로 인코딩된다. ( prefixed by %, such as %20 )

// 디코딩
for (let [name, value] of newUrl.searchParams.entries()) {
  console.log(`${name}=${value}`);
}
>>>> result <<<<
id=1 2 3
company=hd
name=김홍대
etc=/?:@&=+$-_.!~*