function getData(){ fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(({title}) => console.log(`음답: ${title}`)) } function handleHeavyTask(bFetch){ if(bFetch) getData(); //fetch 비동기 요청 else console.log('지연없이실행') //코드의 실행 순서 보장 못함. } (function(){ console.log('안녕하세요'); handleHeavyTask(false); console.log('무거운 작업이 시작됐어요.'); })(); 결과) 👇🏻 이것은 동기와, 비동기 코드가 ..

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

🔥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를 붙이면 자바스크립트에서는 새로운 객체를 생성할수 있습니다. 여기서 중요한것은 파라미터로 들어간 콜백 함수 입니다...

😃 catch 메소드는 마지막에 씁니다#8 안녕하세요 TriplexLab 입니다. 이번 시간에는 catch 메소드를 실무에서 보통 어떻게 사용하는지 보겠습니다. 일단 다음 코드를 보면 지금 fetch함수 작업이 실패하더라도 catch메소드에서 대비를 하고 있기 때문에 괜찮습니다. 그런데 만약 catch 메소드 뒤에 있는 then 메소드 콜백에서 에러를 발생하면 어떻게 될까요?? fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error) }) .then((result) => { console.log(result) }); 제가 여기서 이니적..

🏋️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 메소드 완벽하게 이해하기' 노트를 잘 읽었다면 바로 이해할 수 있는 내용인데요. 지금 이 코드를 이렇게 수정..

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

🙌fetch 함수는 Promise 객체를 리턴합니다(Promise 동작원리)​ 안녕하세요 TriplexLab입니다. 오늘은 fetch 함수에 관해서 자세히 알아봅시다. fetch 함수는 promise 객체를 리턴합니다. (fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행합니다.) console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') //(fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행 합니다.) .then((response) => response.text()) .then((result) => {console.log(result)}); console.log('End'); ..

비동기 실행 함수들#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 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..