Juun의 개발 기록

이 글을 읽기 전 참고하면 좋은 글 https://puenti.tistory.com/82 [JavaScript] 자바스크립트에서 heap, stack, queue란? 1. Heap(힙) Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다. Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼 puenti.tistory.com 이벤트 루프(event loop) 란? 이벤트 루프란 자바스크립트에서 가장 중요한 개념 중 하나 입니다. 자바스크립트는 싱글 스레드 기반의 언어(인터프리터 언어)로서 한 가지 작업 밖에 못하는 언어적 한계를 가지고 있습니다. 그러다보니 자바와 같은 컴파일 언어와 비교하면 컴파일 하는 과정이 없기 때문에 컴파..

1. Heap(힙) Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다. Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼 동적으로 할당되고, 필요하지 않은 메모리는 가비지 컬렉터(garbage collector)에 의해 자동으로 해제가 됩니다. ※ 메모리 생존주기 필요할때 할당 할당된 메모리를 사용 (읽기, 쓰기) 더 이상 필요하지 않으면 해제 2. Stack(스택) Stack은 정적으로 할당되는 메모리 영역으로, 함수 호출 시 함수 내의 변수, 매개변수, 복귀 주소 등의 정보가 저장되는 곳입니다. 함수가 호출될 때마다 스택 프레임(stack frame)이 생성되고, 함수가 종료될 때마다 스택 프레임이 제거됩니다. 이를 스..

