Dachae's DevLogs

클로저(Closure) 클로저(Closure)는 자바스크립트에서 자주 등장하지만, 처음 접하면 다소 추상적으로 느껴지는 개념입니다. 하지만 클로저를 이해하면 상태를 은닉하거나, 콜백 함수 내 변수 유지, 팩토리 함수 생성 등 다양한 실무 패턴을 더 깊이 있게 이해할 수 있습니다. 1. 클로저란?클로저란, 함수가 선언될 당시의 렉시컬 환경을 기억하는 함수입니다. 즉, 외부 함수의 변수에 접근할 수 있는 내부 함수를 말합니다. 함수가 이미 실행을 끝냈더라도, 그 내부 함수는 여전히 외부 변수에 접근할 수 있습니다.function outer() { const name = 'JavaScript'; function inner() { console.log(`Hello, ${name}`); } retu..

Reflow와 Repaint 웹 개발에서 브라우저의 성능은 사용자 경험에 큰 영향을 미칩니다. 특히 CSS를 변경하거나 DOM 구조를 조작할 때, 브라우저 내부에서는 다양한 렌더링 작업이 일어나며, 이 중 Reflow와 Repaint는 성능 측면에서 반드시 이해하고 있어야 할 핵심 개념입니다.특히 Reflow는 DOM 구조와 레이아웃 재계산이 필요한 CPU 중심 작업이며, Repaint는 상황에 따라 GPU를 활용해 시각적 요소만 빠르게 다시 그릴 수 있는 작업입니다. 이러한 차이로 인해 두 작업은 성능 비용과 렌더링 최적화 방식에 있어 큰 차이를 보입니다. 1. Reflow란?Reflow(또는 Layout)는 요소의 크기, 위치, DOM 구조 변화 등으로 인해 레이아웃 전체 또는 일부를 다시 계산해야..

이벤트 리스너(Event Listener) 사용자의 클릭, 키보드 입력, 마우스 움직임 등 다양한 행동은 어떻게 코드와 연결될까요? 이때 등장하는 개념이 바로 이벤트 리스너(Event Listener)입니다. 이벤트 리스너는 말 그대로 어떤 이벤트가 발생했을 때 그에 반응하는 청취자 역할을 합니다. 이 글에서는 이벤트 리스너의 기본 개념부터 사용법, 실전 예제까지 차근히 살펴보며, 사용자와 코드 사이를 잇는 연결고리로서의 역할을 이해해봅시다. 1. 이벤트 리스너란?이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 동작을 정의하는 함수를 등록하는 방법입니다. 쉽게 말해, 이벤트 리스너는 웹 페이지의 특정 요소에 귀를 기울이고 있다가, 사용자가 무언가를 하면 미리 정해진 동작을 수행하게 합니다.핵심 개념 ..

콜백 함수 (Callback Function) JavaScript를 배우다 보면 가장 많이 듣게 되는 단어 중 하나가 바로 콜백 함수(Callback Function)입니다. 처음에는 다소 헷갈릴 수 있지만, 콜백을 이해하면 비동기 처리, 고차 함수, 이벤트 핸들링 등 다양한 개념이 더 쉽게 이해됩니다. 1. 콜백 함수란?콜백 함수란 다른 함수에 인자로 전달되어, 나중에 실행되는 함수를 의미합니다.“A 함수 안에서 B 함수를 실행할 거야. 근데 언제 실행할지는 A가 결정해!”즉, 실행을 위임한 함수라고 생각하시면 됩니다.콜백 함수 예제function greet(name, callback) { console.log(`Hello, ${name}`); callback();}function sayBye()..

Fetch와 Axios 웹 애플리케이션에서 서버와 통신할 때 가장 많이 사용하는 방법은 HTTP 요청입니다. 이때 사용하는 대표적인 도구가 바로 Fetch API와 Axios입니다. 이 글에서는 두 방식의 사용법과 차이점을 예제와 함께 설명하고, 실무에서 어떤 상황에 어떤 도구를 선택하면 좋을지 정리해드립니다. 1. Fetch API란?Fetch API는 브라우저에 내장된 기본 HTTP 통신 기능입니다. 별도 설치 없이 사용 가능하며, Promise 기반으로 동작합니다.기본 사용 예제fetch('https://api.example.com/users') .then(response => response.json()) .then(data => console.log(data)) .catch(error =..

async와 await JavaScript에서 서버 요청이나 파일 읽기처럼 시간이 걸리는 작업은 비동기(async)로 처리됩니다. 과거에는 콜백(callback)을, 그 이후엔 Promise를 사용했지만, 지금은 async/await이 비동기 처리의 표준 문법입니다. 1. async/await란?async/await는 Promise를 더 간결하고 가독성 좋게 사용하는 문법입니다. 마치 동기(synchronous) 코드처럼 작성할 수 있어서 복잡한 .then() 체인을 피할 수 있습니다. 2. 기본 문법a. async 키워드어떤 함수 앞에 async를 붙이면, 그 함수는 항상 Promise를 반환합니다.async function greet() { return 'Hello!';}greet().then..

Promise 웹 개발에서 사용자 경험(UX)을 향상시키기 위해 필수적으로 사용되는 기법 중 하나가 비동기 프로그래밍입니다. 웹 애플리케이션은 종종 서버에 데이터를 요청하거나, 외부 API와 통신하거나, 일정 시간이 걸리는 작업을 수행해야 합니다. 이런 작업을 처리할 때 전체 애플리케이션의 흐름이 멈추지 않도록 하기 위해 비동기 처리 방식을 사용하게 되며, 그 핵심에 바로 Promise 객체가 존재합니다.Promise는 자바스크립트에서 비동기 작업의 완료 여부와 결과를 나타내는 객체로, 콜백 함수의 단점을 보완하며 코드의 가독성과 유지 보수성을 크게 향상시켜줍니다. 비동기 처리의 흐름을 더 명확하게 만들기 때문에, then, catch, finally 같은 메서드를 통해 체계적으로 결과를 처리할 수 있습..

Redux Toolkit React로 애플리케이션을 개발하다 보면 컴포넌트끼리 상태(state)를 공유하고 관리하는 게 점점 복잡해집니다. 이런 문제를 해결하기 위해 등장한 대표적인 상태 관리 라이브러리가 바로 Redux입니다. 그리고 Redux를 더 쉽고 간단하게 쓰기 위해 나온 것이 바로 Redux Toolkit(RTK)이죠. 1. Redux란?Redux는 애플리케이션의 상태를 중앙에서 관리할 수 있도록 도와주는 JavaScript 라이브러리입니다. React와 함께 많이 사용되지만, 실제로는 프레임워크에 종속되지 않습니다.Redux를 쓰는 이유상태를 예측 가능하게 만들기 위해여러 컴포넌트에서 공통 상태를 공유하고 관리하기 위해디버깅, 테스트, 개발도구 연동이 쉬운 구조를 만들기 위해 2. Red..

Redux React를 사용하다 보면 컴포넌트 간의 상태 공유가 점점 복잡해집니다. 부모 → 자식으로 상태를 전달하거나, 여러 컴포넌트에서 같은 데이터를 관리하다 보면 데이터 흐름이 꼬이고 유지보수가 어려워지죠. 이럴 때 필요한 것이 바로 Redux입니다.Redux는 앱의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하게 해주며, 상태의 흐름을 예측 가능하게 만들어줍니다. 1. Redux란?Redux는 JavaScript 앱의 상태(state)를 관리하기 위한 라이브러리입니다. 주로 React와 함께 사용되지만, 프레임워크에 의존적이지는 않습니다.핵심 목표상태(state)의 일관성과 예측 가능성 보장중앙 집중식 상태 관리디버깅, 테스트, 개발 도구 통합 용이 2. 왜 Redux가 필요한가?Re..

Advanced React HooksReact를 어느 정도 사용해본 개발자라면 useState, useEffect 같은 기본 훅은 익숙할 것입니다. 하지만 복잡한 상태 관리나 라이프사이클 제어, 퍼포먼스 개선 등 더 세밀한 제어가 필요할 땐 고급 훅(Advanced Hooks)이 큰 도움이 됩니다. 1. useReducer (복잡한 상태 관리를 위한 훅)언제 사용하나요?useState로는 관리하기 힘든 복합 상태상태 전이 로직을 명확하게 정의하고 싶을 때기본 구조const [state, dispatch] = useReducer(reducer, initialState);예제const initialState = { count: 0 };function reducer(state, action) { swit..

React Custom Hooks 리액트 훅을 사용하다 보면, useState, useEffect, useRef 등 반복되는 로직이 여러 컴포넌트에 등장하는 경우가 많습니다. 이때 공통 로직을 재사용하고, 컴포넌트는 UI에만 집중할 수 있도록 도와주는 것이 바로 커스텀 훅(Custom Hook)입니다. 1. 커스텀 훅이란?커스텀 훅은 이름 그대로 개발자가 직접 정의한 훅 함수입니다. 내부적으로는 useState, useEffect 등 기존 훅을 사용해 공통 로직을 추상화합니다.규칙이름은 반드시 use로 시작해야 합니다 (useMyHook)일반 함수지만 훅 규칙(Hooks Rules)을 따라야 합니다최상위에서만 호출조건문이나 반복문 안에서는 호출하지 말 것 2. 간단한 예제a. 윈도우 크기 추적 훅i...

React Hooks React 16.8부터 등장한 Hooks(훅)은 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 다룰 수 있게 해주며, 컴포넌트 구조를 더욱 직관적으로 바꿨습니다. 이 글에서는 자주 사용되는 기본 훅부터 커스텀 훅 제작까지 핵심 내용을 정리해드립니다. 1. 리액트 훅이란?기존에는 컴포넌트의 상태나 라이프사이클을 제어하려면 클래스형 컴포넌트를 써야 했습니다. 하지만 React Hooks는 함수형 컴포넌트에서도 다음과 같은 기능을 제공해줍니다.상태 관리 (useState)컴포넌트 생명주기 대응 (useEffect)외부 DOM 접근 (useRef)성능 최적화 (useMemo, useCallback)컨텍스트 사용 (useContext).etc 2. 가장 많이 쓰는 기본 훅a. use..

이벤트 루프(Event Loop) JavaScript는 싱글 스레드 언어입니다. 즉, 한 번에 한 작업만 처리할 수 있는 구조인데, 왜 우리는 setTimeout, fetch, Promise 같은 비동기 작업을 동시에 처리할 수 있을까요? 그 비밀은 바로 이벤트 루프(Event Loop)입니다. 1. 싱글 스레드란?JavaScript는 하나의 Call Stack(호출 스택)에서 코드가 실행됩니다. 이 말은 곧, 모든 작업이 순서대로 하나씩 실행된다는 뜻이죠.console.log('A');console.log('B');console.log('C');ABC그런데 왜 setTimeout은 뒤늦게 실행될까?console.log('Start');setTimeout(() => { console.log('Timeo..

CSR과 SSR 웹 애플리케이션을 개발할 때 CSR과 SSR이라는 용어를 자주 접하게 됩니다. 이는 각각 Client Side Rendering과 Server Side Rendering을 의미하며, 사용자에게 페이지를 보여주는 방식에 따른 중요한 차이를 나타냅니다. 이 글에서는 CSR과 SSR의 핵심 차이를 이해하고, 각 방식이 언제 적합한지에 대해 설명합니다. 1. CSR(Client Side Rendering)과 SSR(Server Side Rendering)a. CSR (Client Side Rendering)CSR은 브라우저(클라이언트)가 HTML, CSS, JS 파일을 받아와서 Javascript를 통해 페이지를 동적으로 구성하는 방식입니다.작동 방식브라우저가 최소한의 HTML 문서와 JS ..

브라우저 렌더링 성능 최적화 빠른 웹사이트는 사용자 만족도와 SEO 모두에 긍정적인 영향을 미칩니다. 특히 웹 렌더링 단계에서의 지연(delay)은 최초 로딩 속도와 상호작용 응답성에 큰 영향을 미치죠.이 글에서는 브라우저 렌더링 흐름을 기준으로, 각 단계에서 렌더링 지연을 최소화할 수 있는 실전 전략을 정리합니다. 1. 렌더링 흐름 요약HTML/CSS/JS 파싱 → DOM & CSSOM 생성 → Render Tree 생성 → Layout → Paint → Compositing 각 단계마다 병목이 생길 수 있으며, 이를 줄이는 것이 곧 렌더링 지연 최소화입니다. 2. 최적화 전략 핵심 포인트a. Critical Rendering Path 줄이기Critical Rendering Path란, 사용자에게..