매일 한줄 코딩

6. API & fetch open API를 활용한다. ( jsonplaceholder ) api 호출. let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => console.log(res) ); // Promise 리턴이기 때문에, 비동기처리 가능 / then 사용 가능. // fetch는 API의 내용 전체를 리턴함. /* Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false, status: 200, ok: true…} type: "cors" url: "https://jsonplaceholder.typ..

1. async function hello() { return "shipjh Hi~"; } **async** function helloAsync() { return "Hi async"; } console.log(hello()); //shipjh Hi~ console.log(helloAsync()); // Promise {} 반환 async 를 붙인 함수는 Promise를 반환했다. 그렇다면.. then 을 쓸수있다. async function helloAsync() { return "Hi async"; // resolve의 효과 } helloAsync().then((res) => { console.log(res); // Hi async }); 💡async 를 사용한 함수는 Promise 를 반환한다.! ..

4. Promise 1. 콜백지옥2. 비동기 작업이 가지는 상태 3가지3. Promise 사용4. 기존 코드 콜백지옥에서 Promise 이용하여 벗어나기 1. 콜백지옥비동기방식의 콜백이 깊어지는 것 ⇒ 콜백지옥자바스크립트의 비동기를 돕는것 ⇒ Promise 아래처럼 콜백 지옥에 빠질 수 있다.//콜백에 콜백에 콜백... taskA(4, 5, (a_res) => { console.log("A result ", a_res); taskB(a_res, (b_res) => { console.log("B result ", b_res); taskC(b_res, (c_res) => { console.log("C result ", c_res); }); }); }); //... 2. 비동기 작업이 가지는 상태 3가지Pen..

3. 동기 / 비동기 동기와 비동기 코드1. 동기2. 비동기2-1. 비동기 콜백지정JS Engine1. 동기방식에서 Call Stack2. 비동기 방식에서 Call Stack 동기와 비동기 코드자바스크립크는 싱글스레드로 동작한다. (동기 혹은 블로킹방식)동기적 작업을 극복하기위해 비동기(논블로킹방식)방식을 사용한다. 1. 동기function taskA() { console.log("A 작업 끝"); } taskA(); console.log("끝"); //taskA() 가 끝나야 실행. /* A 작업 끝 끝 */ 2. 비동기function taskA() { setTimeout(() => { console.log("A 작업 끝"); }, 2000); // 콜백함수를 이용하여 2초뒤 } taskA(); con..

객체나 배열에 있는 값을 펼쳐준다. const sedanCar = { type: "sedan" }; const bmw = { type: "sedan", madeIn: "germany", name: "bmw 320d" }; const honda = { type: "sedan", madeIn: "japan", name: "CR-V" }; // type이 모두 sedan. 중복된코드... console.log(bmw); // {type: "sedan", madeIn: "germany", name: "bmw 320d"} console.log(honda); // {type: "sedan", madeIn: "japan", name: "CR-V"} spread 를 이용한다면? 객체를 펼쳐주므로 …sedanCar 를 ..