JavaScript와 같은 언어에서는 프로그래밍을 하면서 종종 중요한 개념들인 TDZ(Temporal Dead Zone)와 가비지 컬렉터(Garbage Collector)가 등장합니다. 이 두 가지는 각각 다른 목적을 가지고 있지만, 메모리 관리와 관련된 공통적인 특성을 공유하기 때문에 이 둘에 대해 잘 이해하는 것이 중요합니다. 이번 블로그 포스팅에서는 TDZ와 가비지 컬렉터가 무엇인지, 그 각각의 개념을 상세히 설명하고, 이들 간의 관계를 이해하는 데 도움을 줄 수 있도록 자세히 다뤄보겠습니다.1. TDZ(Temporal Dead Zone):1.1. TDZ의 정의TDZ(Temporal Dead Zone)는 JavaScript에서 변수의 선언과 초기화 사이의 구간을 의미합니다. let, const, c..
1. State란 무엇인가?state는 컴포넌트 내부에서 관리되는 동적 데이터입니다. 사용자가 애플리케이션과 상호작용할 때 데이터가 변경될 수 있으며, 이 변화는 React에 의해 자동으로 UI에 반영됩니다.React의 useState 훅을 사용하여 상태를 정의하고 업데이트합니다. 특징 • 내부 데이터: state는 컴포넌트 내부에서 선언되고 관리되며, 다른 컴포넌트가 직접 접근할 수 없습니다. • 변경 가능: state는 React의 상태 관리 메서드를 통해 변경할 수 있습니다. • UI 업데이트 트리거: 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 리렌더링됩니다. 코드 예제: Counter 컴포넌트import React, { useState } from "react";function Counter..
CSS-in-JS 라이브러리 중 하나인 Emotion은 빠르고 유연하며 강력한 스타일링 솔루션을 제공합니다. React와 같은 JavaScript 기반 프레임워크에서 CSS를 더욱 효율적으로 관리할 수 있도록 설계되었으며, 개발자 경험을 극대화하는 도구로 널리 사랑받고 있습니다. Emotion CSS란?Emotion은 JavaScript를 사용하여 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. 기존의 CSS 파일 관리의 복잡함을 줄이고, 컴포넌트 기반 스타일링을 통해 코드 재사용성과 유지보수성을 높이는 데 초점이 맞춰져 있습니다.주요 특징 1. CSS-in-JS: JavaScript 파일 내에서 CSS를 작성할 수 있습니다. 2. 스타일 컴포넌트 생성: CSS 클래스 이름 충돌을 ..
useStateuseState란?useState는 React에서 함수 컴포넌트 내부에서 상태(state)를 관리하기 위해 사용하는 Hook입니다. 이전에는 클래스 컴포넌트에서만 상태를 관리할 수 있었지만, Hook이 도입되면서 함수 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 사용법useState는 초기 상태를 인수로 받아들이며, 현재 상태 값과 상태를 업데이트할 수 있는 함수를 배열로 반환합니다.const [state, setState] = useState(initialValue); • state: 현재 상태 값. • setState: 상태를 업데이트하는 함수. 코드 예제import React, { useState } from "react";function Counter() { const [c..
바닐라 익스트렉트(Vanilla Extract) 소개바닐라 익스트렉트(Vanilla Extract)는 CSS를 JavaScript처럼 사용할 수 있는 CSS-in-JS 라이브러리입니다. 기존 CSS 작성 방식의 단점을 보완하고 JavaScript의 장점을 활용해 스타일링을 더욱 체계적이고 효율적으로 관리할 수 있도록 돕습니다. 이 라이브러리는 스프링클(Sprinkles), 디파인드 프러퍼티(DefineProperties) 등의 함수를 통해 스타일 속성을 선언하고 재사용할 수 있는 기능을 제공합니다. 이를 통해 CSS 클래스 이름 충돌, 코드 중복, 관리 어려움 같은 문제를 해결하며, 더 나아가 타입 안정성과 제로 런타임(zero runtime)이라는 강력한 특징을 제공합니다. 바닐라 익스트렉트의 장점 1..
브라우저에서 페이지를 렌더링하는 방식렌더러 프로세스(Renderer Process)렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다.렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다.웹 페이지를 효율적이고 부드럽게 렌더링하기 위해 별도의 컴포지터 스레드와 레스터 스레드가 렌더러 프로세스에서 실행된다.렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹페이지로 만드는 것이다.스레드 종류메인 스레드 (Main Thread) : 웹 페이지를 실행하는 기본적인 스레드. 모든 UI 업데이트와 사용자 입력 처리, DOM 변경, JS 실행 등 기본 작업 실행 한다.워커 스레드 (Web Workers) : 메인 스레드와는 별개로 ..
실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 평가되고 실행되는 환경을 의미한다.자바스크립트 엔진은 코드 실행에 필요한 모든 정보를 실행 컨텍스트에 저장한다. 이는 변수, 함수, 선언, this의 값 등을 포함한다. 왜냐하면 실행 컨텍스트는 코드가 실행될 때 필요한 환경 정보를 제공하며, 이는 코드의 실행 흐름을 관리하는데 필수적이기 때문이다. 실행 컨텍스트는 전역 실행 컨텍스트와 함수 실행 컨텍스트로 구분된다. 전역 실행 컨텍스트는 코드가 실행되기 시작할 때 생성되며, 함수 실행 컨텍스트는 함수가 호출될 때 마다 생성된다. 이는 자바스크립트의 스코프와 호이스팅 개념을 이해하는 데 중요한 기반이 된다. 실행 컨텍스트는 콜 스택에 쌓이게 되며, 자바스크립트 엔진은 콜 스택의 최상단에 있는 실행 컨텍스..
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다. Ajax는 전통적인 방식과 비교했을 때 다음과 같은 장점이 있다. 1...
객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려졈 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { // 프로퍼티 : 객체 고유의 상태 데이터 radius: 5, // 메서드 : 상태 데이터를 참조하고 조작하는 동작 getDiameter(){ // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메..
고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다.자바스크립트의 함수는 일급 객체 이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 언제든지 변경 가능하여 오류 발생의 근본적 원인이 될 수 있기 때문에 결국 순수 함수를 통해 부수 효과를 최대한 억제하는 것이 중요하다. Array.prototype.sortsort 메서드는 배열의 요소를 정렬한다. 원..
