hmk run dev

자바스크립트를 처음 접했을 때, 사실 아직 까지도 가깝지만 먼 이웃 같은 존재인 프로토타입 여러 글들에선 "프로토타입은 자바스크립트에서 상속을 지원하기 위한 방법"라고 이야기하곤 한다. 여기엔 꼬리에 꼬리를 무는 질문이 이어질 수 있는데, "왜 다른 언어처럼 클래스가 아니라 프로토타입을 사용하는가?""프로토타입과 클래스의 차이는 뭘까?" 그 외에도 자바스크립트엔 면접 단골 질문으로도 유명한 this, 호이스팅, 클로저, 스코프체인 등등.. 이 있다.이러한 자바스크립트의 특성들을 단순하게 암기만 하고 있었고, 대부분의 관련 자료들은 해당 현상에 대해서설명하는 내용이 주를 이뤘고 단순히 외워야 하는 고통스러운 시간이었다. "호이스팅은 자바스크립트에서 코드 실행 시 전체 코드를 선언부 상단으로 올려 실행가능한..

마이크로프로세서(CPU) 일단 V8엔진에 대해서 설명하기 전에 우리가 작성한 javscsript 코드가 어떻게 실행되는지 아주 간단하게 훑어보자 컴퓨터의 모든 시스템은 마이크로프로세서(CPU)를 포함하고 있다. 지금 블로그 글을 보고 있는 것도 그 덕분이다. 마이크로프로세서는 전자적인 신호로 동작하는 기계이다. 우리는 마이크로프로세서에게 지시(instruction)를 주고 마이크로프로세서는 job을 수행한다. 여기서 지시란 것은 마이크로프로세서가 해석할 수 있는 언어로 되어있다. 일반적으로 IA-32, x86-64, MIPS 그리고 ARM이 있다. 이러한 언어들은 직접 하드웨어와 소통하며 기계어라고 불린다. 우리가 컴퓨터에 코딩한 고수준 언어들은 컴파일되어 기계어 되어 마이크로프로세서가 실행할 수 있는..

자바스크립트에서 함수 호출 방식인 Call by Value와 Call by Reference에 대해 알아보겠습니다. 먼저, 각각의 개념을 살펴보고, 이것이 리액트에서 상태값을 업데이트 할 때 어떻게 작용할 수 있는지 살펴볼 것입니다. 자바스크립트에서 함수를 호출할때 매개변수를 할당 받을 수 있습니다. 매개변수는 여러개가 될수도있고 단일값일수도있고 객체나 또 다른 함수가 될 수도 있습니다. 매개변수를 전달하는 방식에 따라서 Call by value , Call by reference 로 나눌 수 있습니다. Call by Value (값에 의한 호출) Call by Value는 함수에 인자를 전달할 때, 해당 값의 복사본이 함수로 전달되는 방식을 말합니다. 이는 원시 데이터 타입(숫자, 문자열, 불리언 등)..

가비지 콜렉션이란? 가비지 콜렉션은 자바스크립트 엔진이 자동으로 더 이상 사용되지 않는 메모리를 찾아내고 해제하는 프로세스를 의미합니다. 개발자가 명시적으로 메모리를 해제할 필요가 없어져 코드 작성이 간편해지는 장점이 있습니다. 메모리 관리의 중요성 메모리 관리는 프로그램의 성능과 안정성에 직접적인 영향을 미칩니다. 메모리 누수가 발생하면 시스템이 불안정해지고, 성능이 저하될 수 있습니다. 가비지 콜렉션은 이러한 문제를 해결하여 개발자가 메모리를 효율적으로 사용할 수 있도록 도와줍니다. 가비지 콜렉션의 작동 원리 자바스크립트 엔진은 주기적으로 가비지 콜렉션을 수행합니다. 이때, 더 이상 사용되지 않는 객체를 찾아내고, 해당 객체가 참조하는 메모리를 해제합니다. 이는 프로그램이 실행 중에 동적으로 생성되는..

CommonJS: - 파일 시스템에서 파일을 로드한다. - 파일을 불러오는 동안 주 스레드를 차단한다. - 그렇기에 파일 로드 - 구문 분석 - 인스턴스화 - 평가가 각 파일마다 바로 실행된다. - 그렇기에 모듈 지정자에 변수를 넣을 수 있다. - export 객체에 값을 복사해서 넣는다. - 장점 널리 지원되는 표준: Node.js에서 기본적으로 사용되는 모듈 시스템이기 때문에 Node.js 환경에서는 자연스럽게 사용됩니다. 동기적 로딩: CommonJS는 동기적으로 모듈을 로딩하기 때문에, 런타임에서 모듈이 필요한 시점에 동기적으로 로딩할 수 있습니다. - 단점 1. 파일 시스템에서 파일을 로드한다. 2. 비동기적 로딩의 부재: 브라우저 환경에서는 비동기적으로 모듈을 로딩할 수 있는 ESM과는 달리,..

