본문 바로가기

JavaScript7

빙글빙글 이벤트 루프 🏃‍♀️➰ 목차 - Process & Thread - MultiTreading - Javascript 엔진? - Javascript 실행 환경 ( Javascipt와 Web APIs가 어떻게 함께 협업할까?) - 이벤트 루프 예시로 개념 정리 - 렉 걸리게 하기. - Task Queue VS Microtask Queue # Process와 Thread의 차이 Process Process란 '운영체제 위에서 연속적으로 실행되는 프로그램'입니다. 핸드폰에서 어플리케이션을 실행하다가 갑자기 하나의 앱이 강제로 종료된 적이 있으신가요? 그것이 프로세스가 죽었다라고 말합니다. 각 프로세스는 메모리에서 실행되고 있는 프로그램입니다. 프로세스 안에는 프로그램을 위한 code, 함수에 대한 정보가 저장된 stack, 데이터가 저.. 2021. 8. 14.
동기 & 비동기(Promise, async/await) 제 머릿속은 짬뽕이었습니다.. 콜백, 동기, 비동기, async, await, Promis, 콜백지옥, 화살표함수, 와갸갸갸갸갹!! 하지만 오늘부로 이 꼬여버린 친구들을 가지런한 짬뽕 면들로 분리하겠습니다.. 더이상은 지긋지긋해요. 혹시나 다시 뒤죽박죽 꼬여버리는 것을 대비하여 복습 차원으로 볼 것이기에 오늘 배운 내용을 토대로 정말 간단하게 핵심만 다루도록 할 것입니다. 개념에 대해 처음 보시는 분들에게는 내용이 부족할 수 있습니다. 하지만 저처럼 생각의 정리가 필요하신 분들에게 조금이나마 도움이 되었으면 좋겠습니다. :) 목차 1. 동기 & 비동기 2. 콜백함수 3. Promise 4. async/await 동기 & 비동기 동기 현재 실행 중인 task가 종료할 때까지, 다음 task가 대기 장점: .. 2021. 8. 12.
this this? 공부를 하면서도 뭔가 애매한 개념 this. 그래서 핵심부터 말하고 더 자세하게 설명하도록 하겠습니다. this의 값은 함수를 호출할 때(호출하는 방법에 의해) 결정되는 것이고, 호출한 객체가 바로 this이다. 그리고 예외적으로 this를 호출과 무관하게 묶어줄 수 있는(고정시킬 수 있는)함수가 bind이다.(ES5) 자바스크립트에서 this는 샐행 컨텍스트가 생성 될 때 호출되고, 실행 컨텍스트는 함수를 호출할 때 생성됩니다. 그럼 this는 함수가 호출될 때 결정되는 것이라 할 수 있습니다. 이제는 자세하게 this가 어디서 어떻게 호출되는지 아는 것이 중요합니다. 다양한 상황에 따라 this가 어떤 것을 바라보게 되는지 알아보겠습니다. 상황에 따라 달라지는 this 전역 공간에서 thi.. 2021. 6. 24.
실행 컨텍스트 실행 컨텍스트 실행 컨텍스는 자바스크립트에서 가장 중요한 핵심 개념으로, 자바스크립트의 동적 언어로서의 성격을 잘 파악할 수 있는 개념입니다. 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아둔 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 -> 이를 콜 스택에 쌓아 올렸다가 -> 가장 위에 쌓여있는 컨텍스트롸 솬련있는 코드들을 실행합니다. (여기서 동일한 환경은 하나의 실행 컨텍스트를 구성할 수 있는 방법으로, 함수를 실행하는 것) 위의 이미지와 함께 보면서 스택 구조를 생각해보면, 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간(4번째 컵), 즉 어떤 실행 컨텍스트가 활성화 되는 순간에 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 .. 2021. 6. 21.
호이스팅 자바스크립트를 사용할 때 var를 쓰면 안되고 let과 const를 써야한다는 말을 많이 들었습니다. 왜냐하면 var는 호이스팅이 가능하기 때문에 혹시 실수로 같은 식별자로 선언을 2번했을 경우 찾기 어려운 오류를 만들 수 있기 때문이죠. 그런데 이번에는 var를 넘어서 Hoisting이 왜 일어나는지에 대해 더 자세히 알아보고 더 중요한 함수의 호이스팅에 대해서도 다뤄보겠습니다! environmentRecord와 hoisting 자바스크립트가 실행 될 때 environmentRecord라는 것이 있는데 environmentRecord에서 호이스팅이라는 개념으로 식별자 정보들을 저장합니다. environmentRecord는 실행 컨텍스트를 다루며 더 자세하게 알아보겠습니다. 즉, '자바스크립트 엔진은 코.. 2021. 6. 19.
불변 객체 | 얕은 복사 & 깊은 복사 가변성을 가진 참조형 데이트의 '가변'은 데이터 자체가 아니라 내부 프로퍼티를 변경할 때만 성립하고, 데이터 자체를 변경하고자 한다면 (기본형 데이터와 마찬가지로) 기존 데이터가 변하지는 않습니다. 내부 프로퍼티를 변경 할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당 하기로 규칙을 정하거나 immutable.js, immer.js 등의 라이브러리를 사용한다면 객체도 불변성을 확보할 수 있습니다. 객체가 불변성을 확보해야하는 경우는 언제일까요? 값으로 전달받은 객체에 변경을 하더라도 원본 객체는 변하면 안되는 경우입니다. 예를 들어 정보가 바뀐 시점에서 알림을 보내거나, 바뀌기 전의 정보와 바뀐 후의 정보를 가시적으로 보여줘야 하는 등의 기능을 구현해야 하는 경우가 있습니다. 이럴 경우레는 변경 .. 2021. 6. 18.
기본형 데이터 & 참조형 데이터 기본형 데이터(숫자, 문자열, 불리언, null, undefiend ...)와 참조형 데이터(object - array, function, date, 정규표현식 ...)을 설명할 때 일반적으로 기본형 데이터는 할당이나 연산 시 복제가 되고, 참조형 데이터는 참조가 된다고 알려져 있습니다. 결론을 미리 말하자면 사실 기본형 데이터와 참조형 데이터 모두 복제를 합니다. 다만 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 감긴 주솟값으로 이루어진 묶음을 가리키는 주소값을 복제합니다. 복제에 대한 예시를 공부하기 전에 불변값과 가변값에 대한 개념을 먼저 알아보겠습니다. 불변 값 먼저 기본형 데이터는 모두 불변값입니다. var a = 6; var b = 6; a = 7; 이 경우 컴퓨터 내에서는 .. 2021. 6. 17.

티스토리툴바