비구조화 할당이란? 리액트를 공부하다 보면 비구조화 할당이란 단어가 많이 보입니다. 비구조화 할당(Destructuring assignment)은 객체나 배열에서 데이터를 추출하여 변수나 상수로 개별적으로 할당하는 문법으로, 배열에서도 동일하게 사용할 수 있습니다. 이때 배열에서 비구조화 할당을 사용하는 것을 배열 분해 구조(Array destructuring)라고 부릅니다. 객체에서의 비구조화 할당 객체에서 비구조화 할당을 사용하면 객체의 프로퍼티를 추출하여 변수나 상수로 할당할 수 있습니다. const { 프로퍼티1, 프로퍼티2, ... } = 객체; 예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다. const person = { name: ..

화살표 함수(Arrow function)란 ?? 자바스크립트의 화살표 함수(arrow function)는 함수를 선언하는 다른 방법 중 하나입니다. ES6(2015)에서 소개되었으며, 일반 함수보다 간결하고 가독성이 높으며, this 바인딩에 대한 동작 방식이 다릅니다. 화살표 함수는 다음과 같은 구문으로 선언됩니다. (parameter1, parameter2, ..., parameterN) => { // function body }; 여기서 parameter1, parameter2, ..., parameterN는 함수에 전달할 매개변수이고, {} 안에 있는 function body는 함수가 실행될 때 수행할 코드입니다. 화살표 함수는 다음과 같은 특징을 가집니다. 함수의 매개변수가 하나뿐이면 괄호를 생..

자바스크립트에서 blocking과 non-blocking, 동기와 비동기는 프로그램의 실행과 관련된 중요한 개념입니다. 1. Blocking vs Non-blocking Blocking은 특정 코드의 실행이 완료될 때까지 다음 코드의 실행을 중지시키는 것을 의미합니다. 이러한 코드 실행 방식은 호출된 함수가 작업을 수행할 때까지 스크립트의 실행을 차단(block)시키기 때문에, 다른 작업이나 이벤트를 처리하는 것을 방해할 수 있습니다. Blocking이 발생하는 경우에는 대개 시스템 리소스를 많이 사용하거나 시간이 오래 걸리는 작업을 수행하는 경우입니다. 반면, Non-blocking은 호출된 함수가 작업을 수행하는 동안에도 다음 코드의 실행을 계속할 수 있습니다. 이렇게 하면 스크립트의 실행이 차단되지..

async / await 와 promise란?? 자바스크립트는 대표적인 싱글 스레드 언어입니다. 그래서 비동기 프로그래밍이 굉장히 중요합니다! 이러한 비동기 프로그래밍을 사용하게 되면 더 나은 성능과 사용자 경험을 제공할 수 있습니다. ※ 비동기 프로그래밍 : 특정 작업이 완료될 때까지 코드 실행을 멈추지 않고, 다른 작업을 동시에 수행할 수 있는 방식을 의미 자바스크립트에서 비동기 프로그래밍을 구현하는 대표적인 방법으로 콜백(callback), 프로미스(promise), 비동기 함수(async/await)가 있습니다. 이전 포스팅에 콜백에 대한 설명이 있으므로 짧게 설명하자면 이렇습니다. 콜백은 함수의 인자로 다른 함수를 전달하여, 작업이 완료될 때 해당 함수를 호출하는 방식입니다. 예를 들어, set..

클로저(Closure)란??? 함수 내부에서 외부 스코프에 선언된 변수를 참조하는 것을 클로저(Closure)라고 합니다. 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 클로저는 함수가 선언될 당시의 환경을 기억하고, 함수가 호출될 때 그 환경을 다시 만들어내는 기능을 합니다. 이를 통해 함수 안에서 선언한 변수를 함수 외부에서도 사용할 수 있게 됩니다. 클로저는 자바스크립트에서 매우 중요한 개념으로, 다른 함수에 인자로 함수를 전달하거나, 객체의 메서드로 함수를 정의할 때 클로저를 사용하여 특정한 상태를 유지할 수 있습니다. 클로저를 사용하면 상태를 보존하고, 함수를 더 유연하고 재사용 가능하게 만들 수 있습니다. 또한, 클로저는 자바스크립트에서 비동기 ..

this란?? JavaScript에서 this는 현재 실행 중인 함수 내에서 참조하는 객체를 나타냅니다. this는 호출되는 방법에 따라 달라지며, 함수가 호출되는 방법에 따라 다른 객체가 this를 가리킵니다. this는 자바스크립트의 중요한 개념 중 하나이며, 오해하거나 이해하지 못하면 코드에서 버그를 일으킬 수 있습니다. this 바인딩 함수를 호출하는 방법에는 네 가지가 있습니다. 일반 함수로 호출하는 경우 메소드로 호출하는 경우 apply() 또는 call() 메소드를 사용하여 호출하는 경우 생성자 함수로 객체를 생성하는 경우 이제 각각의 경우를 자세히 살펴보겠습니다. 1. 일반 함수로 호출하는 경우 함수를 일반적인 방법으로 호출하는 경우, this는 전역 객체를 가리킵니다. 브라우저에서는 wi..

call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이 자바스크립트에서는 원시 타입(primitive type)의 값은 call by value(값에 의한 호출)로 전달되고, 객체 타입(object type)은 call by reference(참조에 의한 호출)로 전달됩니다. call by value(값에 의한 호출)은 변수에 저장된 값을 복사해서 전달하는 방식입니다. 예를 들어, 다음과 같이 숫자를 전달하는 경우를 생각해봅시다. ※ 원시타입 : 숫자(number), 문자열(string), 불리언(boolean), null, undefined, 심볼(symbol) - 각각의 원시 타입은 값(value)을 갖고 있으며, 이 값은 변경될 수 없습니다(immu..

var, let, const의 차이를 알기 전에.. 먼저 var, let, const 차이를 알기 전에 스코프에 대해서 알아야 합니다. 스코프란 간단하게 변수를 사용할 수 있는 위치를 의미합니다. 스코프란?? JavaScript에서는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지 유형의 스코프가 있습니다. 전역 스코프는 코드의 어느 곳에서나 접근할 수 있는 변수를 말합니다. 전역 스코프에서 선언된 변수는 어디서든 참조할 수 있습니다. 지역 스코프는 함수 내에서 선언된 변수를 말합니다. 함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다. 또한, 함수 내부에서는 외부 스코프에서 선언된 변수를 참조할 수 있습니다. var, let, const의 차이 자바스크립..