본문 바로가기

FE/JavaScript18

[JavaScript] 이벤트 루프 이벤트 루프 # 자바스크립트는 싱글 스레드 언어 자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 작업을 할 수 있다. 어떻게 가능한 것일까? 이를 이해하기 위해서는 자바스크립트가 웹 브라우저 내에서 동작한다는 사실을 알아야 한다. 웹 브라우저 내에 있는 기능들이 자바스크립트를 도와주어 비동기 작업을 처리할 수 있게 해준다. # 웹 브라우저 내부 자바스크립트 밖에 Web API가 존재한다. 즉, Web API란 브라우저가 제공하는 비동기 API이다. 자바스크립트는 이렇게 외부의 도움을 통해 비동기 작업을 처리할 수 있다. 콜스택에서 비동기 코드를 만나면 해당 코드는 Web API 영역으로 빠진다. 그리고 그 비동기 작업은 이후 queue라는 곳으로 이동하여 대기하다.. 2023. 2. 21.
[JavaScript] 실행 컨텍스트 실행 컨텍스트 # 실행 컨텍스트 (excution context) 실행 컨텍스트란, 자바스크립트에서 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 여기서 환경이란, 코드 실행에 영향을 주는 조건, 상태를 의미한다. 실행 컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단으로서, 이를 이해하면 자바스크립트의 주요 개념인 스코프, 클로저, 호이스팅 등을 이해할 수 있다. 자바스크립트 코드를 실행시키면, 자바스크립트 엔진은 콜스택이라는 공간에 실행 컨텍스트를 생성한다. 전역 범위에 해당하는 실행 컨텍스트를 생성하고 난 뒤, 그 속에 있는 함수A, 함수B, ... 들의 실행 컨텍스트도 생성한다. 이렇게 생성된 실행 컨텍스트는 위에서부터 차례대로 실행된다. 실행을 마친 실행 컨텍스트는 사라진다. 각 실.. 2023. 1. 3.
[JavaScript] 자바스크립트의 비동기 처리 자바스크립트의 비동기 처리 callback, Promise, async/await # 동기, 비동기란? 동기(synchronous)란 동시에 일어나는 것, 비동기(Asynchronous) 동시에 일어나지 않는 것이라는 의미이다. 동기와 비동기란 일을 처리하는 순서라고 해석할 수 있다. 예를 들어, 청소를 한다고 치자. 세탁기와 청소기를 돌려야 한다. 어떻게 해야 하는가? 세탁기 작동 버튼을 눌러놓고 세탁이 끝날 때까지 기다렸다가 청소기를 돌려야 하는가? 그건... 너무 비효율적이지 않은가?🤔 세탁기 작동 버튼을 눌러 놓고 세탁기가 돌아가는 동안 청소기를 돌리면 된다. 세탁기와 청소기는 각자 돌아가니까! 여기서 동기, 비동기 개념이 나온다. 하나가 끝나야 그 다음 일을 하는 것을 동기적 처리라고 한다. 세.. 2022. 12. 5.
[JavaScript] 이벤트 이벤트 # 이벤트 등록 click! const div = document.querySelector('div'); div.addEventListener('click', handleClick); const handleClick = (event) => { console.log(event); }; 화면에 동적인 기능을 추가하기 위해 addEventListener()로 이벤트를 등록할 수 있다. 사용자는 이를 통해 웹 페이지와 상호작용한다. 그렇다면 브라우저는 이벤트를 어떻게 감지할까? 브라우저가 이벤트를 감지하는 방법에는 두 가지가 있다. # 이벤트 감지 1. 이벤트 버블링 특정 요소에서 이벤트가 발생했을 때, 해당 요소의 상위 요소로 이벤트가 전파되는 것이다. 클릭 const divs = document.qu.. 2022. 11. 5.
[JavaScript] for, forEach, map 차이 for, forEach, map 차이 1. for 조건에 부합하면 계속해서 순회한다. 중간에 break를 만나면 중단한다. const arr = [0, 1, 2, 3]; for (let i = 0; i 2) break; else console.log(arr[i]); } // 출력 결과 // 0 // 1 // 2 2. forEach 배열의 각 요소에 대해 callback 함수를 실행한다. break를 사용할 수 없다. const arr = [0, 1,.. 2022. 11. 2.
[JavaScript] 메모리와 값의 복사 메모리와 값의 복사 # 원시 값과 객체가 메모리에 저장되는 방식 자바스크립트의 데이터 타입은 크게 원시 값과 객체로 구분할 수 있다. 원시 값은 메모리에 저장될 때 원시 값의 실제 값이 저장되고, 객체는 메모리에 저장될 때 객체의 참조 값(= 메모리의 주소)이 저장된다. 1. 원시 값이 메모리에 저장되는 과정 let age; age = 20; age = 21; age라는 변수에 원시 값인 숫자를 할당하는 과정이다. age는 let으로 선언되고 나서 가장 처음으로 undefined가 할당된다. 그리고 20이라는 값이 할당되면, 새로운 메모리 공간에 20이라는 저장되고, age는 참조하던 메모리 공간 주소를 변경한다. 즉, 원래의 메모리 공간의 값이 바뀌는 것이 아니라, 20이라는 새로운 메모리 공간이 생기.. 2022. 10. 27.

티스토리툴바