javascript42 [10주차 스터디]45장-프로미스 프로미스 비동기 처리를 위한 콜백 패턴의 단점 함수 내부에 비동기로 동작하는 코드를 포함하는 함수를 비동기 함수라고 함 비동기 함수 내부에 비동기로 동작하는 코드가 있는 경우? -> 비동기 함수가 종료된 이후에 완료됨 즉, 비동기 함수 처리 결과를 외부로 반환하거나 상위 스코프 변수에 할당하면 기대한 대로 동작되지 않음 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // ① 서버의 응답을 반환한다. return JSON.parse(xhr.response); } console.. 2022. 4. 2. [10주차 스터디]44장-REST API REST API REST(Representation State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한것을 의미 즉, http를 기반으로 네트워크 상에서 자원의 상태를 주고받는 것을 REST라고 한다. REST의 기본원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현. REST API의 구성 REST API는 3가지 요소로 구성 REST는 자체 표현 구조로 구성 되어, REST API 만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원(resource) 자원 URL(엔드포인트) 행위(verb) 자원에 대한 행위 HTTP 요청 메서드 표현(repre.. 2022. 4. 2. [10주차 스터디]43장-Ajax Ajax Ajax란? Ajax란 Asynchronous JavaScript And Xml 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 이전의 웹페이지는 HTML을 서버로부터 전송 받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작 함 전통적인 방식의 단점 이전 웹페이지와 차이가 없어 변경할 필요 없는 부분까지 포함한 완전한 HTML을 서버로 부터 매번 다시 전송 받기 때문에 불필요한 데이터 통신이 발생 화면 전환이 일어나면서 순간적으로 깜빡이는 현상 발생 클라이언트와 서버와의 통신이 동기방식으로 동작.. 2022. 4. 2. [스터디 10주차]42장- 비동기 프로그래밍 비동기 프로그래밍 동기 처리와 비동기 처리 실행 컨텍스트 개념 알고 가기 함수 호출 시 코드가 평가 되어 콜스택에 푸시 되고 함수 코드 실행이 종료 되면 함수 실행 컨텍스트는 스택에서 팝되어 제거 됨 함수 코드 평가 과정을 통해 함수 실행 컨텍스트 생성 됨 즉, 콜스택에 함수 실행 컨텍스트 푸시 됨 === 함수 실행의 시작을 의미 함수의 실행 순서는 실행컨텍스트 스텍으로 관리 됨 동기 처리 방식 이해 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택 갖는다 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미 실행 컨텍스트의 최상위 (실행 중인 함수)를 제외하고 모두 실행 대기 중인 태스크(Task) 자바 스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) .. 2022. 4. 2. mouseover / mouseenter 차이, mouseleaver / mouseout 차이 최근 이벤트를 공부하며 헷갈리는 부분이 있어 정리해 보았습니다. 이벤트에 관한 기본적인 이론은 다음 글에서 확인 할 수 있습니다. https://hoime.tistory.com/76 [9주차 스터디]40장-이벤트 이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이벤트( event )를 발생 시킵니다. 특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다. 이벤트가 발생했을 때 hoime.tistory.com 마우스 이벤트를 보면 mouseenter 이벤트와 mouseover 이벤트는 유사하게 동작 합니다. 반대되는 동작인 mouseleave와 mouseout 이벤트 역시 유사하게 동작 됩니다. 그렇다면 두 이벤트에 차이를 검색해 보면 자식 요소에서 영향을 주는지 여부에 따라 .. 2022. 3. 28. [9주차 스터디]41장-타이머 타이머 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출을 예약하는 것을 호출 스케줄링 이라 함 자바스크립트에서 타이머 함수를 제공 타이머 생성 함수 : setTimeout, setInterval 타이머 제거 함수 : clearTimeout, clearInterval 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다. Node.js 환경에서 전역 객체의 메서드 즉, 호스트 객체 타이머 함수를 사용해 생성한 타이머가 만료되면 콜백 함수가 호출되는 동작 방식 자바스크립트 엔진은 싱글 스레드(single thread)로 동작하기 때문에 타이머 함수 setTimeout, setInterval은 비동기 처리 방식으로 동작 한다. 타이머 함수 setTimeout/ c.. 2022. 3. 27. 이전 1 2 3 4 5 ··· 7 다음
