Frontend

웹 애플리케이션에서 컨텍스트 메뉴는 매우 중요한 UI 요소입니다. 특히, 사용자 경험을 향상시키기 위해 메뉴의 하위 메뉴(서브메뉴)를 구현하는 것이 필요할 때가 많습니다. 이번 글에서는 @floating-ui/react 라이브러리를 사용하여 Nested Submenu(

react-beautiful-dnd는 한때 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 데 있어 대명사였습니다. 그러나 현재는 유지보수가 중단되어, 더 이상 업데이트나 지원을 받을 수 없는 상태입니다. 따라서 많은 개발자들이 새로운 대안으로 @dnd-ki

절대 좋은 방식이 아님을 먼저 말씀드립니다.말그대로 급할 때 사용할 수 있는 야매일 뿐임을 말씀드립니다.React로 개발을 하다 보면 상태 관리와 리렌더링 최적화는 항상 큰 도전입니다. 특히 zustand와 같은 상태 관리 라이브러리를 사용할 때, 상태 변경으로 인해

리액트에서 다루는 인풋은 크게 두 가지로 나눌 수 있습니다.value, onChange를 이용해서 인풋의 값을 업데이트DOM이 인풋 값을 업데이트하고, 우리는 useRef를 이용해서 인풋의 값에 접근참고: https://dev.to/kevinkh89/how-t

MUI(Material-UI)는 React 애플리케이션에서 UI 컴포넌트를 구축할 때 매우 유용한 라이브러리입니다. MUI에서 제공하는 Popper와 Popover 컴포넌트는 둘 다 위치 지정과 관련된 컴포넌트지만, 그 사용 방법과 구현 방식에는 몇 가지 중요한 차이점

리액트(React)의 memo는 컴포넌트의 불필요한 리렌더링을 방지하여 성능을 최적화하는 데 사용되는 유용한 도구입니다. memo는 기본적으로 얕은 비교(shallow comparison)를 통해 이전 렌더링 시 전달된 props와 새로운 props가 동일한지 확인한

현대 웹 애플리케이션에서는 사용자 입력에 따라 다양한 필터링 옵션을 제공하고, 이를 기반으로 API에서 데이터를 가져오는 일이 빈번합니다. 이때 필터 상태를 효과적으로 관리하고, URL과 동기화하여 사용자 경험을 향상시키는 방법 중 하나가 바로 URL 검색 매개변수(s

웹 애플리케이션을 개발하면서 효율적인 성능을 위해 무한 스크롤 또는 가상화(Virtualization) 처리를 사용하는 경우가 많습니다. 이와 같은 가상화된 DOM 요소는 실제 브라우저 DOM에 즉시 렌더링되지 않아 테스트가 까다로울 수 있습니다. 이 글에서는 Play

Playwright는 프론트엔드 개발자에게 강력한 웹 자동화 및 테스트 도구를 제공합니다. 하지만 UI에서 발생하는 이벤트와 비동기로 동작하는 API 요청 사이의 타이밍 문제로 인해 예상치 못한 타임아웃 오류가 발생할 수 있습니다. 특히 API 호출을 기다리고 그 응답

프론트엔드 테스트 자동화 도구인 Playwright를 사용하면서, 종종 브라우저의localStorage에 접근하려 할 때 아래와 같은 에러를 마주할 수 있습니다:이 오류는 page.evaluate()를 사용해 localStorage에 값을 설정하거나 읽으려 할 때 발생

React 애플리케이션에서 Context API는 전역 상태를 관리하는데 매우 유용한 도구입니다. 그러나 Context의 잘못된 사용은 애플리케이션의 성능 문제를 초래할 수 있습니다. 특히, Modal과 같은 컴포넌트를 Context로 관리할 때는 Provider의 범

이 글은 (9 Playwright Best Practices and Pitfalls to Avoid)9 Playwright Best Practices and Pitfalls to Avoid를 번역한 글입니다Playwright를 사용하여 더 신뢰성 있고 효율적인 테스트를

검색 기능을 구현할 때 자주 마주치는 시나리오를 통해 TanStack Query의 캐시 관리 방법을 알아보겠습니다.검색 기능을 구현할 때 다음과 같은 요구사항이 있습니다:검색어가 변경될 때마다 새로운 데이터를 가져와야 함이전에 검색했던 검색어를 다시 입력할 때도 새로운

React 애플리케이션에서 빠르게 나타났다 사라지는 로딩 모달을 테스트할 때 발생하는 타이밍 이슈와 이를 Promise.all을 통해 해결하는 방법을 알아보겠습니다.먼저 테스트할 검색 컴포넌트의 예시 코드입니다:순차적 실행 방식은 다음과 같은 문제점이 있습니다:이 방식

React 애플리케이션 테스트에서 Jest는 오랫동안 신뢰받아 온 툴입니다. 하지만 최근에는 Vitest가 Vite 생태계와의 완벽한 통합과 빠른 성능으로 주목받고 있습니다. 두 테스트 러너를 비교하며, 어떤 상황에서 더 적합한지 알아보겠습니다. Vitest의 빠른

웹 애플리케이션을 개발하다 보면 상단은 가변적인 높이를, 하단은 고정된 높이를 가져야 하는 레이아웃을 자주 마주치게 됩니다. 대표적으로 채팅 애플리케이션의 메시지 영역과 입력창, 또는 긴 콘텐츠 영역과 고정 푸터가 있는 대시보드 등이 이러한 패턴을 사용합니다. 오늘은

React 애플리케이션을 개발하다 보면 다양한 에러 상황에 마주치게 됩니다. 네트워크 오류, 데이터 형식 오류, 잘못된 상태 업데이트 등 예상치 못한 에러들이 발생할 수 있죠. 이런 에러들을 어떻게 하면 효과적으로 처리할 수 있을까요? 오늘은 React의 Error B

웹 애플리케이션에서 모달, 팝오버, 툴팁과 같은 UI 요소들의 z-index를 관리하는 것은 생각보다 까다로운 작업입니다. 특히 여러 컴포넌트가 동적으로 생성되고 제거되는 상황에서는 더욱 그렇습니다. 이 글에서는 React의 Context API와 useRef를 활용하

웹 애플리케이션을 개발하다 보면 단순히 아이콘을 보여주는 것을 넘어서, 상황에 맞는 다양한 시각적 피드백을 제공해야 할 때가 있습니다. 특히 비활성화 상태의 표현은 사용자 경험에 중요한 영향을 미치는데, 오늘은 React와 TypeScript를 사용하여 CSS 필터를

MUI의 Popper를 사용할 때 다음과 같은 문제점들이 있습니다:다중 컴포넌트 문제:Popper, Fade, ClickAwayListener 각각 별도 import 필요번들 사이즈 증가불필요한 DOM 계층 구조 생성컴포넌트 간 상태 관리 복잡성getBoundingCl

로컬 개발 환경에서 프론트엔드 애플리케이션을 HTTPS로 실행할 때, HTTP 프로토콜을 사용하는 백엔드 API 서버에 직접 요청을 보내면 CORS(Cross-Origin Resource Sharing) 문제가 발생할 수 있습니다. 이번 포스팅에서는 Vite의 프록시

React Query(현재는 TanStack Query)는 비동기 데이터 fetching을 위한 강력한 라이브러리로, 서버와의 통신 및 데이터 캐싱, 상태 관리 등을 간편하게 처리할 수 있습니다.이전 버전(v4 이하)에서는 useQuery 훅 자체에 onSuccess,

오늘은 텍스트가 지정된 너비를 초과할 때 자동으로 툴팁을 표시하는 스마트한 컴포넌트를 Tailwind CSS로 구현하는 방법을 소개하겠습니다.웹 애플리케이션에서 제한된 공간에 긴 텍스트를 표시해야 할 때, 일반적으로 말줄임표(...)와 툴팁을 사용합니다. 하지만 텍스트

부제: 내 localhost 쿠키는 왜 저장되지 않고, API 응답은 보이지 않았을까?작성일: 2025년 4월 8일안녕하세요! 웹 개발 여정은 종종 예상치 못한 난관으로 가득 차 있죠. 최근 저는 로컬 개발 환경(http://localhost:3000, Nex

부제: CORS 헤더는 맞는데 왜 응답이 안 보일까? 범인은 내부에 있었다!(1편 요약) 로컬 환경(http://localhost:3000)에서 외부 API(https://api-something.com) 호출 시 쿠키 저장 문제의 원인(Secure,

부제: 토큰 방식으로 전환 후 얻은 깨달음과 보안에 대한 고찰(2편 요약) 크로스 오리진 쿠키 인증의 복잡한 CORS 규칙과 씨름하던 중, 응답 본문이 보이지 않던 현상이 크롬 개발자 도구의 'Preserve log' 옵션과 관련된 알려진 이슈임을 발견했습니다. 문제

대규모 데이터를 테이블 형태로 보여줘야 하는 웹 애플리케이션에서 성능은 사용자 경험에 매우 중요한 요소입니다. 특히 한 번에 수백, 수천 개의 행을 렌더링해야 할 경우, 브라우저는 버벅거리거나 심지어 멈춰버릴 수도 있습니다. 이러한 문제를 해결하기 위한 강력한 기술

1. 들어가며 서비스를 개발하다 보면 사용자에게 간단한 알림 메시지(예: 성공, 실패, 정보, 경고 등)를 띄워야 할 때가 많습니다. 이때 재사용 가능하고, 타입 안정성이 높으며, 여러 위치에서 쉽게 호출할 수 있는 Snackbar(스낵바) 시스템을 직접 구현하면,

이 글에서는 pnpm workspace와 Turborepo 기반 모노레포에서, SVGR을 활용해 SVG 아이콘을 React 컴포넌트로 자동 변환하여 사용하는 방법과, UI 공통 컴포넌트를 여러 앱(web 등)에서 효율적으로 사용하는 실전 워크플로우를 소개합니다.Reac

apps/web/package.json에 다음과 같이 추가되어 있다고 가정합니다.참고:실제로는 monorepo의 루트에서 pnpm install @repo/ui 또는 yarn workspace web add @repo/ui 등으로 설치합니다.Node.js와 현대적인 번