제로베이스

자바스크립트에서의 디바운싱은 마지막으로 발생한 이벤트를 기준으로 특정 time이 지난 후 하나의 이벤트만 실행되도록 한다. 디바운싱을 적용하면 좋은 예시로는 검색 기능의 키 이벤트(input)가 있다. 검색 버튼을 누르지 않아도 사용자가 입력한 값이 변경될 때마다 자동으로 검색 요청을 보내는 기능을 만든다고 한다면, 사용자가 검색어를 다 입력하지 않았을 때에도 요청이 보내지게 되므로 비효율적이다. 이러한 경우에 디바운싱을 적용하면 사용자의 입력이 끝나고 일정 시간이 지난 후에 검색 요청이 1번만 보내지므로 성능을 향상시킬 수 있다. const inputEl = document.querySelector('#inputName'); let timeout; function handleAlert() { const..

자바스크립트에서 콜백은 어떤 함수의 파라미터로 전달되는 모든 함수를 의미하는 개념이다. 그러니까 어떤 함수의 파라미터로 전달되기만 한다면 해당 함수는 그 함수의 콜백이 되는것이다. 이런 콜백은 2가지로 나뉜다. 1. 동기 실행되는 콜백 2. 비동기 실행되는 콜백 📍 동기 실행되는 콜백 동기 실행되는 콜백에는 어떤 것들이 있을까? 예를 들어, 자바스크립트 배열의 베소드 중에서 filter라는 메소드를 생각해보자. 이 메소드는 배열의 여러 요소들 중에서 특정 조건을 만족하는 요소들만을 추려서 그 요소들로만 이루어진 새로운 배열을 리턴하는 메소드이다. const arr = [1, 2, 3, 4, 5, 6]; const newArr = arr.filter(function isOdd(num) { return (n..

async 함수는 그 안에서 리턴하는 값에 따라 그에 맞는 Promise 객체를 리턴한다. 📍 어떤 값을 리턴하는 경우 1. Promise 객체를 리턴하는 경우 async 함수 안에서 Promise 객체를 리턴하는 경우에는 해당 Promise 객체와 동일한 상태와 작업 성공 결과(또는 작업 실패 정보)를 가진 Promise 객체를 리턴한다. async function fetchAndPrint() { return new Promise((resolve, reject)=> { setTimeout(() => { resolve('abc'); }, 4000); }); } fetchAndPrint(); 이렇게 pending 상태의 Promise 객체를 리턴하기도 한다. (리턴된 Promise rorcpsms 약 4초..

fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); }); 어떻게 fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달 될 수 있는 걸까? 코드를 아래와 같이 수정해보자. fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then((response) => response.text()) // Promise-B .then(undefined, (error) => { co..

Promise 객체를 공부할 때 then 메소드에 대해서 확실히 알고 넘어가야 한다. const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 1. fetch 함수에서 리턴하는 Promise 객체를 Promise-A 객체라고 하고, 2. then 메소드가 리턴하는 Promise 객체를 Promise-B 객체하고 해본다. 그리고 fetch 함수의 작업이 성공하는 경우와 실패하는 경우 나누어서 생각해보자. 1. fet..

자바스크립트에는 fetch 함수 말고도, 비동기 실행되는 함수들이 존재한다. 1. setTimeout 함수 setTimeout 함수는 특정 함수의 실행을 원하는 시간 만큼 뒤로 미루기 위해 사용되는 함수이다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 ( ) => { console.log('b' }, 이 콜백의 실행을 두 번째 파라미터에 적힌 2000밀리세컨즈(=2초) 뒤로 미룬다. 그래서 이 코드를 실행하면 이렇게 a 와 c 가 먼저 출력되고, 약 2초가 지난 후에 b가 출력된다. fetch 함..

console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 위에 코드에는 2개의 콜백이 있다. 1. (response) => response.text() 2. (result) => {console.log(result)} fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행된다. 전체 코드의 실행 순서를 다시 정리하자면 1. console.log('Start!') 2. fetch 함수(리퀘스트 보내기 및 콜백 등록) 3. console.lo..

📍 각각의 상태 코드에는 대응되는 상태 메시지가 있다. 모든 상태 코드는 각각 대응하는 상태 메세지를 갖고 있다. 예를 들어, Status Code 200번은 OK, 404번은 NOT FOUND라는 상태 메시지를 갖고 있다. 각 상태 코드의 의미를 모두 외우기는 힘들기 때문에 이러한 상태 메시지는 상태 코드의 의미를 빠르게 파악하는데 도움을 준다. 📍 상태 코드는 100번대 ~ 500번대까지 있다. 1. 100번대 서버가 클라이언트에게 정보성 응답을 줄 때 사용되는 상태 코드들이다. • 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드이다. 예를 들어, 클라이언트가 용량이 좀 큰 파일을 리퀘스트의 바디에 담아..

웹에 존재하는 수많은 데이터 중에서 원하는 데이터를 특정하기 위해 URL을 사용한다. URL은 크게 아래와 같이 3가지로 이루어져 있다. • 호스트(host) • 패스(path) • 쿼리(query) 나는 URL를 직접 입력한 적이 거의 없다는 의문을 가질 수 있다. 보통 웹 브라우저의 주소창에 www.naver.com 나 www.google.com 처럼 URL에서의 호스트 부분까지만 입력하고, 어떤 서비스의 메인 페이지로 진입한다. 그리고 그 뒤로는 마우스로 화면에 있는 이미지나 버튼 등을 클릭할 뿐, 더이상 URL을 직접 입력할 일이 많지는 않은데 그 이유는 바로 이미 화면에서 클릭하는 버튼 등에 어느 URL로 새로운 리퀘스트를 보낼지, HTML 코드 또는 javascript 코드로 다 작성이 되어있..

fetch 함수로 리퀘스트 보내고, 리스폰스를 받아서 그 내용을 출력해보기 fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 📍 fetch 함수의 실행 원리 1. fetch 함수는 Promise 객체를 리턴한다. 2. Promise 객체의 then 메소드로, 리스폰스가 왔을 때 실행할 콜백 함수를 등록할 수 있다. 3. 이렇게 등록된 콜백 함수는 then 메소드로 등록한 순서대로 실행되고, 이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있다. 아래와 같이 코드를 작성해도 리스폰스의 내용을 출력 할 수 있지 않을까? 라는 의문이 생겼다. f..