주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

자바스크립트는 단일 스레드입니다. 단일 스레드라는 것은 하나의 스택이라는 뜻으로 동시에 하나의 일만 가능하다는 것을 의미합니다. 하지만, 자바스크립트가 사용되는 환경을 보면 비동기 작업을 통해 여러개를 동시에 처리하고 있는것 같습니다. 멀티 스레드라고 착각할 수도 있을 것 같은데, 어떻게? 이렇게 동작할 수 있는지를 알아보도록 하겠습니다. 자바스크립트 엔진 메모리 힙(Memory Heap)과 콜 스택(Call Stack)으로 이루어져 있습니다. 메모리 힙 구조화되지 않은 넓은 메모리 영역을 말한다. 객체들이 할당된다 프로그램에 선언한 변수, 함수 등 콜 스택 함수 호출은 프레임들의 스택을 형성 먼저 들어온 것이 나중에 나가는 선입 후출 자바스크립트 엔진에는 설명하려는 이벤트 루프가 등장하지 않는데, 이유..

콜 스택(Call stack)과 힙(Heap) 자바스크립트 엔진이 자바스크립트를 실행할 때 원시 타입 및 참조 타입을 저장하는 메모리 구조 콜 스택 : 원시타입 값과 함수 호출의 실행 컨텍스트(Execution Context) 저장 힙 : 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값 저장 동작 원리 이미지 및 코드 출처 : https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/stack-heap.md let a = 10; let b = 35; let arr = []; function func() { const c = a + b; const obj = { d: c }; return obj;..

https://developers.google.com/web/tools/chrome-devtools/ 개발자도구는 마우스 우클릭 > 검사, 단축키 Ctrl+Shift+I 통해 열 수 있습니다. Device Mode 클릭 시 모바일 크기에 따른 화면 확인 가능 사용자 설정도 추가 가능합니다. edit > add custom device... 막대바 마우스 우측 클릭 시 미디어 쿼리 소스 확인 가능합니다. Elements hide element - visibility:hidden과 같습니다. scroll into view - 해당 태그로 스크롤 합니다. DOM Breakpoints - break on한 태그들을 확인 가능합니다. Break on을 설정해두면 자바스크립트 코드가 해당 dom 요소 변화를 줄 때..