choijming21 님의 블로그

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

🚀 무한 캐러셀 구현스터디 카드 리스트에 적용한 반응형 캐러셀 컴포넌트스터디 카드 리스트에서 사용자의 시선을 끌기 위한 UI 요소로 무한 캐러셀을 도입했습니다. 이번 포스트에서는 React + styled-components 조합으로 구현한 무한 캐러셀 컴포넌트의 핵심 구조와 작동 방식을 정리해보려 합니다. 🎯 요구 사항한 화면에 3~4개의 카드를 보여줌(모바일/데스크탑 대응)우측 화살표 버튼 클릭 시, 다음 카드 세트를 자연스럽게 보여줌카드가 끝에 도달하면 다시 첫 세트를 이어붙여 무한 캐러셀처럼 동작transition 애니메이션 적용 🧱 구조 설계1. Carousel Track - 움직이는 레일export const CarouselTrack = styled.div` display: fle..

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. 문제 발생❓"menuList"는 GNB에 노출되는 메뉴리스트 배열입니다. menuList는 유저의 상태에 따라 다르게 배열이 넘어옵니다. 저는 강의를 완료한 "gradeate" 졸업생이었기 때문에 일부 메뉴리스트 예를 들어 "학습 관리" 메뉴는 들어갈 수 없는게 맞습니다. 그래서 들어갈 수 없는 일부 항목(ex: 출결/학습 관리)은 객체 안에 url 없이 message만 있습니다. (즉, 탭 자체는 보이지만 접근 불가능한 상태) [ { name: '신청한 강의', url: '/mypage/apply-status' }, { name: '학습 관리', message: '합격하신 분들 한해서 사용할 수 있습니다.' }, // ❗ url 없음 { name: '선물함', url: '/mypage/re..

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

프론트엔드 개발을 하다보면 json(), JSON.parse(), Json.stringify() 그리고 Promise를 정말 자주 마주치게 됩니다. 처음에는 비슷하게 생겨서 헷갈리기 쉽지만, 각각의 목적과 사용법은 분명히 다릅니다. 이 글에서 이 네 가지를 개념과 예제를 중심으로 정리해보겠습니다! 1. response.json() - 서버 응답을 객체로 바꾸기fetch()로 서버에 요청을 보냈을 때, 응답(response)은 Response 객체 형태로 돌아옵니다. 이때 response.json()을 사용하면 응답 본문(body)을 JavaScript 객체로 변환할 수 있습니다. 📌 예제:const response = await fetch('http://api.example.com/user');co..

안녕하세요. 프론트엔드 개발을 하다 보면 클래스(Class)와 모듈(Module)이라는 개념을 자주 접하게 됩니다. 두 개념 모두 코드를 조직화하는 데 도움을 주지만, 각각의 용도와 시기가 다릅니다. 이번 포스트에서는 실제 예시를 통해 클래스와 모듈의 차이점을 명확히 이해해 보도록 하겠습니다!-! 🚀 클래스(Class)란 무엇인가?클래스는 객체를 생성하기 위한 템플릿 또는 설계도입니다. 쉽게 말해, 비슷한 속성솨 메서드를 가진 여러 객체를 만들어야 할 때 사용하는 도구입니다.class Person { private name: string; private age: number; constructor (name: string, age: number) { this.name = name; this...

1. 문제 발생❓모달 구현 작업 중 예상치 못한 문제가 발생했습니다.be, fe, ai 세 페이지에서 각각 독립적으로 모달이 표시되어야 하고 상태 관리도 개별적으로 이루어져야 하는데한 페이지에서 모달이 표시된 후에는 다른 페이지에서 모달이 더 이상 나타나지 않는 버그를 발견했습니다.구체적으로, be 페이지에서 모달을 한 번 띄운 후 다른 페이지로 이동하면 해당 페이지에서는 모달이 표시되지 않는 현상이 발생했습니다. 2. 원인 추론 🔎모달 상태관리를 살펴보았습니다:세 페이지의 모달의 상태를 하나의 atom으로 관리하고 있었습니다.하나로 관리하고 있기 때문에 isAlreadyModal이 true 바뀌면서 다른페이지에서도 이미 true값이기 때문에 모달의 띄어지지 않았던..

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..