Javascript: URI, URL, QueryString 과 인코딩/디코딩 정리
URI(Uniform Resource Identifier)
: 인터넷에 있는 자원을 나타내는 유일한 주소
-
URI, URL(Uniform Reslurce Locator), URN(Uniform REsource Name)의 차이
-
연관된 개념인 Scheme(Protocol), Host(Domain), Port, Path, Query String, Search, Fragment
URI 인코딩이란?
: URI의 문자들을 이스케이프 처리하는 것
이스케이프 처리란?
: 어떤 시스템에서도 읽을 수 있는 아스키 문자셋으로 반환하는 것
즉, URI 인코딩이란?
: 네트워크 등을 통해 정보를 공유할 때, 어떤 시스템에서도 읽을 수 있도록 URI의 문자들을 ASCII 문자셋으로 변환하는 것이다.
: 예를 들어, UTF-8 한글의 '가'는 3바이트의 아스키 문자셋 %EC %92 등으로 인코딩 된다
URI 디코딩이란?
: 디코딩은 반대로 인코딩된 아스키 문자셋을 해석하여 한글 "가"로 되돌리는 것이다.
Javascript의 인코딩/디코딩 함수
: 자바스크립트는 빌트인(내장) 전역 함수로 URI 문자열을 인코딩하고, 다시 디코딩하는 함수를 제공한다.
-
encodeURI() / decodeURI()
: 보통 URI에서 의미가 있는 . : / ? = &, 영어 등은 그대로 남겨두고 인코딩한다.
1) encodeURI('인코딩 이전 URI') => 이스케이프 처리된 URI
2) decodeURI('인코딩 완료 URI') => 이스케이프 처리 이전 URI -
encodeURIComponent() / decodeURIComponent()
: . : / ? = & 등 조차 모두 인코딩한다. (영어는 남겨둔다.
1) encodeURIComponent('인코딩 이전 URI') => 이스케이프 처리된 URI
2) decodeURIComponent('인코딩 완료 URI') => 이스케이프 처리 이전 URI
콜백함수
다음과 같이 비동기로 작동되는 함수가 있다.
이 비동기 함수는 2초 뒤에 Elice라는 이름을 인자로 받은 콜백함수의 인자로 넘겨준다.
function getName(cb) {
setTimeout(() => {
cb("Elice");
}, 2000);
}앞선 함수를 실행하려면 다음과 같이 getName 함수에 콜백 함수를 넣어서 사용할 수 있다.
getName((name) => {
console.log(name);
})
만약 getName 함수를 이용해서 Elice라는 이름을 3번 출력하려면?
getName((name) => {
console.log(name);
})
getName((name) => {
console.log(name);
})
getName((name) => {
console.log(name);
})하지만 앞선 방법으로 콜백함수를 호출하면 각 함수에 대한 데이터를 사용할 수 없다. 예를들어 이름, 나이, 주소가 저장된 데이터를 비동기적으로 가져와야 한다고 가정해본다.
function getName(cb) {
setTimeout(() => {
cb("Elice");
}, 2000);
}
function getAge(cb) {
setTimeout(() => {
cb(6);
}, 2000);
}
function getAddress(cb) {
setTimeout(() => {
cb("Seoul");
}, 2000);
}해당 정보를 출력하고자 하지만 console.log를 한번만 사용하려면 어떻게 해야될까?
getName((name) => {
getAge((age) => {
getAddress((address) => {
console.log(name, age, address)
})
})
})앞선 코드처럼 콜백함수 안에 콜백 함수를 반복하여 호출해야 name, age, address를 한꺼번에 접근할 수 있다. 비동기 함수가 3개 쓰이고, 각 2초씩 걸리기 때문에 6초 뒤에 Elice 6 Seoul이라는 log가 나오게 될 것이다.
