JavaScript/동작원리
-
자바스크립트 - async / await?JavaScript/동작원리 2020. 9. 19. 15:42
aysnc await이란? 콜백 함수나 프로미스처럼 비동기를 다루는 자바스크립트 패턴 중 하나이며 가장 최근에 나온 Es7문법이다. 프로미스랑은 조금 다른 사용법을 가지고 있으며 프로미스를 이용하는 아이라고 생각하면 된다. aysnc 키워드 예제를 통해 async 키워드부터 알아보자. // async 키워드가 없는 일반 함수 function myFunc(){ return 'func'; } // async 키워드가 있는 함수 async function myAsync(){ return 'async'; } console.log(myFunc()); console.log(myAsync()); 출력 화면 출력 결과를 보면 서로 다른 것을 확인할 수 있다. 첫 번째 myFunc() 함수는 생각했던 대로 func가 반..
-
자바스크립트 - PromiseJavaScript/동작원리 2020. 9. 6. 18:54
Promise란? 자바스크립트에서 비동기 동작을 다루는 하나의 패턴이며, 어떤 일의 진행 상태를 나타내는 객체로, 진행 "상태"와 "값"이라는 속성을 가지고 있는 것을 말한다. Promise가 생긴 이유 Promise 생기기 이전에는 비동기 처리를 콜백 함수나 ajax 메소드를 통해서 처리해왔다. jQuery ajax 메소드 비동기 처리 $.ajax("http://a.com/api/book", (result) =>{ console.log(result); }); 위의 예제는 ajax 메소드를 통해 서버에 응답을 보내고 응답이 왔을 때, 콜백 함수를 통해 result로 응답을 받아 처리하는 예제이다. setTimeout() 비동기 함수 setTimeout()은 비동기 동작을 하는 함수를 말한다. functi..
-
자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?JavaScript/동작원리 2020. 7. 21. 15:33
들어가기 전에, 필자는 자바스크립트를 처음 접하고, 오로지 문법적인 것에만 집중해서 공부를 했었다. 하지만 개발할 때 더 중요한 것은 자바스크립트가 어떻게 동작하는지를 먼저 알고 개발을 시작해야 한다는 것이다. 안 그러면 왜 오류가 나는지도 모르고 이유를 모르니 해결할 방법을 찾을 수도 없게 되는 상황을 만나게 될 것이다. (저는 직접 겪었기 때문에...) 제목처럼 자바스크립트가 동기인지 비동기인지 그것을 먼저 알아야만 한다. JavaScript는 동기식 언어이다. 자바스크립트는 한 번에 하나의 작업을 수행한다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다. 마치 음식점에 여러 사람들과 갔을 때, 키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다. 이..
-
자바스크립트 - fetch란?JavaScript/동작원리 2020. 7. 12. 01:18
Fetch의 탄생 배경 fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다. 또, 익스플로러랑 기타 브라우저가 맞춰져 있지 않다 보니 커먼 라이브러리로 만들어 쓰거나 손쉽게 만들어져 있는 제이쿼리(jQuery)를 이용해왔다. 예를 들면, jQuery의 ajax() 메소드와 같은 것들을 사용해 단지 AJAX 구현만을 목적으로 사용해왔다. $.ajax({ url: "", type: "", cache: , dataType: "", data: "", success: function(data){ }, error: function (request, status, error){ } }); 여기서 AJAX란? JavaScript의 라이브러리 중 하나이며, Asynchronous Javascr..
-
자바스크립트 - 동작 원리JavaScript/동작원리 2020. 7. 5. 20:23
자바스크립트는 싱글 스레드 프로그래밍 언어이다. 싱글 스레드 런타임을 가지고 있다는 의미이다. 이것은 결국 한 번에 하나의 싱글 콜 스택(Call Stack)만을 가지고 있다는 말을 뜻한다. 여기서 싱글 스레드란? 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것을 말한다. 그렇다면 자바스크립트는 어떻게 작동할까? Call Stack 그림을 보면서 이해해보자. Call Stack은 Data Structure(자료 구조)로 작성한 코드가 실행되는 순서를 기억하고 있다. 함수를 실행하려면 Stack(스택)에 해당하는 함수를 집어넣게 되고, 함수에서 리턴이 일어나면, 스택의 가장 위쪽에서 해당 함수를 꺼내게 된다.(LIFO) 이것이 Call Stack이 하는 일의 전부이다. 이 코드를 실행하면 실행..