✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..

안녕하세요 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..

👉async/await 구문의 실행 원리 이번 시간에는 async 함수가 다른 코드랑 섰여서 실행될때 모습을 살펴보겠습니다. 일단 그전에 알아야 하는 중요한 사실이 있습니다. 그건 바로 await 키워드는 async함수 안에서 사용할수 있다는 사실 입니다. 정말 그런지 한번 살펴 볼게요. 함수 앞에 붙은 async를 지우고 코드를 실행하면 다음과 같이 에러가 납니다. (await함수는 async 안에서만 실행 할수 있다고 써 있네요) 그러니깐 await 키워드는 async함수 안에서 사용할수 있다는 사실 이점 꼭 기억 해주세요. 이제 코드를 본격적으로 수정했습니다. console.log를 넣었고, 1~7까지 숫자를 넣었습니다. 여기써 있는 순서대로 각 console.log 실행 됩니다. 왜 그렇게 실행 ..

👉async/await이란? 안녕하세요 TriplexLab 입니다. 이번 시간부터 async/await관해서 이야기를 해보겠습니다. (async/await이란 fetch함수말고, Promise객체를 좀더 간단하게 다룰수 있는 방법 입니다. 😃😃👏👏👍) 자 이제 위에 있는 이미지에서 강조한 부분들을 설명하도록 하겠습니다. Promise객체가 등장하므로써 콜백핼 문제를 해결하고, 비동기 실행 코드를 조금더 보기좋게 작성하는것이 가능해 졌습니다. Promise객체가 등장한 이후에도 더 발전했습니다. async/await의 구분 입니다. async는 비동기라는 의미 입니다. async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다. asynchronous의 줄임말로 우리가 배운 비동기를 의미합니다..

⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재한다고 했죠? 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것입니다. 잠깐 간단하게 axios 패키지를 사용한 코드를 보겠습니다. axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); 이 코드는 axios 패키지에서 제공하는 a..

✅여러 Promise 객체를 다루는 방법(심화) 이때까지 우리는 하나의 Promise 객체를 다루기 위해 알아야 하는 지식들을 배웠습니다. 하지만 실무 개발에서는 여러 개의 Promise 객체를 동시에 다뤄야 하는 경우 도 있는데요. 이번 노트에서는 여러 개의 Promise 객체를 다뤄야 할 때 사용되는 Promise의 메소드들을 배워보겠습니다. 1. all 메소드 설명을 하기에 앞서 바로 코드를 보겠습니다. // 1번 직원 정보 const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json()); // 2번 직원 정보 const p2 = fetch('https://learn.codeit.kr/api/members/2')...

🎯이미 상태가 결정된 Promise 객체 이전까지우리는 pending 상태에 있다가 fulfilled 상태 또는 rejected 상태가 되는 Promise 객체를 직접 만드는 법을 배웠습니다. 그런데 아예 처음부터 바로 fulfilled 상태이거나 rejected 상태인 Promise 객체를 만드는 것도 가능한데요. 어떻게 할 수 있는지 살펴봅시다. 1. 이미 상태가 결정된 Promise 객체 만들기 (1) fulfilled 상태의 Promise 객체 만들기 const p = Promise.resolve('success'); Promise의 resolve라는 메소드를 사용하면 바로 fulfilled 상태의 Promise 객체를 만들 수 있습니다. 위와 같이 쓰면 fulfilled 상태이면서, 작업 성공 ..

🔥Promisify(프로미스화)(Promise 동작원리)​ 이전 노트에서는 직접 Promise 객체를 만드는 방법을 배웠습니다. 그럼 언제 이런 식으로 Promise 객체를 직접 만들게 되는 걸까요? 다양한 경우들이 있지만, 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만드는 경우가 많습니다. 각각의 예시를 통해 이게 무슨 말인지 이해해봅시다. 👉setTimeout 함수 예시 예를 들어 이런 wait이라는 함수가 있다고 합시다. function wait(text, milliseconds) { setTimeout(() => text, milliseconds); } wait 함수는 특정 밀리세컨즈만큼 시간이 지난 후에 text 파..

🏆직접 만들어보는 Promise 객체(Promise 동작원리) 이때까지 우리는 예시코드에서 fetch함수에서 리턴하는 promise객체를 사용했습니다. 그런데 사실 이렇게 어떤 함수가 리턴하는 promise객체를 가져다 쓰는게 아니라 직접 promise객체를 생성하는것도 가능합니다. 이번 시간에는 직접 promise객체를 만드는 방법을 배워 보겠습니다. 이 코드가 바로 promise객체를 직접 생성하는 코드 입니다. const p = new Promise((resolve, reject) => { }); new Promise 이 부분이 promise객체를 생성 하는 코드 인데요 이렇게 new를 붙이면 자바스크립트에서는 새로운 객체를 생성할수 있습니다. 여기서 중요한것은 파라미터로 들어간 콜백 함수 입니다...

📔Promise 객체는 왜 등장했을까?(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise 객체는 왜 등장했을까? 라는 주제로 이야기를 해보겠습니다. 이때까지 우리는 Promise Chaining, then/catch/finally 메소드 등 Promise 객체에 관한 많은 것들을 배웠습니다. 그런데 여기서 궁금한 점이 하나 있습니다. Promise 객체는 왜 등장한 걸까요? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는 방법은 있었습니다. setTimeout 함수나, addEventListener 메소드처럼요. setTimeout(callback, milliseconds); addEventListener(eventname, callback);..

🤟finally 메소드(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 이때까지 우리는 Promise객체의 then메소드와 catch메소드에 대해서 배웠습니다. 하지만 알아야 할 메소드가 하나더 남았습니다. 바로 finally 메소드 입니다. 만약 어떤 비동기 작업이 성공하든, 실패하든 상관 없이 그렇니깐 Promise 객체가 fulfilled 상태가 되든 , rejected 상태가 되든 상관 없이 항상 실행하고 싶은 콜백이 있을때는 어떻게 해야 할까요? 그런 콜백을 finally 메소드로 등록하면 됩니다. 일단 현재 코드에 finally 메소드를 추가해볼게요 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => ..

✅catch 메소드를 여러 개 쓰는 경우#9 안녕하세요 TriplexLab 입니다. 이번시간에는 catch 메소드를 여러 개 쓰는 경우에 대해서 살펴보겠습니다.🔥🔥 우리는 이제 catch 메소드를 Promise Chain 가장 마지막에 붙임으로써, 중간에 에러가 발생해서 어느 Promise 객체가 rejected 상태가 되더라도 항상 대처할 수 있도록 해야 한다는 걸 배웠습니다. 하지만 catch 메소드를 마지막뿐만 아니라 Promise Chain 중간중간에 쓰는 경우도 존재합니다. 만약 중간에 에러가 발생해도 catch 메소드가 그 대안을 뒤로 넘겨줄 수 있으면 catch 메소드를 중간에 써도 되는데요. 아래 코드를 잠깐 봅시다. fetch('https://friendbook.com/my/newsfee..