choijming21 님의 블로그

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

1. 문제 발생❓ Next.js 프로젝트에서 랜딩 페이지 템플릿을 개발하던 중, 페이지 최상단에 overflow: hidden 속성을 추가하고 싶었으니 이를 적용하자 Lnb 컴포넌트(sticky 네비게이션 바)가 제대로 동작하지 않는 문제가 발생했습니다. // 문제가 있는 코드export default function Template({ userInfo }: Props) { // ... 코드 생략 ... return ( {/* 나머지 콘텐츠 */} );} 2. 원인 추론 🔎해당 문제의 원인은 CSS positon: sticky와 overflow: hidden 사이의 상호작용에 있었습니다. Lnb 컴포넌트는 내부적으로 positio..

React 상태 관리의 가벼운 대안인 Zustand는 Redux보다 훨씬 간결하고, Context API보다 더 강력한 상태 공유를 제공합니다. 🐻 Zustand란?독일어로 "상태(state)"를 뜻함Minimal한 API, boilerplate 없는 사용성글로벌 상태를 말들되, context나 provider없이도 동작함비동기 로직, 미들웨어, 퍼포먼스 최적화도 지원 1. 📦 Zustand 기본 사용법설치npm install zustand 스토어 만들기import { create } from 'zustand'interface CountState { count: number; increase: () => void; reset: () => void;};const useStore = crea..

데이터 검색 성능은 웹 애플리케이션의 사용자 경험에 직접적인 영향을 미치는 중요한 요소입니다. 특히 데이터 목록이 많아질수록 검색 알고리즘의 효율성이 더욱 중요해집니다. 이 글에서는 JavaScript에서 배열의 includes() 메서드와 Set 객체의 has() 메서드의 차이점을 살펴보고, 실제 사용 사례를 통해 성능 최적화 방법을 알아보겠습니다. ✅ 배열과 Set의 기본 개념 ☑️ 배열(Array)배열은 JavaScript에서 가장 기본적인 자료구조로, 여러 값을 순서대로 저장합니다. 배열에서 특정 값을 찾을 때는 주로 includes() 메서드를 사용합니다.const favorites = ["BTC", "ETH", "XRP"];console.log(favorites.includes("BTC"..

1. 문제 발생❓ Next.js 프로젝트에서 다크 모드를 구현하면서 겪었던 가장 큰 문제는 페이지 새로고침 시 발생하는 깜박임 현상이었습니다. 초기 렌더링 시 테마가 제대로 적용되지 않아 사용자 경험에 부정적인 영향을 미쳤습니다. 2. 원인 추론 🔎"use client";import { useThemeStore } from "@/store";import { useEffect, useState } from "react";const ThemeToggle = () => { const { theme, toggleTheme } = useThemeStore(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounte..