Javascript36 [javascript] async & await 신발이 당첨되고 싶었는데 앱 포인트가 당첨됐다. 느슨해진 일상 속에 긴장감을 준... async await promise를 좀 더 간결하고 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 기능이다. 기존에 promise.then.then.then..... 이렇게 계속 체이닝을 하는 것보다 api로 좀 더 간결하게 async await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 작성할 수 있게 도와준다. 예제 1. 먼저 간단한 기능적인 예시로 이름을 가져오는 함수가 있다고 가정하고 기존에 Promise 작업하는 것과 동일하게 작업을 하면 이렇게 나온다. function fetchUser() { return new Promise((resolve, reject)=>{ resolve('DuHye.. 2023. 1. 16. [javascript] Promise 개강까지 D-11 callback 지옥을 탈출하기엔 Promise만한게 없다고 많이 들었고 잘 사용하면 굉장히 편리하다고 들었다. 먼저 벨로퍼트님의 강의를 들어봤지만 아직은 잘 이해가 안간다. 어떤 상황에서 사용을 해야하는지도 감이 안잡힌다... 일단 강의 내용을 토대로 정리를 해봤다. promise란? 비동기 작동을 좀 더 편하게 작업할 수 있도록 es6에 추가된 기능이다. 이전에는 "A작업이 끝나고 B작업이 실행되야한다"를 callback 함수로 처리했는데 callback으로 처리하게 될 경우 비동기 작업이 많아진다면 코드가 난잡해지게 된다. (callback 지옥) 먼저 Promise 사용하지 않은 예제를 만들어보겠다. 숫자 n을 파라미터로 받고 5번에 걸쳐서 1초마다 1씩 더해보기 setTimeo.. 2023. 1. 16. [javascript] 비동기 처리 바닐라 js...? react...? 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되어버려서 다른 작업을 할 수 없다. 다음 작업을 하려면 현재 작업이 끝난 후에 작업이 가능하다. 하지만 이러한 작업들을 비동기 처리로 하게 되면 동시에 여러 가지를 할 수 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 연산량이 많은 예제를 만들어보자 function work() { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); }, 0); } console.log('작업 시작!'.. 2023. 1. 16. [javascript] rest 펼친 걸 모아보자.. rest spread와 비슷하게 생긴...으로 시작한다. 하지만 기능은 조금 다르다. 객체에서의 rest const purpleCuteSlime = { name: "슬라임", attribute: "cute", color: "purple" }; const { color, ...cuteSlime } = purpleCuteSlime; console.log(color); console.log(cuteSlime); // purple // {name: "슬라임", attribute: "cute"} // attribute까지 없애고 싶다면? const { attribute, ...slime } = cuteSlime; console.log(slime); //{name: "슬라임"} 위 예제 코드를.. 2023. 1. 16. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
