janglog 님의 블로그

React 함수 컴포넌트는 겉으로 보기엔 단순한 함수처럼 보이지만, 내부 동작을 이해하려면 클로저(Closure) 개념을 반드시 알아야 된다고 생각했어요.useState, useEffect, 이벤트 핸들러 등이 모두 클로저를 기반으로 상태를 기억하기 때문이에요.이번 글에서는 자바스크립트 스코프의 특성과 함께 클로저가 어떻게 동작하고 왜 React에서 필수적인지 정리해봤어요. 1. 클로저란 무엇인가클로저는 함수와 그 함수가 선언될 당시의 어휘적 환경(lexical environment)을 함께 기억하는 구조에요.여기서 말하는 어휘적 환경은 변수가 어디서 선언되었는지를 기준으로 스코프가 정적으로 결정되는 구조를 말해요.즉, 코드를 작성하는 순간부터 변수의 접근 범위가 이미 확정된다는 뜻이에요.2. 자바스크립..

번들러와 번들링이란?번들링(Bundling)이란 여러 개로 흩어져 있던 파일(자바스크립트, CSS 등)을 하나의 파일로 묶는 작업입니다. 단순히 합치는 것이 아니라 각 모듈의 의존성까지 파악해 그룹화합니다. 여러 파일로 분리된 채 개발하면 가독성이 올라가고 유지보수가 쉬워지지만, 실제 배포 시에는 각각의 파일을 별도 요청해야 하므로 네트워크 병목 현상이 발생할 수 있습니다.이런 문제를 해결하기 위해 번들러가 등장했습니다. 개발할 땐 모듈화를 적극 활용해 각 기능별 파일로 쪼개 작업하고, 최종 배포 단계에선 하나 또는 최소한의 파일로 압축해 서버에 올립니다. 같은 타입의 파일을 한 번에 요청하고 응답받을 수 있어 네트워크 리소스 절감 효과가 있으며, ES6 코드도 ES5로 자동 변환해 모든 브라우저에서 동..

Bofit 프로젝트를 진행하며 커뮤니티 글 작성 기능을 만들 때 사용자 경험을 더 자연스럽게 만들기 위해 커스텀 훅을 하나 만들었었어요.모바일 환경에서 글을 작성하고 Enter를 눌러 제출할 때 입력창에 포커스가 계속 남아 있으면 브라우저는 여전히 타이핑 중이라고 판단해요. 그 결과 키보드가 닫히지 않거나, 사용자가 다시 화면을 탭해야 하는 불편이 생길 수 있어요. 이런 상황을 미리 방지하기 위해 만든 훅이 바로 useSubmitOnEnter예요.import { KeyboardEvent, RefObject, useCallback } from 'react';/** * @description Enter 키 입력 시 onSubmit 실행 및 키보드 블러 처리 */export function useSubmitO..

웹 사이트에서 빠질 수 없는 요소 중 하나는 이미지입니다.당장 네이버만 봐도 이미지가 30개 이상이 되는걸 보실 수 있습니다. 그런데 이런 이미지들을 아무런 최적화 없이 서버에서 받아오거나 클라이언트에서 사용한다면 어떻게 될까요?수십 개의 이미지가 한꺼번에 로딩될 때 사이트 속도는 느려지고, 방문자는 답답함을 느껴 이탈하게 됩니다. 실제로 로딩 지연은 사용자 경험 뿐만 아니라 검색엔진 평가에도 악영향을 미칠 수 있습니다.이 두 이미지는 제가 2025년 8월부터 9월까지 진행했던 학교 축제 서비스인 'Passtival'에서의 실제 성능 측정 결과입니다. 프로젝트 초기에는 아이콘 등에는 SVG를 사용했지만, 배너나 본문 썸네일 등 대부분의 이미지는 PNG, JPEG 등 다양한 포맷을 혼용하고 있었습니다.게시..

React에서 상태 관리는 필수적입니다. 컴포넌트 간 데이터를 전달할 때 가장 근본적인 방식은 props지만 트리 구조가 깊어질수록 이 props를 계속 전달하는 props drilling 문제가 발생합니다. 이 문제를 해결하기 위해 등장한 것이 Context API입니다. Context는 전역적으로 데이터를 관리·공유할 수 있는 React의 기본 기능으로 별도의 외부 라이브러리 없이도 간단하게 전역 상태를 다룰 수 있습니다.TodoList가 있다고 할 때 사진을 보시면 App에서 TodoItem까지 props로 todos, onCreate, onUpdate, onDelete등 todo 아이템들을 전달하려고 하면 props를 지속적으로 전달해야 했습니다. 하지만 useContext를 사용하면 Contex..

