모던자바스크립트 딥다이브

front-end/JavaScript

[JavaScript] 44. REST API

💡 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 💡 REST API는 REST를 기반으로 서비스 API를 구현한 것이다. 01. REST API의 구성 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 02. REST API 설계 원칙 1. URI는 리소스를 표현해야 한다. 🔹 URI는 리소스를 표현하는 데 중점을 두어야 하고, 식별할 수 있는 이름은 동사보다 명사를 사용한다. # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 🔹 HTTP ..

front-end/JavaScript

[JavaScript] 43. Ajax

01. Ajax란? 🔹 Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 🔹 Ajax는 브라우저에서 제공하는 Web API는 XMLHttpRequest 객체를 기반으로 동작한다. 💡 전동방식 vs. Ajax 1. 전통방식 🔹 화면이 전환되면 서버로부터 새로운 HTML 페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링한다. ➡️ 단점 : 불필요한 데이터 통신이 발생하고, 변경이 필요없는 부분까지 다시 렌더링하므로 화면 전환 시 화면 깜빡임 현상이 발생한다. 또한, 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지..

front-end/JavaScript

[JavaScript] 42. 비동기 프로그래밍

01. 동기 처리와 비동기 처리 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 🔹 즉, 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. ➡️ 처리에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다. 💡 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식 ➡️ 장점 : 실행 순서가 보장된다. ➡️ 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다. 💡 비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식 ➡️ 장점 : 블로킹이 발생하지 않는다. ➡️ 단점 : 실행 순서가 보장되지 않는다. 🔹 타이머 함수인 setTimeout, setInterval,..

front-end/JavaScript

[JavaScript] 41. 타이머

01. 호출 스케줄링 💡 호출 스케줄링 : 함수를 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것이다. 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가져, 싱글 스레드로 동작하기 때문에, 타이머 함수는 비공기 처리방식으로 동작한다. (42장. 비동기 프로그래밍) 02. 타이머 함수 1) setTimeout / clearTimeout 🔹 setTimeoue 함수의 콜백함수는 두 번째 인수로 전달받은 시간 이후, 단 한 번 실행되도록 호출 스케줄링 된다 const timeoutID = setTimeout(func|code[, delay, param1, param2, ...]); 매개변수 설명 func 타이머가 만료된 뒤 호출될 콜백 함수 delay 타이머..

front-end/JavaScript

[JavaScript] 38. 브라우저의 렌더링 과정

🔹 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 🔹 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 💡 이 때, 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하고, 브라우저에 렌더링하는 과정을 거치게 된다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AT(..

gaan
'모던자바스크립트 딥다이브' 태그의 글 목록