본문 바로가기

강의 실습159

API 호출하기 Promise / async&await / fetch / API 1. API 호출 API(Application Programming Interface) 응용 프로그램 프로그래밍 인터페이스 : 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. - 레스토랑 손님 -1주문-> 웨이터(서버) -2찾기-> 냉장고 손님 DATABASE BROWSER(CLIENT) 냉장고(DATABASE) 손님(CLIENT) 2023. 12. 26.
async & await - 직관적인 비동기 처리 코드 작성하기 1. async async : 비동기를 다루는 기능이자 Promise를 더 쉽게 이용할 수 있도록 도와준다. async 키워드 붙은 함수의 return 값은 Promise 객체 resolve 결과값. // async // 일반 함수 function hello() { return "hello"; } // async 비동기 함수 async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); /* - 콘솔 hello Promise{} */ // async 키워드 붙은 함수의 return 값은 Promise 객체 resolve 결과값 helloAsync().then((res) => { con.. 2023. 12. 25.
Promise - 콜백 지옥에서 탈출하기 콜백지옥에서 우리를 구원하다. Promise : 자바스크립트의 비동기를 돕는 객체. 비동기 처리 결과값을 핸들링하는 코드를 비동기 함수로부터 분리할 수 있다. - 비동기 작업이 가질 수 있는 3가지 상태 Pending(대기 상태) : 현재 비동기 작업이 진행중이거나, 작업이 시작할 수도 없는 문제가 발생했음을 의미 Fulfilled(성공) : 비동기 작업이 의도한대로 정상적으로 완료된 상태 Rejected(실패) : 비동기 작업이 실패했음 (사례 : 서버 응답하지 않음, 시간이 오래걸려 자동으로 취소됨) Pending → Fulfilled : resolve(해결) Pending → Rejected : reject(거부) 1. Promise 객체 사용 // 2초뒤 전달 받은 값이 양수인지 음수인지 판단하는.. 2023. 12. 24.
동기 & 비동기 순서대로 실행하는 것과 그렇지 않은 것들 1. 비동기란? - 수행해야 할 작업(함수) 3개 function taskA() { console.log("TASK A"); } function taskB() { console.log("TASK B"); } function taskC() { console.log("TASK C"); } - 작업 실행(함수 호출) 순서 taskA(); taskB(); taskC(); 1) 자바스크립트의 싱글 스레드 작업 수행 방식 : 블로킹 방식 Thread - taskA (0.3초) - taskB (0.5초) - taskC (0.2초) -> * Thread(쓰레드) : 코드를 한 줄 한 줄 실행시키는 일꾼 자바스크립트는 코드가 작성된 순서대로 작업을 처리함. 이전 작업이 진행 중일.. 2023. 12. 23.
Spread 연산자 배열과 객체를 한 줄로 펼치는 방법 1. 객체의 spread // 각각의 객체들에 중복되는 요소 const cookie = { base: "cookie" , madeIn: "korea" }; const chocochipCookie = { base: "cookie" , madeIn: "korea" , toping: "chocochip" }; const blueberryCookie = { base: "cookie" , madeIn: "korea" , toping: "blueberry" }; const strawberryCookie = { base: "cookie" , madeIn: "korea" , toping: "strawberry" }; // spread 연산자 활용하여 객체의 중복되는 요소 펼치기 co.. 2023. 12. 21.
비 구조화 할당 배열과 객체를 우아하게 사용하는 방법 (구조분해할당) 1. 배열의 비 구조화 할당 // 배열의 값 변수에 할당 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); // one two three // 비 구조화 할당을 이용한 배열의 값 변수에 할당 (배열의 기본변수 비 구조화 할당) let arr = ["one", "two", "three"]; let [one, two, three] = arr; console.log(one, two, three); // one two three // 배열의 선언분리 비 구조화 할당 let [one, two, t.. 2023. 12. 20.
조건문 업그레이드 Upgrade If Condition 1. 배열 활용한 조건문 업그레이드 // 주어진 문자열이 한식인지 검사하는 함수 // 논리표현식 사용 function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } // 배열 내장함수 includes 활용 function isKoreanFood(food) { if (["불고기", "떡볶이", "비빔밥"].includes(food)) { return true; } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); con.. 2023. 12. 19.
단락회로 평가 단락회로 평가 : 왼쪽에서 오른쪽으로 연산하게 되는 논리연산자의 연산 순서를 이용하는 문법으로, 뒤에 위치한 피연산자를 확인할 필요 없이 연산을 끝내는 것. (논리연산자의 특성을 이용한 문법) 1. 논리연산자를 이용한 단락회로 평가 console.log(false && true); // 앞에가 false면 뒤에는 볼 필요 없이 평가 종료 console.log(true || false); // 앞에가 true면 뒤에는 볼 필요 없이 평가 종료 console.log(!true); 2. Truthy & Falsy 활용한 단락회로 평가 // 단락회로 평가 사용 전 const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.na.. 2023. 12. 18.
삼항 연산자 조건문 한 줄로 끝내기 1. 삼항연산자 조건식 ? 참 일때 수행할 식 : 거짓일 때 수행할 식 // 양수 음수 판별식 let = 3; // if문 if (a >= 0) { console.log("양수"); } else { console.log("음수"); } // 삼항연산자 a >= 0 ? console.log("양수") : console.log("음수"); // 양수 기존 5줄 코드를 1줄로 줄일 수 있다. // 빈 배열 판별식 let a = []; // if문 if (a.length === 0) { console.log("빈 배열"); } else { console.log("안 빈 배열"); } // 삼항연산자 a.length === 0 ? console.log("빈 배열") : console.log.. 2023. 12. 17.

티스토리툴바