dev.daisy

[JavaScript] this 바인딩

JavaScript에서 this는 함수가 호출되는 방식에 따라 동적으로 결정되는 실행 컨텍스트의 참조 객체입니다.즉, 함수가 어디서 정의되었는지가 아니라 어떻게 호출되었는지에 따라 값이 달라집니다.전역에서는 전역 객체(window / global)객체의 메서드 호출 시에는 그 객체생성자 호출 시에는 새로 만들어진 인스턴스화살표 함수에서는 상위 스코프의 this이처럼 상황마다 값이 바뀌는 것이 JavaScript this의 가장 큰 특징입니다.특징JavaScript의 this는 함수 또는 메서드 내에서 동작하며, 호출되는 방식에 따라 그 값이 결정되는 특성을 가집니다.this의 값은 함수가 호출되는 시점에 결정되며, JavaScript는 함수와 메서드의 구분이 느슨하여 동일한 함수라도 호출 방식에 따라 t..

[Next.js] App Router에서 조건부 UI 숨김 시 발생한 hydration 오류

Next.js의 App Router 기반 프로젝트인 TUNING 서비스를 구현하면서 예상치 못한 hydration error를 마주했다. UI 조건부 컴포넌트 숨김 처리를 진행하기 위해 처음에는 단순히 usePathname() 기반으로 페이지에 따라 처리를 진행했지만, 이 과정에서 클라이언트 사이드 렌더링과 서버 사이드 렌더링 사이의 불일치를 일으켜 트러블슈팅을 진행하게 되었다.이 글에서는 hydration error가 무엇인지, 왜 발생했는지, 그리고 그걸 어떻게 해결했는지를 내가 경험한 흐름대로 정리해보려고 한다.💥 hydration error란? React 기반 프레임워크(Next.js)에서는 서버에서 HTML을 먼저 렌더링해서 보내주고, 클라이언트에서 해당 HTML에 JavaScript 이벤트를..

[JavaScript] V8 엔진과 GC (Garbage Collection)

정의JavaScript V8 엔진의 Garbage Collection은 더 이상 사용되지 않는 메모리를 자동으로 해제하여 메모리 누수를 방지하는 메모리 관리 기법입니다.V8은 기본적으로 Mark-and-Sweep 알고리즘을 기반으로 하며, Generational GC(세대별 가설) 전략을 적용해 메모리를 New space(Young Generation)과 Old space로 나누어 각각 다른 GC 방식을 사용합니다.특징V8 GC의 특징을 크게 네 가지 관점에서 정리해봤습니다.1. 메모리 공간 분할 전략New space (1~8MB): 새로 생성된 객체가 들어가는 공간Old space: 여러 번 GC에서 살아남은 “장수 객체”가 머무는 공간Large object space: 일반 공간에 담기 힘든 큰 객..

자바스크립트를 공부하다 보면 빠지지 않고 등장하는 키워드가 바로 실행 컨텍스트(Execution Context) 와 호이스팅(Hoisting) 입니다. 자바스크립트 코드가 실행되는 원리를 이해하는 데 핵심적인 개념이기 때문에 자세히 공부해보고 싶어 글을 정리하게 되었습니다. 실행 컨텍스트와 호이스팅이란?실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행되는 환경 정보의 집합으로, 스코프, 변수, 함수 선언, this, 외부 참조 등이 포함됩니다. 코드가 실행되면 JS 엔진은 실행 컨텍스트를 생성하고, 이를 스택 구조(Call Stack) 로 관리합니다. 호이스팅(Hoisting)은 실행 컨텍스트 생성 단계에서 변수와 함수 선언이 먼저 메모리에 등록되기 때문에, 코드 상에서 마치 선..

API (Application Programming Interface)API는 애플리케이션과 애플리케이션 간에 소통할 수 있도록 정해둔 인터페이스(규칙)를 의미합니다.쉽게 말해 “서로 다른 프로그램이 대화하는 언어”입니다.특징재사용성: 기능을 모듈화하여 다른 프로그램에서 호출 가능표준화: 일관된 규칙(메서드, 응답 형식 등)을 따라 통신추상화: 내부 동작을 몰라도 제공된 규칙대로만 사용하면 됨ex) “카카오 로그인 API”를 쓰면, 직접 카카오 서버 로직을 구현하지 않아도 로그인 기능을 바로 가져다 쓸 수 있습니다.API GatewayAPI Gateway는 클라이언트와 여러 개의 백엔드 서비스(API) 사이에서 중앙 게이트 역할을 하는 서버입니다. 주요 역할요청 라우팅: 어떤 서비스로 요청을 보낼지 결정..

클라이언트 - 서버클라이언트–서버 구조는 네트워크에서 요청을 보내는 주체(클라이언트)와 요청을 처리하는 주체(서버)가 역할을 나누어 통신하는 모델입니다. 클라이언트는 브라우저, 앱처럼 사용자가 직접 사용하는 프로그램이고, 서버는 데이터 저장 · 처리 · 응답을 담당하는 시스템입니다. 이 구조 덕분에 클라이언트는 UI와 사용자 입력에 집중하고, 서버는 데이터와 비즈니스 로직에 집중할 수 있습니다. OSI 7계층OSI 7계층은 네트워크 통신 과정을 7단계로 나눈 모델입니다.이렇게 나누면 문제 발생 시 특정 계층만 점검 후 수정할 수 있어 유지보수가 용이합니다.물리 계층 (Physical Layer)전기적 신호를 주고받는 물리 장비로 데이터의 내용은 관여하지 않고, 단순히 신호 전송만 담당합니다.전송 단위: ..

클로저란?클로저는 함수가 실행될 때의 렉시컬 스코프(Lexical Scope)를 기억해, 해당 함수의 실행 컨텍스트가 종료된 이후에도 외부 변수에 접근할 수 있는 현상을 의미합니다. 함수는 자신이 선언된 시점의 스코프를 기억하기 때문에, 함수 외부에 있는 변수를 내부에서 계속 참조하고 사용할 수 있습니다. 실무에서는 주로 상태를 은닉하거나 캡슐화하고, 콜백 내부에서 상태를 유지할 때 활용됩니다. 하지만 상태를 계속 유지하는 특성으로 메모리 누수(memory loak)를 주의해야 한다는 단점이 있습니다. 클로저가 메모리 누수를 만드는 상황은?클로저 자체가 누수를 만드는건 아니지만, 불필요하게 큰 데이터를 참조한 채로 오래 살아있을 때 GC가 수거하지 못해 누수가 발생할 수 있습니다. 자바스크립트의 GC는 ..

기존에는 유튜브로 FEConf 영상을 찾아보며 간접적으로 접했는데,이번에 직접 현장에서 참여하면서 좋은 인사이트를 많이 얻게 되어 경험을 기록하고자 후기를 작성해보려고 합니다 :) 이번 컨퍼런스의 세션은 아래와 같이 다양하게 준비되어 있었고, 제가 들은 세션 목록은 다음과 같습니다.세션 1. ‘memo’를 지울 결심 - React Complier의 미래 - 장용석 (리멤버앤컴퍼니)세션 2. 중요하지만 긴급하지 않은 일, ‘그럼에도 계획해야 하는 웹 접근성’ - 김무훈 (A11YKR 커뮤니티)세션 3. 1년에 10억원을 절약한, 강남언니의 SEO 웹 전략 공개 - 손준혁 (힐링페이퍼(강남언니))세션 4. Tanstack query 너머를 향해! 쿼리를 라우트까지 전파시키기 - 임상원 (라프텔)세션 5. 그..