본문 바로가기

전체 글122

모던 자바스크립트 : REST API REST REST: HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 HTTP/1.0과 1.1 스펙 작성에 참여 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개 HTTP 장점을 최대한 활용할 수 있는 아키텍처로 REST 소개 REST API : REST를 기반으로 서비스 API 구현한 것 RESTful : REST의 기본 원칙을 성실히 지킨 서비스 디자인 1. REST API의 구성 REST API는 자원, 행위, 표현의 3가지 요소로 구성됨 REST : 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용 이해 가능 2. REST API의 설계 원칙 a. REST 에서 가장 중요한 기본적인 원칙 URI는 리소스를 표현.. 2023. 12. 11.
모던 자바스크립트 : Ajax 1. Ajax란? a. Ajax Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터 요청하고 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 b. Ajax가 유명해지게 된 계기 마이크로소프트가 개발한 XMLHttpRequest는 그다지 큰 주목을 받지 못하다가 구글이 발표한 구글 맵스를 통해 애플리케이션 개발 프로그래밍 언어로서 자바스크립트의 가능성을 확인하는 계기 마련 웹브라우저에서 자바스크립트와 Ajax를 기반으로 동작하는 구글 맵스가 데스크톱 애플리케이션과 비교해 손색이 .. 2023. 12. 8.
모던 자바스크립트 : 타이머 1. 호출 스케줄링 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행됨 호출 스케줄링 : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후 호출되도록 함수 호출을 예약하는 것 타이머 함수 사용 타이머 함수 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아님 하지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수 제공 => 타이머 함수는 호스트 객체 타이머 함수는 모두 일정시간 경과된 이후 콜백 함수가 호출되도록 타이머 생성 => 타이머 함수가 생성한 타이머가 만료되면 콜백함수 호출 setTimeout 함수가 생성한 타이머 : 단한번 동작 setInterval 함수가 생성한 타이머 : 반복 동작 setTimeout, setInterval은 비동.. 2023. 12. 7.
모던 자바스크립트 : DOM part 2 6. DOM 조작 DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제, 교체하는 것 DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트 발생 a. innerHTML Element.prototype.innerHTML : 요소 노드의 HTML 마크업 취득하거나 변경 setter, getter 모두 존재하는 접근자 프로퍼티 요소 노드의 innerHTML 프로퍼티 참조 시 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환 innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로 반환 요소 노드의 innerHTML 프로퍼티에 문자열 할당 시 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어있는 HTML 마크업이 .. 2023. 12. 7.
모던 자바스크립트 : 비동기 프로그래밍 1. 동기처리와 비동기 처리 실행 컨텍스트 스택에 함수 실행컨텍스트가 푸시되는 것은 함수 실행의 시작 의미 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 => 도시에 2개 이상의 함수를 실행할 수 없다는 것 a. 싱글 스레드 싱글 스레드 : 자바스크립트 엔진은 한번에 하나의 태스크만 실행 가능함 자바스크립트는 싱글 스레드라서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단) 발생 b. 동기 처리 방식 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점 예시 일정 시간이 경과한 이후 콜백함수 foo를 호출하는 sleep함수가 있음 bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 일정 .. 2023. 12. 6.
모던 자바스크립트 : DOM 1. 노드 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM 생성 DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API,즉 프로퍼티와 메서드 제공하는 트리 자료구조 a. HTML 요소와 노드 객체 HTML 요소 HTML 요소 : HTML 문서를 구성하는 개별적인 요소 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM 구성하는 요소 노드 객체로 변환 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환 HTML 문서 HTML 문서는 HTML 요소들의 집합으로 이뤄지며 HTML 요소는 중첩 관계를 가짐 HTML 요소의 콘텐츠 영역(시작태그와 종료 태그 사이)에는 텍스트뿐만 아니라 다른 .. 2023. 12. 6.