본문 바로가기

JS/Concept3

비동기 처리 in JS (Feat. React suspense) 비동기 프로그래밍 in 자바스크립트 먼저 동기와 비동기의 차이점부터 알아보고 갈 필요가 있다. 아래 그림은 이 둘의 개념의 차이를 그림으로 표현한 예이다. 동기는 어떠한 작업이 끝나고 나서 다음 작업을 시행하는 것이고, 비동기는 어떠한 작업의 종료 유무와는 상관 없이 다른 작업을 수행 할 수 있는 것이 개념적인 동기와 비동기의 차이점이라 할 수 있다. 그렇다면 자바스크립트에서는 이러한 비동기 작업을 어떻게 다루고, 그 과정에서 자바스크립트의 동작 과정을 살펴보자. 기본적으로 자바스크립트는 비동기적으로 동작한다. 이 말을 이해하려면, 자바스크립트의 동작 과정을 알아야한다.자바스크립트는 싱글스레드 언어이다. 이 말의 뜻은 처리할 논리적인 주체가 하나인 것을 의미한다. 그런데 어떻게 자바스크립트는 비동기 작업.. 2022. 5. 24.
Closure Closure makes it possible for a function to have ‘private’ variables. function outer(){ const name = 'kyle'; console.log(name) return function inner(){ const greeting = 'hello!' console.log(greeting,name) } } const getKyle = outer() //kyle getKyle() //hello!kyle 이미 outer가 리턴이 됐음에도 getKyle()을 호출 했을때 outer 의 지역변수인 name에 접근 할 수 있다. 이런 관계에서 inner와 outer가 클로저 관계에 있다라고 할 수 있다. 이러한 클로저의 특성을 이용해서 다양한 유연.. 2021. 12. 27.
this, call, apply, bind const someone = { name: 'park', whoAmI: function(){ console.log(this); }, }; // { name: 'park', whoAmI: [Function: whoAmI] } someone.whoAmI(); const myWhoAmI = someone.whoAmI; // Window Object myWhoAmI(); // bind to someone obj (호출한 곳은 윈도우지만 bind 시켜줘서 someone을 가리키게 해줌) const bindWhoAmI = myWhoAmI.bind(someone); // { name: 'park', whoAmI: [Function: whoAmI] } bindWhoAmI(); 자바스크립트의 this는 타 언어와 다르게.. 2021. 12. 27.