이안의 평일코딩

44장 p.830 - REST(REpresentational State Transfer)의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. p.831 - URI는 리소스를 표현(동사보다는 명사)하고 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 주로 5가지 요청 메서드(GET, POST, PUT, PATCH, DELETE)를 사용하여 CRUD를 구현한다. p.837 - load 이벤트는 요청이 성공적으로 완료된 경우 발생한다. status 프로퍼티 값이 200이면 정상적으로 응답된 상태이고, P..

41장 p.800 - 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. - setTimout 함수의 콜백 함수는 타이머가 만료되면 단 한 번 호출되고, setInterval 함수의 콜백 함수는 타이머가 만료될 때마다 반복 호출된다. setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소할 수 있다. // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // 이때 콜백 함수에 'Lee'가 인수로 전달된다. const timerId = setTimeout(name => console.log(`H..

* 스터디 방식 0. 알고리즘 문제를 미리 배부한 뒤 각자 풉니다. (예습) 1. ZOOM을 통해 돌아가며 풀이를 발표합니다. (스터디) 2. 정답을 배부합니다. 3. 깃허브에 풀이 또는 오답노트를 정리해서 게시합니다. (복습) 스터디 방식에 수정, 추가할 것이 있으면 스터디 시작 전 같이 결정하겠습니다. * 비용 (조건) 비용은 월 4만원이며, 한 달 8회 기준으로 1일 당 5천원 씩 차감되며 스터디 완료 후 페이백 해드립니다. 중도하차 시에는 전액 돌려받으실 수 없다는 점 꼭 확인 부탁드립니다. 개인 이익을 취할 목적이 아닌, 벌금과 같은 스터디 자극용으로 이용할 계획이며 마지막 주 차에 남은 인원분으로 금액을 나누어 지급합니다. (자바스크립트 다이버스터디에서도 투명하게 3개월 동안 관리한 이력이 있..

p.754 - 함수를 언제 호출할 지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. p.758 - 이벤트 핸들러(event handler, event listener)는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수다. 다시 말해, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러다. > 이벤트 핸들러를 등록하는 3가지 방법 1. 어트리뷰트 방식 - 이벤트 핸들러 어트리뷰트의 이름은 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다. DOM 노드의 이벤트 핸들러 프로퍼티에 함수 참조를 할당하는 프로퍼티 방식과는 달리 함수 호출문 등의 문을 할당한다. Click me! 2. 프로퍼티 방식..

p.695, 699 - DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다. 스프레드 문법을 사용하여 간단히 배열로 변환할 수 있고 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장한다. > 노드 정보 취득 - Node.prototype.nodeType: 노드 타입을 나타내는 상수로 반환. 1: 요소 노드 타입, 3: 텍스트 노드 타입, 9: 문서 노드 타입 - Node.prototype.nodeName: 노드의 이름을 문자열로 반환. 요소 노드, 텍스트 노드, 문서 노드 Hello > DOM 조작 - Element.prototype.innerHTML 프로퍼티는 ..

38장 p.661 브라우저의 렌더링 과정(critical rendering path) 1) HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음 2) 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리 생성 3) 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree: 추상 구문 트리)를 생성하고 바이트코드로 변환하여 실행 (이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합) 4) 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하..

35 p.627 - 스프레드 문법(spread syntax: 전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집 합을 펼쳐서 개별적인 값들의 목록으로 만든다. Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다. 1. 함수 호출문의 인수 목록 p.629 - 스프레드 문법이 제공되기 이전에는 배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은 경우 Function.prototype.apply를 사용했다. 스프레드 문법을 사용하면 더 간결하고 가독성이 좋다. // Math.max 메서드에 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없다 Math..

32 p.594 - String 객체의 메서드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값이기 때문에 String 래퍼 객체도 읽기 전용(read only)객체로 제공된다. > String 메서드 - String.prototype.indexOf: 인수로 전달받은 문자열 검색하여 첫 번째 인덱스 반환, 검색 실패시 -1 반환 - String.prototype.includes: ES6에서 도입된 메서드로 문자열 포함 결과를 true 또는 false로 반환한다. if (str.indexOf('Hello') !== -1 { // 문자열 str에 'Hello'가 포함되어 있는 경우에 처리할 내용 } if (str.includes('Hello')) { // 문자열 str에..