전체글149 async & await async & await async & await은 promise보다 더 간결하고 간편한 그리고 동기적으로 실행한 것처럼 보이게 만들 수 있습니다. async & await은 새로운 API가 아니라 기존에 존재하는 promise위에 좀 더 간편한 API를 제공합니다. 이렇게 기존에 존재하는 것 위에 또는 감싸서 우리가 좀 더 간편하게 쓸 수 있도록 제공하는 것을 sysntactic sugar(문법적 설탕) 라고 합니다. async 아래 예시 코드를 봅니다. async function fetchUser() { // do network request in 10 secs.. return 'minsu'; } const user = fetchUser(); user.then(console.log); console... 2020. 10. 22. Promise Promise Promise는 자바스크립트에서 비동기를 간편하게 처리해줄 수는 있는 오브젝트입니다. (콜백함수 대신에 유용하게 사용할 수 있습니다.) Promise는 기능이 정상적으로 수행이 된다면 성공의 메시지로 처리된 결과값을 전달해주고, 만약 기능을 수행하다 예상치 못한 문제가 발생한다면 에러를 전달해줍니다. 염두에 둘 것. State: pending 상태 -> fulfilled or rejected Producer: 데이터를 만들어내는 프로듀서 Consumer: 데이터를 소비하는 컨슈머 pending: promise가 만들어져서 우리가 지정한 연산이 수행중일 때 fulfilled: 연산 수행이 완전히 끝날 때 rejected: 문제가 발생시 **만약 헤비한 코드를 수행하는데 동기적으로 처리하면 파.. 2020. 10. 22. 동기 & 비동기 동기 & 비동기 동기 자바스크립트는 동기적으로 동작합니다. 즉, hoisting이 된 이후부터 코드가 나타나는 순서대로 자동적으로 실행이 됩니다. hoisting: var, function의 선언들이 자동적으로 제일 위로 올라가는 것 console.log('1'); console.log('2'); console.log('3'); 예를 들면 위의 코드 정해진 순서대로 실행되는 것을 바로 동기(synchronous)라고 합니다. 비동기 반대로 비동기(asynchronous)는 언제 코드가 실행되는지 예측할 수 없는 것을 말합니다. 콜백함수: 전달해준 함수를 나중에 호출한다는 개념 예시로 아래 코드가 있습니다. console.log('1'); setTimeout(function() { console.log('.. 2020. 10. 22. JavaScript에서 Getter와 Setter Getter, Setter 예를 한번 들어보죠. 이 예시는 역시 유튜버 엘리님의 강연에서 나온 얘기입니다 ㅎㅎ 커피 자판기가 있습니다. 이를 클래스로 지정해줍니다 class coffeeMachine { } 다음에는 커핀 자판기에는 커피의 개수가 있습니다. class coffeeMachine { int numberOfCoffee; } 그 다음에는 메소드를 만듭니다. 동전을 넣고, 커피를 만들죠. class coffeeMachine { int numberOfCoffee; putCoins() {} makeCoffee() {} } 그러면 이 numberOfCoffee가 마이너스 값이 올 수가 없겠죠. 사용자가 마이너스 값이 넣을 수 없도록 getter와 setter를 사용합니다. 사용자가 실제로 마이너스값을 넣.. 2020. 10. 21. 자바스크립트 기본2 let vs var let es6에 추가되었습니다. 변하는 값을 선언하기 위해 let을 사용합니다. var를 사용하면 안되는 이유 let 이전에는 var를 사용했습니다. 선언도 하기전에 값을 할당할 수 있고, 할당하기도 전에 값을 출력할 수 있는 이상한 코드가 가능해집니다. var로 선언하게 되면 block scope이 철저히 무시됩니다. block scope: {} 이는 코드의 가독성이나 재사용하기에도 어렵겠죠. 나중에는 선언되지 않은 것들이 막 할당되는 경우도 생깁니다. console.log(name); name = 'minsu'; var name; 이게 가능해집니다. (...) 만약 var대신 let을 사용한다면 에러 코드가 뜹니다. 이게 정상이죠ㅎㅎ hoisting 위에서 var같이 사용한 형태를.. 2020. 10. 21. async & defer asyn & defer 코드는 위에서 아래로 한줄씩 읽어나갑니다. 위에서 은 자바스크립트를 로드하는 법인데요. script가 제일 끝부분에다가 스크립트를 넣는 것이죠. 이렇게 되면 부분이 먼저 화면에 표출되고 그 다음에 스크립트를 다운받고 실행합니다. 하지만 이 역시 단점이 있습니다. 자바스크립트에 의존적인 웹사이트라면 치명적입니다. 다음으로는 속성값에 async를 사용하는 것입니다. async를 사용하게 되면 를 출력하면서 동시에 스크립트를 다운받습니다. 다운이 다 되면 html 파싱을 멈추고 스크립트를 실행합니다. 다 실행되고 나면 나머지 html을 파싱합니다. 이 역시 단점이 있습니다. 사용자가 페이지를 보는데 여전히 길어질 수 있습니다. 만약 스크립트가 a, b, c가 있다면 async는 다운로드.. 2020. 10. 21. 이전 1 ··· 17 18 19 20 21 22 23 ··· 25 다음
