choijming21 님의 블로그

클릭 이벤트 방지하기

🧲 드래그 중 클릭 방지 기능 추가로 사용자 경험 개선하기 (React Carousel) 캐러셀 컴포넌트에서 마우스를 드래그하여 슬라이드를 넘기는 UX는 모바일/PC 모두에서 매우 자연스럽습니다. 그런데 종종 슬라이드를 드래그하다가 클릭 이벤트가 발생해 페이지가 이동되는 문제가 발생합니다. 이번 블로그에서는 React 기반 Carousel 컴포넌트에서 드래그 중 onClick 이벤트가 발생하지 않도록 방지하는 방법을 공유합니다. 🎯 문제 상황사용자가 슬라이드를 넘기기 위해 마우스나 터치로 드래그할 때,의도하지 않게 onClick 이벤트가 실행되면서,링크 이동이 발생해 UX가 망가짐 ✅ 목표드래그 동작과 클릭 동작을 구분드래그 중에는 링크 이동 금지클릭 이벤트는 짧은 시간 + 작은 이동 거리일 때만..

1. 문제 발생❓제가 작업한 브랜치를 메인에 머지한 후 배포를 한 상태였습니다. 그런데 PM님의 "기능 QA 해본 다음 안전하게 배포하는 것이 좋을 것 같습니다. 롤백 요청드립니다." 라는 요청으로 메인에 머지된 제 작업물을 다시 되돌려야 하는 상황이었습니다. 배경디자인 시스템 적용 PR #1463이 main에 머지됨(commit: 4c2011784)이후 PM님의 전체 롤백 요청이 들어옴기능 QA 이후 작업 내용 다시 메인에 배포할 예정 2. 해결 과정 📋GitHub에서 PR #1463의 머지 커밋(4c2011784) 확인main 브랜치에서 다음 명령어로 머지 커밋 리버트 수행git revert -m 1 4c2011784-m 1 옵션은 머지 커밋 기준을 main으로 잡는 의미 (부모 1)리버트 ..

1. 문제 발생❓react-draggable에서 제공해주는 Draggable 기능을 일반 버튼에 추가했더니 드래그는 잘 작동하지만 원래의 onClick 이벤트가 제대로 발생하지 않음드래그 기능과 버튼 클릭 이벤트를 분리했더니 웹에서는 드래그와 클릭이 모두 작동했지만, 모바일에서는 버튼 클릭 기능이 작동하지 않음 2. 원인 추론 🔎드래그 이벤트가 클릭 이벤트를 가로채는 현상이 발생하고 있습니다. 이는 이벤트 전파(event propagation) 과정에서 드래그 이벤트 핸들러가 클릭 이벤트를 소비(consume)해버리는 이벤트 버블링 이슈로 판단됩니다. import { useAtom } from 'jotai';import { isRenderedAtom } from '@/components/Landi..

1. 문제 발생❓be, fe, ai 세 개의 페이지 설명회 모달 작업 중세 페이지 모두 remoteConfig 또는 orientation 값이 null일 경우 모달이 표시되지 않도록 조건부 렌더링을 설정했습니다.be, fe 페이지는 필요한 데이터(remoteConfig, orientation)를 정상적으로 받아와 설명회 모달이 표시됩니다.ai 페이지는 현재 설명회가 없어 관련 데이터가 전달되지 않으므로, 모달이 표시되지 않는 것이 의도한 동작입니다.ai 페이지에서는 예상대로 모달이 표시되지 않았지만, ai → be 또는 ai → fe로 페이지 전환 시 모달이 정상적인 위치에서 나타나지 않고 즉시 표시되는 현상이 발생했습니다.이 과정에서 세 페이지의 팝업 상태를 하나의 아톰(atom)으로 관리하고 있다는..

1. 문제 발생❓ 데스크탑일 때는 괜찮은데, 모바일 환경에서 내부의 absolute 요소인 가 슬라이드 가로 스크롤 시 깜박이며 사라졌다 다시 나타나는 현상이 발생했습니다. 2. 원인 추론 🔎import styled from '@emotion/styled';import { DESKTOP } from '@/styles/themes';export const Background = styled.section` width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 16px; ${DESKTOP} { gap: 20px; }`;export const SwiperButton = styled.button` cu..

Next.js 프로젝트에 Tailwind CSS를 설치하는 과정에서 "npx tailwindcss init -p" 명령어를 실행했을 때 "could not determine executable to run" 오류가 발생하는 경우가 있었습니다. 이 글에서 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다!    1.  문제 발생❓Next.js 프로젝트를 설정하고 Tailwind CSS를 설치한 후 초기화 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다.npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/username/..

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..

1.  문제 발생❓ 제 프로젝트에서는 네비게이션바(GNB)의 버튼들이 두 가지 다른 기능을 수행해야 했습니다:특정 섹션으로 자동 스크롤 되는 버튼 ( "/ " => 해당 섹션으로 이동 )새로운 페이지로 이동하는 버튼 ( "/resource" ) 이러한 두 기능을 사용하는 버튼이 각각 있었는데, 문제는 페이지 이동 후에도 원래의 페이지에서 자동 스크롤 기능을 유지해야 한다는 점이었습니다. 즉, 다른 페이지에서 특정 섹션으로 이동하는 버튼을 클릭 했을 때, 메인 페이지로 이동한 다음 해당 섹션으로 자동 스크롤 되어야 했습니다.    2.  해결 과정 📋 이 문제를 해결하기 위해 useNavigationHandler 커스텀 훅을 개발했습니다. 이 훅은 버튼 클릭 시 동작을 결정하고, 필요에 따라 페이지 이동..

1.  문제 발생❓TypeScript에서 MutableRefObject 타입을 사용하는 Lnb 컴포넌트에서 refs.current를 배열처럼 처리하려고 할 때 문제가 발생했습니다. PdpRefs는 Map 타입으로 정의되어 있지만, 실제로는 숫자 인덱스(0, 1, 2, 3 등)로 접근할 수 있는 객체로 동작했습니다.// 타입 정의export type PdpRefs = Map;// 컴포넌트에서 시도한 코드{refs.current.map((ref, index) => { // 오류: 'map' 속성이 없습니다 // ...})}   2.  원인 추론 🔎TypeScript 타입으로는 PdpRefs가 Map 객체로 정의되어 있음실제 런타임에서 refs.current는 다음과 같은 특성을 보임Object.keys(..

안녕하세요! 오늘은 제가 프로젝트에서 마주친 반응형 이미지 렌더링 문제와 해결 방법에 대해 공유하려고 합니다.  1.  문제 발생❓제 프로젝트에서는 breakpoint가 768px로만 설정되어 있었지만, 이미지는 mobile, tablet, desktop 세 가지 디바이스 크기에 맞춰 렌더링해야 했습니다. 이런 요구사항을 어떻게 효율적으로 구현할지 고민하던 중 HTML의와 태그를 알게 되었습니다.   2.  해결 과정 📋HTML5에서 도입된 태그는 다양한 화면 크기와 해상도에 맞는 이미지를 제공하는 강력한 방법입니다. 이 태그는 태그와 함께 사용하여 미디어 쿼리에 따라 적절한 이미지를 자동으로 선택해 줍니다. import React from "react";import { DesktopViewCon..