웹 개발에서 HTTP 요청은 필수적인 요소이며, 많은 개발자들이 기본 제공되는 `fetch API` 대신 외부 라이브러리를 사용합니다.저희 프로젝트 Bofit (AI 기반 보험 추천 서비스)에서도 어떤 HTTP 라이브러리를 사용할지 고민하게 되었습니다.눈에 들어온건 Axios와 Ky였고, 이 두가지 라이브러리의 비교를 통해 라이브러리를 채택하려고 합니다. AxiosAxios는 브라우저 기반 Javascript 애플리케이션과 Node.js 애플리케이션 모두에서 HTTP 요청을 만들기 위한 약속 기반 HTTP 클라이언트입니다. axios의 기능axios는 최소한의 구성만으로도 HTTP 요청을 쉽게 보낼 수 있는 직관적인 API를 제공합니다. 또한 HTTP 요청 및 응답을 가로채서 전/후처리를 할 수 있어, ..

Sub Title: 어떻게 설계하면 좋을까? React나 Next.js 프로젝트를 하다 보면 디렉터리 구조를 어떻게 잡아야 할지 한 번쯤은 고민해보신 적이 있을 겁니다. 특히 규모가 커지면 커질수록 그 구조는 협업 효율, 유지보수 편의성, 기능 확장성에 큰 영향을 주게 됩니다.디렉터리 구조를 나누는 방식은 다양하지만 대표적으로 아래 두 가지 스타일이 많이 사용됩니다. 👨🏻‍🏫 기능 (또는 라우트) 기반 구조src/├── leftArm/│ ├── Finger.js ← 왼팔의 손가락 기능│ ├── Finger.css ← 손가락의 스타일│ ├── ArmUtils.js ← 왼팔의 동작 유틸│ └── ArmUtils.test.js ← 왼팔 ..

상태(state)란 ?컴포넌트가 화면에 보여줄 내용을 기억하고, 바뀔 때마다 다시 그리게 해주는 값입니다.import { useState } from "react";function Checkbox() { const [checked, setChecked] = useState(false); return ( setChecked(e.target.checked)} /> 체크박스 상태: {checked ? "체크됨" : "해제됨"} );} 상태는 어디에 저장 될까요?상태 위치설명예시 Hook컴포넌트 안그 컴포넌트만 아는 상태useState, useReducer여러 컴포넌트와 공유여기저기에서 같이 쓰는 상태Context, Redux, Recoil 등서버에서 가져옴서버 ..

먼저 훅의 규칙을 설명하자면리액트 훅을 안전하게 사용하기 위해 다음 2가지 규칙을 지켜야 합니다.첫째, 훅은 항상 최상위 레벨에서 호출되어야 합니다. 다시 말해 조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야 합니다. 반환문으로 함수 컴포넌트가 종료되거나, 조건문 또는 변수에 따라 반복문 등으로 훅의 호출 여부(호출되거나 호출되지 않거나)가 결정되어서는 안됩니다. 이렇게 해야 useState나 useEffect가 여러 번 호출되더라도 훅의 상태를 올바르게 유지할수 있게 됩니다.둘째, 훅은 항상 함수 컴포넌트나 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 합니다.이 2가지 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 좀 더 명확하게 드러낼 수 있습니다. 이러한 규칙이 ..

1. 런타임과 컴파일 타임 프로그래밍 언어는 일반적으로 고수중(high-level) 언어와 저수준(low-level) 언어로 나눌 수 있습니다. 고수준 언어는 사람이 이해하기 쉬운 형태로 작성되며, 저수준 언어는 컴퓨터가 이해하기 쉬운 형태입니다. 자바스크립트는 대표적인 고수준 언어이며 컴파일타임 없이 바로 인터프리터를 통해 실행되는 언어입니다. 여기서 런타임(runtime)은 프로그램이 메모리 위에 실제로 실행되는 시간을 의미합니다. 컴파일타임은 소스코드를 기계어로 변환하는 시간이며, 프로그램이 실행되기 전에 이뤄집니다. 전통적인 컴파일 언어(C , C++)는 컴파일타임이 존재하고 자바스크립트는 없거나 최소화된 형태의 런타임 언어입니다. 2. 자바스크립트 런타임 자바스크립트 런타임은 자바스크립트가 실행..