본문 바로가기

JavaScript

[모던자바스크립트 DeepDive] 47장 에러 처리 & 48장 모듈 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 47장 에러 처리 에러 처리의 필요성 에러를 방치하면 프로그램은 강제 종료됨 console.log('start'); // 실행 정의되지않은함수(); // 에러 console.log('end'); // 실행 X try...catch문을 사용하면 강제 종료되지 않는다 console.log('start'); try{ 정의되지않은함수(); } catch(err){ console.error(err); } console.log('end'); // 실행 O 직접적으로 에러를 발생하는 상황 이외에 간접적인 상황도 존재 const element = document.getElementById('없는id'); // .. 더보기
[모던자바스크립트 DeepDive] 46장 제너레이터와 async await 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 제너레이터 ES6에서 도입되었으며 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다. 특징 함수 호출자에게 함수 실행의 제어권을 양도 가능 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. 함수 호출자와 함수의 상태를 주고받을 수 있다 함수의 호출자와 양방향으로 함수의 상태를 주고받을 수 있다. 제너레이터 함수 호출시, 제너레이터 객체를 반환한다 이터러블이면서 동시에 이터레이터인 객체를 반환 📙 제너레이터 함수의 정의 function 키워드로 선언하며 하나 이상의 yield 표현식을 포함한다. 일관성 유지를 위해 function 키워드 바로 뒤에 붙이.. 더보기
[모던자바스크립트 DeepDive] 45장 Promise 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처치가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있기 때문에 프로미스가 등장하였다. 비동기 처리를 위한 콜백 패턴의 단점 📙 콜백 헬 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. let a = 0 setTimeout(() => { a = 100 }, 0) console.log(a) // 0 위처럼 비동기 함수 내부의 비동기로 동작하는 코드에서 처리.. 더보기
[모던자바스크립트 DeepDive] 41장. 타이머 & 43장. Ajax 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 호출 스케줄링 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수 사용 setTimeout setInterval clearTimeout clearInterval JS 엔진은 싱글 스레드 이기 때문에(단 하나의 실행 컨텍스트) 타이머 함수는 비동기 처리 방식으로 동작한다. 타이머 함수 setTimeout (callback, ms[, params1, ...] 일정 시간 이후에 콜백함수 실행 시간은 밀리초 단위로 사용 clearTimeout(timerId) 즉시 타이머 중지 const timer = setTimeout(() => console.log('Hi!'), 1000); cl.. 더보기
[모던자바스크립트 DeepDive] 40장 이벤트 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 이벤트 드리븐 프로그래밍 브라우저는 스스로 감지해서 특정 사건이 발생하면 해당 이벤트를 발생시킨다. 특정 이벤트에 대해 어떤 일을 하고 싶다면 우리는 브라우저에게 특정 이벤트가 발생 했을 때 호출될 함수를 알려주어 브라우저에게 호출을 위임한다 왜냐하면 우리는 특정 이벤트가 언제 발생할지 알 수 없으므로, 이벤트를 감지할 수 있는 브라우저에게 전적으로 위임하는 것 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트와 이벤트 핸들러를 통해 사용자와 애플리케이션은 상호작용한다 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그.. 더보기
[모던자바스크립트 DeepDive] 42장 비동기 프로그래밍 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 동기와 비동기 동기 순차적으로 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료될 때까지 대기하는 방식을 의미한다. 비동기 실행순서와 상관없이 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료되기 전에 다음 태스크를 실행하는 것을 의미한다. 블로킹과 논블로킹 블로킹 동기처리로 인해서 다음 태스크의 실행이 중지되는 현상 논블로킹 비동기처리로 인해서 다음 태스크의 실행을 바로하는 것 📙 콜 스택 실행 컨텍스트 스택을 의미하며, 현재 실행중인 함수들이 실행 순서대로 들어가서 실제로 실행되게 해주는 자료구조이다. 📙 태스크 큐 비동기 함수의 콜백함수들이 임시적으로 보관되는 영역이다. 📙 이벤트.. 더보기
[모던자바스크립트 DeepDive] 37장 Set과 Map 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다 ⭕️ ❌ 요소 순서에 의미가 있다 ⭕️ ❌ 인덱스로 요소에 접근 할 수 있다. ⭕️ ❌ 📙 Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. 인수를 전달하지 않으면 빈 Set 객체가 생성된다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때, 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]); console.lo.. 더보기
[모던자바스크립트 DeepDive] 35. 스프레드 문법 & 36. 디스트럭쳐링 할당 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 스프레드 문법 간단하게 요소를 개별적으로 분리하거나 합쳐주는 문법이다 기본적으로 이터러블에 사용이 가능하다 사용 가능한 곳 - 함수 호출문의 인수 - 배열 리터럴 - 객체 리터럴 내부 ( 이터러블 아니어도 사용가능 ) console.log(...[1,2,3]);// 1, 2, 3 console.log(..."str");// "s", "t", "r" console.log(...{ 0: "a", 1: "b" });// error // 1. 함수 호출문의 인수 function foo(...args){ console.log(args);// [1, 2, 3] } foo(...[1, 2, 3]); // 2... 더보기
[모던자바스크립트 DeepDive] 34. 이터러블 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 이터러블 이터러블이란 이터러블 프로토콜을 준수하는 객체다. 이터러블이면 for ~ of, spread operator, destructuring가 사용 가능하다. 📙 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받고, 그 함수를 호출하면 이터레이터 프로토콜에 준수한 이터레이터를 반환하는 것을 이터러블 프로토콜이라고 한다 📙 이터레이터 프로토콜 위에서 말한 반환한 이터레이터가 next()를 소유하며, next()는 value와 done프로퍼티를 가지는 객체를 반환하는 것을 이터레이터 프로토콜이라고 한다 이 이터레이터는 요소를 탐.. 더보기
[모던자바스크립트-DeepDive]39장 DOM 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다. 📌 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다 DOM 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조이다 노드 📙 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다 이때, HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 컨텍츠는 텍스트 노드로 변한다 ✅ HTML 요소간의 부자 관계를 반영해 HTML 요소를 객체화한 모든.. 더보기
반응형

티스토리툴바