작심삼일

동기적으로 작업을 하면 하나의 task가 오랬동안 시간이 소요되면, 다른 작업들이 진행 못하고 대기하게 된다. 모든 작업들을 동시에 작업하기 위해서는 멀티 스레드로 작업하면 소요 시간을 줄일 수 있지만 자바스크립트에서는 쓰레들가 단일 쓰레드 이다. 그래서 비동기 작업이 필요하다. 동기 방식은 다른 task를 진행하지 못하게 블로킹하고 있기 때문에 비동기 작업을 하면 하나의 작업을 할때 다른 작업을 블로킹 하지 않는다. 1. 동기 방식 지금까지 소스코드를 짜던 방식은 동기 방식으로 작성했었다. 소스 코드 function taskA() { console.log("A 작업 끝"); } taskA(); console.log("코드 끝"); 결과 A 작업 끝 코드 끝 "A 작업 끝"로그가 찍히고 난 뒤에 "코드 ..

1. axios 외부 라이브러리 다운로드 script 태그를 사용해서 아래 링크를 src로 연결합니다. 저는 html 헤더 부분에 아래와 같이 axios 라이브러리를 불러오는 스크립트 태그를 작성했습니다. 소스 코드 다음 스크립트에 log로 axios 객체를 확인해봅시다. 로그로 axios 라이브러리가 제대로 받아졌는지 확인 가능합니다. 소스 코드 console.log(axios); 결과 2. 통신 간단 예제 axios는 promise 객체로 비동기로 실행 가능하다. (비동기 promsie 객체에 포스팅으로 바로 가기) 또한 promise 객체는 then, catch를 사용할 수 있다. then : promise 객체가 성공 한 경우, 실행 catch : promise 객체가 실패 한 경우, 에러 코드 ..

1. 비동기 소스 코드 기본적으로 위에서 부터 순차적으로 진행된다. 하지만, 비동기는 위의 소스코드가 먼저 실행되지 않는다는 것을 보여준다. 콜백 함수에서 사용했던 setTimeout 함수가 비동기 함수이다. (바로가기 : [자바스크립트(Java Script)] 콜백 함수) setTimeout 함수를 보면서 비동기를 이해하도록 하자 소스 코드 setTimeout(function () { console.log("3초 후에 출력됩니다."); }, 3000); console.log("바로 실행됩니다."); 결과 동기로 실행되었다면, "3초 후에 출력됩니다"의 로그가 먼저 작성되고 "바로 실행됩니다." 가 작성될 것이다. 하지만, 위의 결과를 보면 "바로 실행됩니다."가 먼저 실행된 것을 볼 수 있다. 이는 s..