자바스크립트는 기본적으로 힙(heap)과 스택(stack)을 사용하여 메모리를 관리합니다. 스택(Stack): 스택은 함수 호출과 관련된 데이터를 저장하기 위한 것으로, 각 함수 호출 시에 스택 프레임이 생성되고 함수가 종료되면 해당 스택 프레임이 제거됩니다. 스택은 간단하고 빠르며, 메모리 할당 및 해제가 매우 빠릅니다. 이는 LIFO 구조를 가지고 있어서 새로운 데이터를 추가하거나 제거하는 과정이 간단하기 때문입니다. 힙(Heap): 힙은 동적으로 할당되는 메모리를 위한 것으로, 프로그램 실행 중에 크기가 동적으로 변하는 데이터나 객체 등을 저장합니다. 힙은 자유로운 메모리 관리를 허용하며, 개발자가 직접 메모리를 할당하고 해제해야 합니다. 이는 힙에서 발생하는 메모리 누수를 방지하고, 특정 데이터가..

자바스크립트는 브라우저에서 실행되는 스크립트 언어입니다. 이 언어는 변수, 함수, 객체 등의 요소를 이용하여 동적인 웹페이지를 만들기 위해 사용됩니다. 자바스크립트의 동작 원리와 메모리 관리는 다음과 같습니다. 1. 동작 원리 자바스크립트는 클라이언트 측에서 동작하며, 실행 순서는 다음과 같습니다. 스크립트 파일을 다운로드합니다. 파싱(parsing) 과정에서 코드를 읽어들이고 문법적으로 검사합니다. 실행 엔진(execution engine)이 코드를 실행합니다. 실행 과정에서 발생하는 이벤트를 처리합니다. 실행이 완료되면 메모리에서 삭제됩니다. 2. 메모리 관리 자바스크립트는 가비지 컬렉션(garbage collection)을 이용하여 메모리를 관리합니다. 가비지 컬렉션이란, 사용하지 않는 메모리를 자..

컴파일 언어: 컴파일 언어는 소스 코드를 기계어로 미리 변환하는 과정을 거친 다음, 이를 실행합니다. 이때 변환된 기계어 코드는 실행 속도가 빠르고, 컴파일된 코드는 반복적으로 사용될 수 있어서 실행 속도가 빨라집니다. 대표적인 예시로는 C, C++, Java 등이 있습니다. 인터프리터 언어: 인터프리터 언어는 소스 코드를 실행하는 동안에 한 줄씩 해석하여 실행합니다. 이 때문에 컴파일 언어보다 실행 속도가 느리지만, 컴파일 언어에서 발생하는 컴파일러의 오류 등이 없기 때문에 디버깅이 쉽습니다. 대표적인 예시로는 Python, Ruby, JavaScript 등이 있습니다. 인터프리터 언어와 컴파일 언어는 각각의 장단점이 있습니다. 인터프리터 언어는 실행 시간에 코드를 해석하기 때문에, 즉석에서 코드 수정..

이벤트 루프 이벤트 루프란 JS엔진이 아닌, 구동하는 환경(브라우저, 노드)에서 가지고 있는 장치이다. 콜 스택과 태스크 큐(콜백 큐)를 감시하며, 콜 스택이 비어있는 경우에 태스크 큐에서 태스크(콜백 함수)를 가져와 콜 스택에 넣어 실행시키는 기능을 한다. 태스크 큐 이외에 마이크로 태스크 큐가 있는데 이는 JS의 promise의 동작 방식과 연관이 있다. 이제 이벤트 루프가 2개의 큐를 통해 각각의 태스크들을 어떻게 핸들링하는지 살펴보자! 매크로태스크 큐 & 마이크로태스크 큐 2개의 큐 모두 콜백함수가 들어간다는 점은 동일하다! 둘 다 queue라는 키워드가 들어가 있지만 엄밀히 말하면 우선순위 큐라고 할 수 있는데 이벤트 루프가 2개의 큐에서 태스크를 꺼내는 조건이 제일 오래된 순이기 때문이다! 매..

setTimeout functino hello () { console.log("hellio") }; setTimeout(hello, 1000) - 최소 delay 시간(1초) 후에 콜백 함수를 실행시킨다. setInterval let timer = setInterval(() => console.log("hello"), 1000) // 1초 마다 hello 출력 setTimeout(() => {clearInterval(timer)}, 5000) // 5초 후에 반복호출 종료 - 1초마다 콜백 함수를 반복 호출한다. setInterval 대신 재귀 setTimeout을 써야 하는 이유 let timer = setTimeout(function tick () { console.log('hello'); let t..