Javascript

들어가며우리가 fetch를 통해 요청을 하다보면 서버의 응답이 너무 느린 경우나, 사용자가 요청을 취소 할 수 있게 구현해야 하는 경우가 종종 있다. 혹은 그런 경우가 아니더라도, 취소를 함으로써 error를 발생시켜 어떤 동작을 실행 시키고 싶을 수도 있다. 이런 경우에, AbortController를 사용해서 해결할 수 있다. ChatGPT 사이트의 생성 취소 버튼도 이를 사용한 예시 중 하나다.   AbortController?AbortController는 하나 이상의 웹 요청을 취소하기위해 만들어진 인터페이스이다. 보통 생성자를 통해 새로운 객체를 만들어서 사용하게되고, 주요 사용법으로는 2가지 정도가 있다.  AbortController APIAbortController()생성자이며, new 연..

자바스크립트에서 비동기 처리를?자바스크립트는 싱글 쓰레드 언어이기 때문에 여러 일을 한번에 처리할 수 없다. 즉, 한 작업이 끝난 이후에 다른 작업을 시작할 수 있다. 하지만 자바스크립트는 fetch를 통해 데이터를 가져오는 동안에 다른 작업을 할 수 있다. 분명 자바스크립트는 여러 일을 한번에 처리할 수 없을텐데 말이다. 그렇다면, 싱글 쓰레드인 자바스크립트에서 어떻게 비동기적으로 병렬 처리가 가능한 것일까? 자바스크립트 비동기 병렬 처리 원리결론부터 말하자면, 자바스크립트는 브라우저를 이용해 비동기 병렬 처리를 한다. 브라우저는 멀티 쓰레드로 이루어져 있기 때문에, 메인 자바스크립트 스레드를 차단하지 않고 다른 쓰레드에서 작업이 가능하다. 브라우저는 이 쓰레드들을 Web API를 통해 이용할 수 있게..

Generator 함수(function*)와 Generator는 ES6에서 소개되었습니다. 이들을 이용해 함수 실행 도중 멈추고, 다시 멈췄던 부분 이후부터 실행되도록 할 수 있습니다. 이 특징을 이용해, async / await 을 Generator로 구현할 수 있습니다! 구현에 대한 내용은 이 글을 참고해주세요. Generator를 사용한 라이브러리로는 Generator로 쉽게 non-blocking 코드를 작성할 수 있게 해주는 라이브러리인 co, Node.js의 프레임워크 중 하나인 Koa, 비동기 처리를 위한 리덕스 미들웨어인 redux-saga 등이 있습니다. Generator 함수 Generator 함수의 기본형태는 다음과 같습니다. // Generator Function function* ..

IIFE란? IIFE(Immediately Invoked Function Expression: 'Iffy'로 발음)는 간단히 설명하자면 "정의와 동시에 즉시 실행되는 함수"를 말합니다. IIFE에 대해서 제대로 이해하기 위해서는 2개의 사전지식이 필요합니다. 함수 선언과 함수 표현식의 차이 클로져 클로져에 대해서는 글이 길어지므로, 다른 블로그나 MDN에서 먼저 보고 오시는 것을 추천드립니다. 함수 선언(Declaration)과 함수 표현식(Expression) IIFE에 대해서 더 명확히 이해하기 위해서, 함수 선언과 함수 표현식의 차이를 인지하고 있어야합니다. // 함수 선언 (익명함수 사용 불가능) function myFunc() { // do something... } // 함수 표현식 (익명함수..

DOM이란? DOM은 (Document Object Model)의 약자로, HTML, XML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스입니다. DOM은 문서를 nodes와 objects로 표현하며, 웹 페이지를 자바스크립트와 같은 프로그래밍 언어들을 통해 사용될 수 있게 연결시켜주는 역할을 담당합니다. DOM은 개발자 도구 > Elements(요소) 탭에서 쉽게 확인할 수 있습니다. 확인해보면, HTML 문서의 tag들이 node와 같이 계층구조로 표현되어 있는 것을 볼 수 있습니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성됩니다. 예를 들어 document object 는 HTML d..