1. onChange 사용const [folderName, setFolderName] = useState("");const maxLength = 22;const handleChange = (e: React.ChangeEvent) => { if (e.target.value.length > maxLength) return; setFolderName(e.target.value);}; ...문제점onChange는 상태가 업데이트된 후 반영되므로, 마지막 입력이 잘리는 문제가 발생할 수 있음.글자수를 22자로 제한했지만 (ㅋ * 23)이 입력된다. 2. onInput 사용onInput은 입력값이 DOM에 반영되기 전에 제한을 걸 수 있어서 보다 즉각적인 반응이 가능. (ㅋ*22)로 글자수가 원하는 대로 반..

최근에 ‘매일메일’ 사이트의 깃허브를 보면서 공통 에러 처리 구조가 참 깔끔하다는 생각이 들었다.에러 메시지를 일관되게 처리하고, 로깅 시스템(Sentry 등)과도 잘 연동되는 점이 특히 인상적이었다.그래서 나도 내 프로젝트에 맞게 해당 코드를 약간 수정해서 적용해보았다.처음으로 클래스 기반의 에러 핸들링을 적용해봤는데, 생각보다 단순하면서도 이해가 어려운 부분이 있어 기록해본다. 전체 코드import type { HTTPErrorInfo } from "@/@types/error";/** * API 응답에 대한 에러 정보를 담는 커스텀 에러 클래스 * @param errorInfo - 상태 코드와 메시지를 포함하는 에러 정보 객체 * information : statusCode, payload * to..

얼마 전 Microsoft는 악성 코드 문제로 인해 Visual Studio Marketplace에서 VSCode 확장 프로그램인 'Material Theme'과 'Material Theme Icons'를 제거했습니다. 저 역시 Material Theme의 다크 모드를 사용하고 있었는데, 갑작스럽게 삭제되어 불편함을 겪었습니다. 이에 따라 기존 테마를 대체할 만한 테마를 정리해보았습니다.   1. Material Theme Kit Microsoft에서 제공하는 테마로, Material, Material Night, Material Night Eighties 세 가지 버전이 있습니다.그중에서 Material Night Eighties가 기존에 사용하던 테마와 가장 유사했습니다. 하지만 개인적으로 빨간 색상..

프로젝트에서 React Query의 Hydration과 prefetchQuery를 활용하여 SSR(Server-Side Rendering)을 구현했다.https://new-development.tistory.com/13 React Query와 SSR: 서버 사이드 데이터 관리와 Hydration 활용현재 프로젝트는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)이 혼합된 애플리케이션이다.정적인 페이지: 데이터 변화가 적어 정적 콘텐츠로 제공 (e.g. 메인 화면)동적인 페이지: 데new-development.tistory.com  이 과정에서 팀원들과 다양한 의견을 나눴는데, 그중 fetchQuery에 대한 논의가 있었다.의견 1. "부모 컴포넌트에서 SSR을 통해 데이터를 패칭한 뒤, ..

실행 컨텍스트가 무엇이고, 어떠한 기능을 하는지 알아보자.    실행 컨텍스트실행 컨텍스트는 코드가 실행되는 환경이다. 함수 호출, 전역 코드 실행, eval() 실행 등 모든 실행 단위가 실행 컨텍스트에서 처리된다. 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.-자바스크립트 Deep Dive  구성요소   Call Stack자바스크립트 엔진은 단일 Call Stack을 사용해 실행 컨텍스트를 관리한다.각 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고 Call Stack에 쌓인다. 1. 생성 단계실행 컨텍스트가 생성되며, 선언문만 실행해서 환경 레코드(Environment Record)에 기록한다. 2. 실행 단계선언문 외 나머지 코드..

오늘은 제어 컴포넌트와 비제어 컴포넌트에 대해 정리했다.  제어 컴포넌트React에서 컴포넌트 상태가 입력 필드 값을 제어한다.사용자의 입력에 따라 값이 변경될 때마다 컴포넌트의 상태로 업데이트된다.상태(state)와 onChange 이벤트 핸들러를 통해 값이 관리된다.값이 즉각적으로 렌더링에 반영된다.import { useState } from 'react';function ControlledComponent() { const [inputValue, setInputValue] = useState(""); const handleChange = (event) => { setInputValue(event.target.value); }; return ( 제어 컴포넌트 ..