본문 바로가기

분류 전체보기46

[JS] 프로미스 📌 프로미스 (Promise)프로미스(Promise): 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타내는 객체프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있음 📌 비동기 처리를 위한 콜백 패턴의 단점콜백 헬비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료되어 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 시 기대한 대로 동작되지 않음-> 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없음비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 하기 때문에 비.. 2024. 9. 30.
[JS] REST API 📌 REST APIREST(REpresentational State Transfer): HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API: REST를 기반으로 서비스 API를 구현한 것 📌 REST API의 구성구성 요소내용표현 방법자원 (resource)자원URI (엔드포인트)행위 (verb)자원에 대한 행위HTTP 요청 메서드표현 (representations)자원에 대한 행위의 구체적 내용페이로드 📌 REST API 설계 원칙1. URI는 리소스를 표현해야 한다.리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용함이름에 get 같은 행위에 대한 표현이 들어가서는 안됨# badGET /getTodos/1GET /todos/show/1# goodGE.. 2024. 9. 25.
[JS] Ajax 📌 Ajax란?Ajax(Asynchronous JavaScript and XML): 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작함XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공함Ajax의 등장으로 이전의 전통적인 방식(화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 가시 렌더링하는 방식)이 획기적으로 전환함Ajax의 장점:변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음변경할 필요.. 2024. 9. 24.
[JS] 비동기 프로그래밍 📌 동기 처리와 비동기 처리자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 동시에 2개 이상의 함수를 동시에 실행할 수 없음실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크(task)들임대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 pop 되어 실행 컨텍스트 스택에서 제거되어야 실행되기 시작함자바스크입트 엔진은 싱글스레드(single thread) 방식으로 동작함싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생함 동기(synchronous) 처리: 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태.. 2024. 9. 24.