모듈 모듈의 일반적 의미 개별적 요소로서 재사용 가능한 코드 조각 자바스크립트와 모듈 레거시 분석을 위해서가 아니면 amd는 모르고 넘어가도 됨. ES6 모듈(ESM) 모듈 스코프 독자적인 모듈 스코프를 가지고 있음. export 외부에 공개 // 변수, 함수 클래스를 하나의 객체로 구성하여 공개 export { pi, square, Person }; export default object; //기본 import import { pi, square, Person } from './lib.mjs'; import * as lib from './lib.mjs'; // 앨리어싱 import object from './lib.mjs'; //export default가 있는 경우 책에서는 하나의 값만 export ..

에러처리 에러처리의 필요성 예외상황 대응 try catch finally try { // 실행할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 상관없이 반드시 한 번 실행된다. } Error 객체 생성자 함수 인스턴스 Error 일반적 에러 객체 SyntaxError 자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체 ReferenceError 참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체 TypeError 피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 ..

제네레이터와 async/await 제네레이터란? 코드 블록을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 함수 호출자에게 제어권 양도 가능 함수 호출자와 상태를 주고 받을 수 있음 제네레이터 함수의 정의 function*로 선언하고 하나 이상의 yield 표현식을 포함한다. 화살표 함수나 생성자 함수로 정의할 수 없음. 제네레이터 객체 제네레이터 함수가 반환한 객체는 이터러블이면서 이터레이터이다. next 메서드를 갖는 이터레이터이지만 return, throw 메서드를 갖는다. 제네레이터의 일시중지와 재개 yield 키워드는 일시중지 시키거나 키워드 뒤에 오는 표현식의 평가 결과를 반환한다. 이터레이터의 next와 달리 인수 전달 가능 function* genFunc() { // 처음 ne..

프로미스 비동기 처리를 위한 콜백 패턴의 단점 비동기 함수는 처리 결과를 외부에 반환할 수 없어, 콜백을 사용해야 하는데 콜백이 수없이 중첩되는 경우가 생김. 이를 콜백 지옥이라 함. 에러 처리 부분에서 try catch 문 내의 비동기 함수의 에러를 캐치하지 못하는 문제가 있음. -> 단일 콜백일 경우 비동기 함수 내부에서 에러 처리 하면 됨. 그러나 여러개의 콜백함수를 묶어 에러처리를 할 수 없음. 프로미스의 생성 // GET 요청을 위한 비동기 함수 const promiseGet = url => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr..

REST API REST API의 구성 구성 요소 내용 표현 방법 자원resource 자원 URI(엔드포인트) 행위verb 자원에 대한 행위 HTTP 요청 메서드 표현representations 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 URI는 리소스를 표현해야함. 행위는 메서드로 표현 JSON Server 실습파일 2개로 대체 postman의 mock 기능이나 MSW 사용 추천 https://devvkkid.tistory.com/219 https://blog.mathpresso.com/msw로-api-모킹하기-2d8a803c3d5c

Ajax 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 처리 JSON 텍스트 데이터 포맷. 객체 리터럴과 유사함.(큰 따옴표 강제. 키도 큰따옴표로 묶어야함.) JSON.stringify 객체(또는 배열)를 JSON 포맷의 문자열로 변환. 직렬화라함(serializing). 리시버를 이용하여 데이터 변환 가능 JSON.parse JSON 포맷의 문자열을 객체로 반환. 리시버를 이용하여 데이터 변환 가능 JSON.parse('{"p": 5}', (key, value) => typeof value === 'number' ? value * 2 // 숫자라면 2배 : value // 나머진 그대로 ); XMLHttpRequest 이제는 안 쓸꺼라 넘어감.

비동기 프로그래밍 동기 처리와 비동기 처리 자바스크립트 엔진은 싱글 스레드이기 때문에 처리에 시간이 걸리는 태스크가 있으면 블로킹이 발생함. setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 작동함. 이벤트 루프와 태스크 큐 js의 동시성을 지원하는게 이벤트 루프. 콜스택과 힙으로 구성됨. 콜스택 소스코드(전역 코드나 함수 코드 등) 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다. 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에..

타이머 타이머 함수 setTimeout, clearTimeout setInterval, clearInterval 디바운스와 스로틀 디바운스 const $input = document.querySelector('input'); const $msg = document.querySelector('.msg'); const debounce = (callback, delay) => { let timerId; // debounce 함수는 timerId를 기억하는 클로저를 반환한다. return (...args) => { // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다. // 따라서 delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다. ..

이벤트 이벤트 드리븐 프로그래밍 이벤트 핸들러 : 이벤트가 발생됐을때 호출할 함수 이벤트 핸들러 등록 : 이벤트가 발생했을때 브라우저에게 이벤트 핸들러의 호출을 위임 이벤트 타입 마우스 이벤트 타입 이벤트 발생 시점 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓았을 때 mousemove 마우스 커서를 움직였을 때 mouseenter 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링 2되지 않는다) mouseover 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링된다) mouseleave 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링되지 않는다) mouseou..

DOM 노드 HTML요소 html문서를 구성하는 개별적인 요소. html 문서는 요소의 집합이며, 중첩 관계를 갖는다. 트리 자료 구조 부모와 자식으로 구성되며 최상위 노드는 root 노드라 함. 루트는 0개이상의 자식을 갖는다. 자식이 없는 노드는 리프 노드라 함. 노드 객체들로 구성된 트리 자료구조를 DOM 혹은 DOM 트리라고 함. 노드 객체의 타입 문서노드 - 최상위 객체로 document 객체를 가르킴. 요소노드 - html 요소를 가르킴. 어트리뷰트 노드 - html요소의 어트리뷰트를 가르킴. 부모와 상관없이 요소노드에만 연결되어 있음. 텍스트 노드 - html요소의 text를 가르킴. 자식 노드를 가질 수 없음. 노드 객체의 상속 구조 Object └── EventTarget └── Node..