자바스크립트25 async / await async, await은 프로미스를 기반으로 동작한다. 이 메서드를 사용하면 프로미스의 then, catch, finally 후속 처리 메서드에 콜백 함수를 전달하여 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다. async function fetchTodo() { const url = 'http://~~~~' const response = await fetch(url) const todo = await response.json() console.log(todo) } fetchTodo() async 함수 await 키워드는 반드시 async 함수 내부에서 사용해야 한다. async 함수는 언제나 프로미스를 반환한다. 명시적으로 반환하지 않더라도 암묵적으로 반환값.. 2020. 11. 27. 프로미스 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처리가 곤란하며, 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 그래서 ES6 에는 비동기 처리를 위한 패턴으로 프로미스를 도입했다. 먼저 프로미스 이전의 콜백 패턴에 대해 알아보겠다. 비동기 함수는 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리결과(예를 들면 서버의 응답)에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다. 이때 비동기 함수를 범용적으로 사용하기 위해 비동기 함수에 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적이다. const get =.. 2020. 11. 27. 비동기 프로그래밍 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없음을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. 현재 실행 중인 컨텍스트가 pop 되어 실행 컨텍스트 스택에서 제거되면 실행된다. 이처럼 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 그러기 때문에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생한다. function foo() { console.log('foo') } function bar() { console.log('bar') } // 일정 시간이 경과한.. 2020. 11. 27. 이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다. 이벤트 전파 DOM 트리상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파 라고 한다. Apple Banana Orange ul 요소의 두번째 자식요소인 banana li 요소를 클릭하면 클릭 이벤트가 발생하고, 이때 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다. 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분한다. window -> do.. 2020. 11. 25. 이전 1 2 3 4 5 ··· 7 다음