자곰

먼저 두가지에 대해서 간략한 설명을 하고 비교를 해보며 학습을 해보겠습니다. Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없습니다. Axios는 서드파트 라이브러리로 CDN 혹은 패키지 매니저를 통해 설치하여야 사용할 수 있습니다. 두 가지 모두 promise 기반의 HTTP 클라이언트입니다. 즉, 네트워크를 요청하면 resolve, reject 할 수 있는 promise를 반환합니다. 두 가지는 모두 네트워크 요청을 하고 promise를 반환합니다. 무엇이 다를까요? 문법 1) fetch fetch(url, { method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, e..

html에 자바스크립트를 적용 시킬 때는 2가지를 고려해야 합니다. 첫 번째는 태그와 태그 중 어디에 넣을 것인가? 두 번째는 async 방식과 defer 방식중 어떤 것을 선택할 것 인가? 스크립트 파일 입력 시기에 따른 차이 ( head vs body ) 스크립트를 태그 내에 포함하는 경우 스크립트 파일이 HTML 문서의 파싱 과정 중에 로드되고 실행됩니다. 따라서, 스크립트 파일을 로드하는 동안에는 HTML 파싱이 일시 중단됩니다. 이는 스크립트 파일이 크거나 다운로드 시간이 오래 걸릴 경우 웹 페이지의 렌더링이 지연될 수 있는 단점이 있습니다. 과정 : parsing HTML → js script 파일 만남 → fetch → excute → parsingHTML → 페이지 준비! ( fetch +..

Promise를 잘 다루는 방법 중 하나는 매서드를 사용하는 것 입니다. 5가지 주요 매서드를 정리해봅시다. 1. Promise.all 여러 개의 Promise를 동시에 처리하고, 모든 Promise가 이행되거나 한 개의 Promise가 거부될 때까지 기다리는 기능을 제공 .all 메서드는 Promise들로 이루어진 배열을 인자로 받습니다. 모든 Promise가 이행되면 최종적으로 배열을 반환 하지만 하나의 Promise라도 실패하면 첫 번째 거부된 Promise의 결과를 반환하며 나머지 Promise들은 무시 병렬 처리에 유용 const promise1 = fetchDataFromServer1(); const promise2 = fetchDataFromServer2(); const promise3 = ..

이전 포스팅에서 콜백에서 순차적으로 비동기작업을 처리할 때 콜백지옥을 보셨던 것 기억하시나요? 프로미스에선 순차적으로 처리해야하는 비동기 작업이 여러개 있을때 어떻게 해야할까요? 프라미스 체이닝을 통한 비동기 처리를 이용한다면 어렵지 않습니다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (1) }).then(function(result) { // (2) alert(result); // 1 return result * 2; }).then(function(result) { // (3) alert(result); // 2 return result * 2; }).then(function(result) { alert..

콜백이란? 자바스크립트에서는 함수는 객체입니다.( 매우 중요한 사실) 함수의 파라미터로서 객체를 전달할 수 있을까요? 네, 할 수 있습니다. 다른 함수에 인수로 전달되는 함수입니다. ( 일급 함수 ) 예를 들어, map의 경우 각 반복에 대해 동기적으로 호출 되는 콜백 함수를 사용합니다. const map = (arr, callback) => { const result = [] for (let i = 0; i n * 2) // [2, 4, 6, 8, 10] JS는 코드를 위에서 아래로 순차적으로 실행합니다. 그러나 코드가 다른 행위..

캡처링과 버블링을 활용하여 이벤트 위임(event delegation) 을 구현하는 시간을 가져보겠습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다룰때 사용합니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당하여 요소들을 한번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target 을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 예를 들어, 여러 개의 리스트 아이템()이 있는 목록()이 있다고 가정해봅시다. 각 리스트 아이템을 클릭할 때마다 어떤 동작을 수행하고자 합니다. 이때 이벤트 위임을 사용하면 모든 리스트 아이템에 각각 이벤트 핸들러를 등록하지 않아도 됩니다. 아래는 이벤트 위임을 사용하여 목록의 ..

이벤트 버블링과 이벤트 캡처링은 자바스크립트의 이벤트 전파 방식에 대해 중요한 개념입니다. 이 두 가지는 이벤트가 DOM 요소에서 상위 요소로 전파되는 방향을 나타내며, 이를 이해하고 활용하면 효율적인 이벤트 처리와 이벤트 위임을 구현할 수 있습니다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, 상위 요소로 전파되는 방식입니다. 즉, 자식 요소에서 발생한 이벤트가 부모 요소로 전파됩니다. 예를 들어, 클릭 이벤트가 버튼에서 발생하면, 버튼 -> 부모요소 -> 부모요소의 부모요소 순으로 이벤트가 전파됩니다. 💡 ⚠️거의 모든 이벤트는 버블링 됩니다. 키워드는 ‘거의’ 입니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있습니다. 버블링 되지 않는..

자바스크립트는 Single Thread 기반 언어 자바스크립트는 Single Thread기반의 언어입니다. 쓰레드가 하나라는 말은 한번에 하나의 작업만 처리 가능하다는 뜻이죠. 하지만, 우리가 자바스크립트를 사용하는 환경인 Node는 여러 개의 HTTP요청을 처리하고, 브라우저는 이벤트 처리나 애니메이션 실행 등 다양한 일을 동시에 처리합니다. 이것은 마치 싱글 쓰레드가 아닌 것처럼 여러 작업을 동시에 처리합니다. 이것은 마치 멀티 쓰레드처럼 동작하지 않는가?라는 생각을 가질 수 있습니다. Javascript가 이렇게 동작이 가능한 이유를 알아보겠습니다. 자바스크립트 엔진 JS엔진의 대표적인 예는 google에서 만든 V8엔진입니다. 우리는 이 v8엔진을 통해 웹에서 Javascript 코드를 실행시킬 ..

자바스크립트를 공부하면서 class와 프로토타입에 대해 다시 공부하며 여러 생각을 정리를 하는 시간을 가져보았다. 이를 위해 다른 언어에서 쓰는 객체지향을 되짚어보고 Js에서 프로토타입이라는 것을 도입하게 되는 원리에 대해서 공부했습니다. 공부를 하면서 컴퓨터 프로그래밍이 철학과 관련성이 있다는 것도 알게 되었고 this, 호이스팅이라는 개념이 필연적으로 나타나는 것을 알 수 있었다. “호이스팅은 자바스크립트에서 전체 코드를 훑을 때 선언 부를 상단으로 올린다.” “this 는 기본적으로 global(브라우저에선 window)을 가리키고 실행 컨텍스트마다 달라질 수 있으니 bind 등을 통해 제어해야 한다.” 라는 암기식이 아닌 '왜'인지 알아보기도 하겠습니다. 먼저 객체 지향이 무엇인지 파악하고 JS언..