본문 바로가기

CS

(69)

44장 REST API 2023년 5월 11일 830p~841p REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 REST에서 가장 중요한 기본적인..

43장 Ajax 2023년 5월 10일 816p~829p 43.1 Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 전통적인 이전의 웹페이지는 화면이 전환되면 html 태그로 시작하여 html 태그로 끝나는 완전한 html을 서버로부터 전송받아 웹페이지 전체를 다시 렌더링하는 방식으로 동작했다. 전통적인 웹페이지 통신 방법은 단점이 존재했다. 변경할 필요가 없는 부분까지 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화면이 깜박이는 현상이 발생한다. 서버와의 통신이 동기 방식으로 동작하기 ..

42장 비동기 프로그래밍 2023년 5월 9일 809p~815p 42.1 동기 처리와 비동기 처리 "실행 컨텍스트"에서 살펴본 바와 같이 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 스택에서 팝되어 제거된다. 다음 예제의 foo 함수와 bar 함수는 호출된 순서대로 실행 컨텍스트 스택에 푸시되어 실행된다. const foo = () => {}; const bar = () => {}; foo(); bar(); 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순..

40장 이벤트(3) 2023년 5월 8일 783p~799p 40.7 이벤트 위임 Apple Banana Orange 선택된 내비게이션 아이템: apple 위 예제를 보면 모든 내비게이션 아이템(li 요소)이 클릭 이벤트에 반응하도록 모든 내비게이션 아이템에 이벤트 핸들러인 activate를 등록했다. 만약 ul 태그 하위에 5개의 li 태그가 있다고 하면, li의 각각의 요소에 이벤트 핸들러를 등록해야한다. 만일 li 태그가 100개라면 이벤트 핸들러로 100개를 등록해야한다. 이처럼 DOM 요소에 많은 이벤트 핸들러를 등록하므로 성능 저하의 원인이 될뿐더러 유지보수에도 부적합한 코드를 생산하게 한다. 이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를..

40장 이벤트(2) 2023년 5월 6일 767p~783p 40.5 이벤트 객체 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 아규먼트로 전달된다. // 이벤트 핸들러 어트리뷰트 방식의 경우 event가 다른 이름으로는 이벤트 객체를 전달받지 못한다. 참고로, 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 event를 통해 이벤트 객체를 전달받을 수 있다. 즉, 'event'가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다. 그 이유는, 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체를 의미하기 때문이다. onclick="showCoords(event)" 어트리뷰트는 파싱되어 다..

40장 이벤트(1) 2023년 5월 5일 754p~767p 40.1 이벤트 드리븐 프로그래밍 이벤트 핸들러(event handler) : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것. 이벤트 드리븐 프로그래밍(event-driven-programming) : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 "함수를 호출"하는 것이 아니라 "브라우저에게 함수 호출을 위임"한다. ex) onclick event - 사용자가 언제 클릭할 지 알 수 없으므로 브라우저에게 특정함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)할 수 있다. 40.2 이벤트 타입 이..

39장 DOM(4) 2023년 5월 4일 734p~753p 39.7 어트리뷰트 39.7.1 어트리뷰트 노드와 attributes 프로퍼티 HTML 요소를 제어하기 위한 추가적인 정보를 제공하는 어트리뷰트는 한개의 HTML 요소가 여러 개의 어트리뷰트를 가질 수 있다. 어트리뷰트는 시작 태그에 아래와 같이 정의한다. 모든 HTML 요소에 공통적으로 적용할 수 있는 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트가 있으며, 특정 HTML 요소에서만 사용할 수 있는 어트리뷰트도 있다. 글로벌 어트리뷰트 : id, class, style, title, lang, tabindec,draggable, hidden 등 이벤트 핸들러: onclick, onchange,onfocus, onblur, onmouseover, 등 HTML 문서가 ..

39장 DOM(3) 2023년 5월 3일 714p~733p 39.6 DOM 조작 DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. DOM 조작에 의해 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하기 때문에 성능에 영향을 준다. 따라서 성능 최적화를 위해 주의해서 다뤄야 한다. 39.6.1 innerHTML Element.prototype.innerHTML 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML 마크업을 취득하거나 변경한다. 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내에 모든 HTML 마크업을 문자열로 반환한다. Hello world! textContent 프로퍼티가 마크업을 무시하고 텍스트만 반환하..

이전 1 2 3 4 5 ··· 9 다음

티스토리툴바