비동기 원리
자바스크립트는 싱글 스레드 프로그레밍 언어다. 즉, 한번에 하나의 단일 콜스택만을 가지고 있다는 뜻, 하나의 프로그램은 하나의 코드만 동시에 실행할 수 있다!
싱글 스레드이기 때문에 비동기 콜백을 사용해야 한다. 비동기 콜백의 동작원리는 아래와 같다.
Runtime -> Web Apis(brwoser) -> Callback Queue -> Event Loop -> Runtime
Runtime에는 memory heap와 call stack이 있는데 함수를 동기 호출하면 call stack에 쌓여 순차 실행된다. 만약 ajax나 setTimeout, DOM event를 사용하면 js는 call stack에서 web apis로 보내고 정해진 시간, 이벤트가 발생한 순간에 순차적으로 call back queue에 적재한다.
callback queue에 대기 중인 함수들은 call stack에 쌓여있던 것들이 모두 실행되면 차례대로 스택에 쌓여 실행된다.
이벤트 루프란
이벤트 루프의 역할은 콜 스택과 테스크 큐(콜백 큐)를 주시하는 것이다. 콜 스택이 비어있으면 테스크 큐에 있는 함수를 스택에 넣어준다.
HTTP/HTTPS
HTTP는 클라이언트(웹브라우저)와 서버가 서로 의사소통 할 수 있는 공통의 언어다. request와 response로 서로 데이터를 주고 받는다.
JSON
데이터를 텍스트로 변환해서 주고 받고 다시 js 언어로 변환하는 방식이다.
AJAX
클라이언트가 서버로부터 reponse를 받을 때마다 페이지를 리로딩해야 한다. 그래서 웹페이지 한 번 로딩되면 전체가 아닌 필요한 부분만 리로딩 시키는 기술이 ajax다.
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState({ robots: users }));
}fetch()안에는 JSON형태로 이루어진 객체가 있다. fetch()는 window 객체 일부로 웹 api 서버에서 해당 객체를 불러오겠다고 request한다.
서버는 API에 접속해서 필요한 요청을 가져오는 데 성공했는지 실패했는지 promise 객체의 값에 담아 클라이언트로 전달해준다.
성공 시 promise status는 resolved promise value 는 response, 실패 시 rejected, error 리턴한다. (fetch는 성패 상관없이 promise 객체를 리턴한다)
위의 경우 response가 담긴 promise 객체를 반환했다. 이 결과값을 .then()을 하면 다시 promise객체를 반환한다. then()는 promise가 성공했을 때 수행할 콜백함수와 실패했을 때 수행할 콜백함수 두 개를 인자로 받는 promise 메소드 중 하나다.
이제 then()안에 성공했을 때 수행할 콜백함수를 넣어준다. fetch()를 통해 받은 promise 객체의 response를 클라이언트가 읽을 수 있는 js 객체로 변환하기 위해 response.json()를 리턴한다.
js 객체로 parse된 결과값이 promise value에 배열 형태로 담겨 promise 객체가 리턴됐다. 마지맏으로 then()에 응답받은 데이터를 활용한 방식을 콜백함수로 주면 된다.
출처: https://soldonii.tistory.com/45?category=862197
promise
어떤 결과값을 리턴하지 않고 대신 promise 를 반환해서 미래의 어떤 시점에 결과를 제공한다.
const array = [1,2,3,2,1,2,3,1,2,3,1,2,3]
const test1 = new Promise((resolve, reject) => {
if (array.length > 10) {
resolve('Stuff Worked');
} else {
reject('Error, it broke');
}
})
test1.then(result => result + '!')
promise stauts가 resolve(fulfilled)일 떄, reject일 때 어떤 작업을 수행할지 지정해준다. test1.then()을 수행하면 Promise 객체를 리턴한다.
catch
test1
.then(result => result + '!')
.then(result2 => {
throw Error;
console.log(result2);
})
.catch(() => console.log('Oops! Error!'));
// Oops! Error!두 번째 .then()에서 throw Error를 한다. promise가 수행되다가 throw를 하면 .catch()로 달려간다. 에러가 발생하면 resolve하는 동작이 중지되고 reject후 catch()내 동작을 수행한다.
출처 :
https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=862s
https://im-developer.tistory.com/113?category=846746
https://soldonii.tistory.com/45?category=862197
