본문 바로가기

전체 글109

모던 자바스크립트 Deep Dive - 프로미스 45장 프로미스 비동기 처리를 위한 콜백 패턴의 단점 1 ) 콜백 헬 45-01 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; // id가 1인 post를 취득 get(''); /* { "userId": 1, "id": 1, "title": "sunt.. 2024. 2. 16.
모던 자바스크립트 Deep Dive - REST API 44장 REST API REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처. REST API : REST를 기반으로 서비스 API를 구현한 것. REST API의 구성 자원, 행위, 표현 REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음. REST API 설계 원칙 가장 중요한 기본적인 원칙 1 ) URI는 리소스를 표현하는데 집중 2 ) 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것. 1 ) URI는 리소스를 표현해야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용. 따라서 이름에 get 같은 행위에 대한 표현이 들어가서는 안됨. # bad GET /getTodos/1 GET /todos/.. 2024. 2. 15.
모던 자바스크립트 Deep Dive - Ajax 43장 Ajax Ajax란? JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 이전의 웹페이지는 완전한 HTML을 전송받아 전체를 처음부터 다시 렌더링하는 방식으로 동작했음. 이러한 전통 방식은 단점이 있음 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생함. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링함. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생함. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨. Ajax는.. 2024. 2. 14.
모던 자바스크립트 Deep Dive - 비동기 프로그래밍 42장 비동기 프로그래밍 동기 처리와 비동기 처리 함수 호출 → 함수 코드 평가됨 → 함수 실행 컨텍스트 생성됨. 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시됨 → 함수 코드 실행됨 → 함수 코드 실행 종료 → 함수 실행 컨텍스트가 실행 컨텍스트 스택에서 팝되어 제거됨. 42-01 const foo = () => {}; const bar = () => {}; foo(); bar(); JS 엔진은 단 하나의 실행 컨텍스트 스택을 가짐. === 동시에 2개 이상의 함수를 실행할 수 없음. 대기중인 태스크들은 현재 실행중인 실행 컨텍스트가 팝되어 실행 컨텍스트 스택에서 제거되면 === 현재 실행중인 함수가 종료하면 비로소 실행됨. 이처럼 JS 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식.. 2024. 2. 13.
모던 자바스크립트 Deep Dive - 타이머 41장 타이머 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용함. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성함. === 타이머 함수가 생성한 타이머가 만료되면 콜백 함수가 호출됨. JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두가지 이상의 태스크를 동시에 실행할 수 없음. === 싱글 스레드로 동작함. === 비동기 처리 방식으로 동작함. 타이머 함수 1 ) setTimeout / clearTimeout setTimeout 함수의 콜백함수는 두번째 인수로 전달받은 시간 이후 단 한번 실행되도록 호출 스케줄링됨. const timeou.. 2024. 2. 12.
모던 자바스크립트 Deep Dive - 이벤트 40장 이벤트 이벤트 타입 1 ) 마우스 이벤트 click, dbclick, mousedown, mouseup, mouseenter, mouseover, mouseleave, mouseout 2 ) 키보드 이벤트 keydown, keypress, keyup 3 ) 포커스 이벤트 focus, blur, focusin, focusout 4 ) 폼 이벤트 submit, reset 5 ) 값 변경 이벤트 input, change, readystatechange 6 ) DOM 뮤테이션 이벤트 DOMContentLoaded 7 ) 뷰 이벤트 resize, scroll 8 ) 리소스 이벤트 load, unload, abort, error 이벤트 객체 이벤트가 발생하면 이벤트 객체가 동적으로 생성됨. 생성된 이벤트 객.. 2024. 2. 11.

티스토리툴바