![]()
🧩 문제정의React에서 디바운스 기능이 필요한 상황에 대응하기 위해 직접 커스텀 훅 useDebounce를 만들어 사용하고 있었습니다.기본적으로 useCallback과 useRef만으로 구현했기 때문에 간단하고 직관적이었으나,콜백이 최신 상태를 반영하지 않거나 props로 전달 시 리렌더링을 유발하는 등의 숨겨진 안정성 문제가 있었습니다.원래 코드import { useCallback, useRef } from "react";type Debounce = (...args: T) => void;export const useDebounce = ( func: (...args: T) => void, delay: number,): Debounce => { const timerRef = useRef..
![]()
🧨 문제 상황컴포넌트 내 드롭다운 필터를 초기화(reset) 해야 하는 상황이 있었습니다.처음에는 아래와 같은 방식으로 리셋을 구현했었는데, 계속 신경이 쓰였습니다.const [isReset, setIsReset] = useState(false);const handleReset = () => { setKeyword(""); setPage(1); setTarget(All); setIsReset(true); setTimeout(() => setIsReset(false), 1000);};❗문제점setTimeout으로 리셋 flag를 1초 뒤에 false로 만드는 게 불안정하고 지저분했음Dropdown 컴포넌트 내부에서 isReset을 감지해 setLabel, onValueChange 등을 직접 호출..
![]()
🧠 Inertia/React + Context 환경에서 중복 fetch 문제 해결기📌 문제 정의최근 Inertia.js + React + Laravel 조합으로 프로젝트를 진행하던 중, Context 내부에서 fetch가 두 번 이상 발생하는 문제를 겪었습니다.Context 내부에서 초기 fetch 요청을 보내고 있었고, 이 요청은 특정 state에 의존하고 있었습니다.그런데 페이지 이동 시 Context가 재마운트되며 initialState가 다시 적용되었고, 결과적으로 fetch가 두 번 이상 실행되었습니다.이로 인해 드물게 초기값이 UI에 반영되는 문제, 혹은 깜빡임(flickering)이 발생했습니다.⚙️ 문제 원인 분석Inertia 환경에선 다음과 같은 제약이 있었습니다:Context Pro..
![]()
gpt쌤이 위로도 해준다.. 최고....2년전에 비해 이제는 LLM쌤들이 난무하지만역시 gpt쌤과 정이 많이 들었다 ㅜㅜ 오늘은 CSS 트릭을 하나 배웠습니다.image-rendering 과transform: translateZ(0) 을 함께 쓰는 건데요.쌤의 명쾌한 설명 첨부합니다.절대 바보 아니세요! 그 상황이라면 누구나 착각할 수 있어요 🙂말씀하신 CSS 속성들에 대해 아래처럼 정리해드릴게요:🔍 image-rendering: auto;이 속성은 브라우저가 이미지를 어떻게 보간(interpolation) 할지 결정합니다.기본값 auto는 브라우저가 알아서 최적 품질로 렌더링합니다.다른 옵션들:crisp-edges: 픽셀이 뭉개지지 않게 보이도록 (ex. 픽셀아트)pixelated: 저해상도 이미지..
![]()
😂 문제) 특정 기기 + 인앱에서 navigator안됨안드로이드 옛 기종 등 특정 모바일 기기 중인앱 브라우저에서는 navigator.share 가 안될 때가 있습니다.이럴때 사용자를 인앱브라우저에서 아예 튕겨버리는 방법쓸 수 있다는 것을 알게 되었습니다.☺️ 해결) 해결방법은 간단하나...방법은 그냥 아래 코드를 App.tsx 혹은 Root 클라이언트 컴포넌트에 넣으면 됩니다.// 안드로이드 웹뷰에서 navigator.share가 지원되지 않을 때 대체 공유 방법const handleShareIntent = () => { const currentUrl = window.location.href; // 현재 페이지 URL const hostname = window.location.hostnam..
![]()
React의 Synthetic Event란?Synthetic Event(합성 이벤트)는 React가 브라우저의 기본 이벤트를 감싸서 제공하는 래퍼(wrapper) 객체입니다.즉, 브라우저 이벤트를 추상화한 React만의 이벤트 시스템입니다. React에서 이벤트 핸들러를 사용할 때 onClick, onChange 같은 속성을 JSX에서 작성하면, 내부적으로 Synthetic Event가 생성되어 브라우저의 native event를 감싸게 됩니다.1. Synthetic Event가 필요한 이유 ✅ 브라우저 간 호환성 유지React는 모든 이벤트를 자체적으로 관리하므로, 브라우저마다 이벤트 동작이 다르게 구현되는 문제를 해결할 수 있습니다.✅ 성능 최적화이벤트 리스너를 개별 DOM 요소에 붙이는 것이 아니라..
![]()
문제 정의목표: 사용자가 최대 3개의 태그를 입력할 수 있는 UI 구현해야 했습니다.처음엔 인풋 하나만 보이고, 사용자가 Tab 또는 Enter로 다음 인풋을 추가하는 방식입니다.문제: 한글 입력 중(IME 조합 상태) Tab 또는 Enter를 누르면,새 인풋이 빈 값이 아니라 마지막에 조합되던 한글이 남은 채로 생성되었습니다.의문: 영문 입력에서는 멀쩡한데 왜 한글에서만 이런 문제가 발생하는 것인지 의문이었습니다.해결 과정useFieldArray 오류 의심처음에는 React Hook Form의 useFieldArray 사용 방식이 잘못됐다고 생각해, append 시 ID 중복 문제, setValue 강제 초기화 등 여러 시도를 했으나 실패하였습니다.한글 입력 시 IME(입력기) 조합중 이벤트문제를 검색..
![]()
1. 설치pnpm add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest jest jest-environment-jsdom mswpnpm create jest@latest2. jest.config 설정import type { Config } from 'jest';import nextJest from 'next/jest.js';const createJestConfig = nextJest({ dir: './',});const config: Config = { // Automatically clear mock calls, instances, context..
![]()
0. Closure + HOC클로저: 이벤트가 발생할 때마다 이전의 상태를 기억해야 하기 때문에 클로저가 필요. 반환된 함수가 실행될 때마다 클로저를 사용하여 함수 실행여부를 결정할 수 있음고차 함수: 인자로 실행하려는 함수를 받아, 이 함수를 조건에 따라 실행하는 새로운 함수를 반환1. Debouncingtype Debounce = (...args: T) => void;function debounce(func: (...args: T) => void, delay: number): Debounce { let timer: ReturnType | null = null; return (...args: T) => { if (timer !== null) clearTimeout(timer); timer..
![]()
여기 에 작성했던 내용중 부족한 내용이 있었습니다.컴포넌트와 값을 반환하는 커스텀 훅 사용시 주의사항을 다시 정리합니다.1. useCallback 사용리렌더링 통제가 어렵습니다.반환할 컴포넌트를 useCallback 처리합니다.function usePreferTheme({ mode }: UsePreferThemeProps) { const [selectedTheme, setSelectedTheme] = useState([]); const handleThemeChange = () => { // setSelectedTheme() 어쩌구 등등.. } // useCallback 사용! const PreferThemeToRender = useCallback(() => { ..
![]()
useReducer는 React에서 상태 관리를 위해 사용하는 훅 중 하나로, 복잡한 상태 로직을 보다 체계적으로 관리하고 싶을 때 유용합니다. 특히 상태 변경 로직이 여러 단계로 나누어져 있거나, 상태 업데이트가 명확한 액션에 의해 이루어져야 할 때 사용됩니다. Redux의 상태 관리 방식과 유사하게 리듀서 패턴을 사용하여 상태를 업데이트합니다.useReducer의 기본 구조useReducer는 세 가지 요소를 인자로 받습니다:리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.초기 상태: 상태의 초기 값입니다.초기화 함수 (선택적): 초기 상태를 더 복잡한 방식으로 설정해야 할 경우에 사용할 수 있습니다.useReducer는 dispatch 함수를 반환하며, 이 dispatch..
![]()
React.FC와 React.ReactNode는 React에서 각각 다른 목적을 가진 타입입니다. 두 타입의 차이를 이해하면 타입스크립트로 React 애플리케이션을 개발할 때 보다 명확하게 타입을 지정할 수 있습니다.React.FC (React.FunctionComponent)설명: React.FC는 함수형 컴포넌트를 정의할 때 사용하는 타입입니다.용도: 컴포넌트의 props 타입을 지정하고, 해당 컴포넌트가 React 요소를 반환한다는 것을 명시합니다.특징:제네릭 타입으로 Props의 타입을 지정할 수 있습니다.기본적으로 children 프로퍼티를 포함하고 있습니다.컴포넌트의 반환 타입이 ReactElement임을 명시합니다.예시:import React from 'react'; interface MyC..
![]()
이 오류는 React의 Hydration 과정에서 발생하는 문제로, 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 일치하지 않을 때 발생합니다. 주어진 상황에서 오류가 발생하는 원인으로는 다음과 같은 가능성을 고려할 수 있습니다:1. 비동기 렌더링클라이언트 컴포넌트 EveryWorks의 map 함수 내에서 async 함수를 사용하고 있습니다. map 함수 내에서 비동기 작업을 처리하게 되면, React는 서버와 클라이언트 간의 UI가 일치하지 않는다고 인식할 수 있습니다. map 함수 내에서 async를 사용하는 것은 권장되지 않습니다.해결 방법:blurredImages는 이미 서버 컴포넌트에서 비동기 처리로 생성되었기 때문에, 클라이언트 컴포넌트에서는 추가적으로 비동기 처리를 하지 않는..
![]()
Sharp를 사용하지 않고 이미지를 10px로 리사이즈하고 Base64로 변환하는 작업을 클라이언트 측에서 수행하려면 HTML5 Canvas API를 사용할 수 있습니다. 이 방법은 이미지의 크기 조정을 수행하고 결과를 Base64로 인코딩하는 데 사용할 수 있습니다.다음은 클라이언트 측에서 이 작업을 수행하는 방법입니다:1. 이미지 로드 및 Canvas를 사용한 크기 조정 및 Base64 변환 함수const loadImage = (src: string): Promise => { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "anonymous"; // CORS가 필요한..
![]()
React Router의 navigate 함수는 보통 React 컴포넌트 안에서 사용됩니다. 그러나, 일반 JavaScript 파일에서 navigate 함수를 사용하려면 React Router의 내비게이션 기능을 직접 접근할 수 있어야 합니다. 이를 위해, React 컨텍스트나 커스텀 훅을 활용할 수 있습니다.Step-by-Step GuideReact Router의 내비게이션 컨텍스트 사용: React 애플리케이션의 루트 레벨에서 내비게이션 컨텍스트를 설정합니다.커스텀 훅을 사용하여 내비게이션 함수 제공: 내비게이션 기능을 커스텀 훅으로 캡슐화하여 일반 JavaScript 파일에서 접근할 수 있게 합니다.일반 JavaScript 파일에서 내비게이션 함수 사용: 일반 JavaScript 파일에서 내비게이션..
![]()
Suspense 컴포넌트를 Provider 또는 Layout처럼 분리하여 재사용하는 법을 알아보았습니다.이렇게 하면 코드를 더 깔끔하게 유지하고, 여러 곳에서 Suspense 기능을 쉽게 사용할 수 있을 것 같습니다..Step-by-Step GuideSuspenseProvider 컴포넌트 생성:Suspense 컴포넌트를 감싸는 SuspenseProvider 컴포넌트를 생성하여, fallback UI를 중앙에서 관리할 수 있습니다.App.js에서 SuspenseProvider 사용:SuspenseProvider 컴포넌트를 App 컴포넌트에서 사용하여, 하위 컴포넌트들이 지연 로딩되는 동안 보여줄 UI를 지정할 수 있습니다.예제 코드SuspenseProvider.jsimport React, { Suspens..
![]()
로그인, 회원가입, 인풋의 기본 템플릿을 정리합니다.인풋// Input.tsximport { ComponentProps, useId } from "react";type InputProps = { label?: string; required?: boolean; type? : "text" | "password";} & ComponentProps;function Input({ label, required, id, type = "text", ...props }: InputProps) { const inputUid = useId(); const inputId = id || inputUid; return ( {label && ( ..
![]()
네이버 지도 관련 마지막입니다.네이버 지도 api 에서 정보창을 만들 때 기본적으로 문자열만 받는데,이부분을 리액트 컴포넌트로 할 수 없을까 고민하다가 나온 결론입니다.React.createRoot, React.render 조합function SetInfoWindowContent( type, searchedValue, htmlAddresses, infoWindow, place = null, navigate = null, marker = null, user = null, contracts = []) { // 임시 컨테이너 생성 const container = document.createElement('div'); container.style...
![]()
리팩토링은 미래의 나에게.. ㅋㅋ참고용으로만 올려야겠습니다.네이버지도 with React - Step by Step 2initGeocoder.jsfunction initGeocoder( infoWindow, map, searchInputRef, searchButtonRef, marker, setSelectedGeoData, setSelectButtonDom, user) {map.addListener('click', (e) => { searchCoordinateToAddress( infoWindow, map, e.coord, setSelectButtonDom, setSelectedGeoDa..
![]()
팀플 주간이 끝났습니다!팀원분들의 노력 덕분에 무리없이 프로젝트를 완료 할 수 있었습니다. 아웃소싱 프로젝트(aka 외부 api 사용 프로젝트)에서 저희는 네이버 지도 api 를 활용하여운동 모임 사이트를 기획했고, 5일이라는 짧은 시간동안 요구사항을 대부분 구현했습니다.오늘은 그 중 제가 담당했던 네이버 지도 api 에 관한 사항을 정리하려고 합니다.네이버지도 with React - Step by Step 1네이버 지도 api script 동적 로드네이버 지도 api 를 이용하기 위해서는 https://openapi.map.naver.com/openapi/v3/maps.js 라는 스크립트를 로드해야 합니다index.html 에서 script 태그로 로드해도 되지만, 좀 더 동적인 방식을 고려하였습니다사..
![]()
오늘은 PrivateRoute / ProtectedRoute 의 구현 방법을 정리해 보려고 합니다.PrivateRoute / ProtectedRoute 는 사용자 인증 상태를 확인하여 인증된 사용자만 특정 경로에 접근할 수 있도록 하는 것입니다. 이를 위해 리액트 라우터를 사용하여 인증 로직을 추가할 수 있습니다.1. React Router 설치먼저, 리액트 라우터가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 아래 명령어를 사용하여 설치합니다.npm install react-router-dom2. Auth 설정인증 상태 관리는 Context API, Redux, Zustand 무엇이 되었든 user 정보나 isLoggedIn 등의 상태를 받을 수 있으면 됩니다. 여기서는 Zustand 와 Tans..
![]()
Dompurify 라이브러리사용 목적Dompurify는 악성 코드 삽입 공격(XSS)을 방지하기 위해 HTML, SVG, MathML 등의 사용자 입력을 정화하는 라이브러리입니다. 이를 통해 웹 애플리케이션에서 안전하게 사용자 콘텐츠를 렌더링할 수 있습니다.사용 방법설치:npm install dompurify사용 예시:import DOMPurify from 'dompurify';const dirty = ' bold';const clean = DOMPurify.sanitize(dirty);document.getElementById('content').innerHTML = clean;CDN 사용:Html-React-Parser 라이브러리사용 목적html-react-parser는 HTML 문자열을 React ..
![]()
문제상황1 - Quill의 기본 base64 이미지 처리팀프로젝트를 진행하던 중, 편집기 라이브러리가 필요해 Quill 을 채택했습니다.그런데 편집기에서 이미지를 삽입할 시 기본 처리 방식이 base64 로 변환하는 방식이었습니다. 저희가 원한 것은 삽입된 이미지가 폼 제출을 할 때 supabase storage에 업로드되고,해당 publicUrl 을 받아와 기본 base64 이미지의 src 를 대체하여 DB에 insert 되는 것이었습니다.해결방법 1 - custom image handler이 문제를 해결하려고 찾아보던중 Quill 라이브러리에서 이미지 처리 방식을 custom handler 로 대체 할 수있음 을 알게 되었고, 처음에는 custom handler 함수 안에서 모든 생각한 로직을 처리 ..
![]()
lodash 의 debounce사용자의 반복 클릭을 막아야 하는 상황은 흔하게 발생하고, 기법으로는 쓰로틀링과 디바운싱이 대표적입니다.이번에는 디바운싱(마지막 이벤트 이 후 특정시간 동안 이벤트가 발생하지 않을때 함수 호출)을 알아보려고 합니다.대표적으로 lodash 라이브러리의 debounce 함수를 사용하면 디바운싱을 적용할 수 있습니다.설치:npm install lodash예제 코드debounce를 사용하여 updateMemo 호출을 지연시키고, useEffect를 통해 text 상태가 변경될 때만 렌더링하도록 합니다.import { useState, useEffect, ChangeEvent } from "react";import { useMemoApp } from "@/hooks/useMemoAp..
![]()
폭풍같은 한 주가 지나갔습니다!한 주를 정리하며 이번 주의 메인 테마(?) 였던 Context API 와 Redux-Toolkit 의 사용법을 다시한번 정리해 보려고 합니다.Context API기본설정Context 생성 : createContext()Provider 로 상위 컴포넌트 감싸기 : 사용할 컴포넌트에서 사용 : useContext(콘텍스트명)이게 끝! 인데, 편하게 사용하려면 파일을 커스텀 훅까지 2개 만들면 좋습니다.src/context/콘텍스트.tsxsrc/hooks/커스텀훅.tsx콘텍스트.tsx//context.tsximport { ReactNode, createContext, useEffect, useState } from "react";interface Props { childr..
![]()
오늘은 React Router를 이용해 Link 컴포넌트를 통해 라우트 이동시 Props를 전송할 수 있는지가 궁금했습니다.공부해보니 역시 가능했고, 이를 위해 state 속성을 사용할 수 있습니다. React Router 의 Link 컴포넌트는 state 속성을 통해 데이터를 전달할 수 있으며,전달된 데이터는 도착한 컴포넌트에서 useLocation 훅을 통해 접근할 수 있습니다. 코드 예시데이터를 전달하는 Link 설정: // List.jsimport { Link } from "react-router-dom";import styled from "styled-components";import { Expend } from "../../types/d";import Card from "../Card";con..
![]()
오늘은 과제 주차 중 가계부 props drilling 버전을 Context API 버전으로 리팩토링 해보았습니다.이 과정에서 Context API에 익숙치 않아 살짝 어려움도 겪었습니다.Context API 의 정확한 사용법에 대해 정리해 보려고 합니다.Context API는 전역 상태를 관리하기 위한 강력한 도구입니다.Context를 사용하면 prop drilling을 피하고, 여러 컴포넌트 계층에 데이터를 전달할 수 있습니다.1. Context 생성하기먼저, Context를 생성합니다. 일반적으로 Context를 정의하는 파일을 따로 만들어 관리합니다.// context.jsimport React from 'react';const MyContext = React.createContext();expo..
![]()
한주가 또 지나갔습니다. 이번 주는 리액트 입문 첫번째 개인과제 주차로목표는 todo list 만들기 였습니다. react의 주요 기본 기능이 많이 사용되는 프로젝트 인만큼잘 공부해 두면 추후의 프로젝트에도 많은 도음이 될 것이라 생각되었습니다. 이번 주에 학습한 내들용들을 복습하다가 custom hook 의 사용이유와 사용하는 상황에 대해한번 정리하고 넘어가는 것이 좋겠다고 생각하여 wil 을 작성해 봅니다커스텀 훅을 사용하는 이유코드 재사용성:동일한 로직을 여러 컴포넌트에서 사용할 때, 커스텀 훅을 만들어서 로직을 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고 유지보수성을 높일 수 있습니다.로직 분리:UI 로직과 비즈니스 로직을 분리하여 컴포넌트를 더욱 간결하고 이해하기 쉽게 만듭니다. 컴포넌..
![]()
어제 리액트 특강을 들으면서, 작동여부는 둘째 치더라도 잘 정렬된 props와 컴포넌트 구조를 가져야 하고 이로부터가독성이 담보된다는 사실을 다시 한번 느꼈습니다. 물론 작동도 잘 해야겠죠? 아래 내용을 정리해 보려고 합니다.기존 코드일단 제가 작성했던 todo list는 App.tsx 와 Card.tsx 두 개로 되어 있었고,컴포넌트화는 Card 만 한 상태였습니다. 부모 컴포넌트가 되는 App.tsx 에서 2개의 useState 를 만들었습니다.toDos 배열(전체 todo들)과 개별 toDo 객체 이렇게 2개 였고, 이렇게 생각한 이유는Form 을 컴포넌트로 분리하기가 어렵다고 생각했습니다. Form 컴포넌트에서 다루는 데이터는 어차피 부모로부터 props 로 받아야 할 것이고,그러면 state ..
![]()
리액트 첫 주차 과제 todo list 만들기를 완료하였습니다.간단한 과제이기 때문에 기술적인 어려움은 없었지만리액트 기본에 관한 몇몇 질문에 확실하게 대답하기 어려운 부분이 있었습니다.무언가 알고는 있지만 말로 해보려니 잘 정리가 안되는 부분들을 다시한번 간결하게 정리해 보려고 합니다.JSX 문법이란?JSX 란 Javascript 와 xml 의 결합어의 약자로서 자바스크립트와 xml 이 합쳐진 문법입니다.하나의 파일에 js 와 html 을 동시에 작성하여 편리합니다.브라우저에서 실행되기 전에 바벨 등을 통해 일반 자바스크립트로 변환됩니다.useState?애플리케이션의 상태를 관리하기 위해 리액트의 useState 훅을 사용하였습니다.데이터의 불변성을 유지하면서 상태를 관리할 수 있으며 간결하고 직관적인..
