안녕하세요 TriplexLab 입니다. 오늘은 URLSearchParams 유틸리티 메서드에 관해서 이야기를 해보도록 하겠습니다. URLSearchParams은 URL의 쿼리 문자열 받아서 처리하는 고마운 메소드 입니다. 바로 사용예시 확인해 봅시다. 😃😃 예시코드)👇🏻 // api/request.js const apiFetchHandler = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error('데이터를 불러오는데 실패했습니다.'); } const body = await response.json(); console.log(body); return body; } catch (e) { con..

항해99 | 5주차 WIL회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 Axios 입니다. 이번 글은 "Axios & fetch 비교 #16" 라는 글과 겹치는 내용이 조금 있습니다. 👍🔥 Axios란? / Axios & fetch 비교 #16 ⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax triplexlab.tistory.com 👉Axios 란? - Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. - 쉽게 말해서 백엔드랑 프론트엔드랑 통신..

✅JavaScript로 최신순, 베스트순 만들기 안녕하세요 TriplexLab입니다. 오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다. 🔥Mock데이터를 화면에 출력 먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다. const $ = (select) => document.querySelector(select); (() => { const getDatas = async () => { const res = await fetch("./mock.json"); const body = await res.json(); return body; } const handleLoad = async () => { await getDatas().t..

🏋️catch 메소드 이해하기#7 안녕하세요. 이번시간에는 catch 메소드에 대해서 이야기를 해보도록 하겠습니다. // Internet Disconnected fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); }); fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달될 수 있는 걸까요? 사실 이 내용은 이전의 'then 메소드 완벽하게 이해하기' 노트를 잘 읽었다면 바로 이해할 수 있는 내용인데요. 지금 이 코드를 이렇게 수정..

🧑🏻‍💻then 메소드 완벽하게 이해하기#6 Promise 객체를 배울 때는 then 메소드에 관해서만 확실히 알면 딱히 어려운 내용이 없습니다. 이번 노트에서는 Promise의 then 메소드에 관한 규칙을 제대로 깊이있게 배워봅시다. 잠깐 아래 코드를 보세요. 👇👇 const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 이 코드를 해석해봅시다. 일단, 이 코드에서 (1) fetch 메소드가 리턴하는 Promi..

💻rejected 상태가 되면 실행할 콜백#5 지금까지는 Promise 객체 fulfilled 상태인 경우만 생각했는데요. 사실 하나의 Promise 객체가 가질수 있는 상태는 총 3가지가 있다고 했습니다. 아직 작업중인 상태를 나타내는 pending 상태 작업이 성공적으로 완료 되었음을 나타내는 fulfilled 상태 작업이 실패 되었음을 나타내는 rejected 상태 이렇게 3가지 라고 했는데요. 이 중에서 fulfilled 상태는 작업 성공 결과를 갖게 되고, rejected 상태는 작업 실패 정보를 갖게 됩니다. 여기서 첫번째 then메소드를 보면 이때까지와 달리 총 두개의 콜백이 들어가 있습니다. 일단 첫번째 콜백은 우리가 이때까지 배웠던것 처럼 Promise 객체가 fulfilled 상태가 될..

Promise Chaining 프로미스 체인 쓰는 이유(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise Chaining을 왜 사용하는지 주제로 이야기를 해보도록 하겠습니다. 🎯 then 메소드 뒤에는 계속해서 then 메소드를 연달아 붙일수 있는 사황 아래코드를 자세히 보면 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); return users[0]; }) .then((user) => { console.log(user); ..

비동기 실행 함수들#2 안녕하세요 TriplexLab 입니다. 오늘은 자바스크립트에는 비동기 실행되는 함수들이 존재합니다. 그 예시들을 하나씩 살펴보겠습니다. 🎯 1. setTimeout 함수 setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수입니다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 () ⇒ { console.log('b'); }, 이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룹니다. 그래서 이 코드를 실행..

🌐 fetch 함수와 비동기 실행#1 안녕하세요 TriplexLab 입니다. 비동기실행의 주제로 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 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되..

🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..

👩‍💻 자바스크립트 fetch, then, catch [Promise] 응용하고 안녕하세요 TriplexLab입니다. 오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :) 하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 관심 있는 분들은 보세요~ 🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기 자바스크립트 fetch, then, catch [Promise] 이해하기 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중. triplexlab.tistory.com 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..