choijming21 님의 블로그

[ Troubleshooting🛠️ ] 여러개의 Atom을 하나로 통합

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

[ Troubleshooting🛠️ ] 모달 표시 문제 해결

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

[ Troubleshooting🛠️ ] 모바일 Swiper에서 absolute 요소가 깜박이는 현상 해결

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

도커(Docker)는 개발 환경을 빠르게 구축하고, 일관된 환경을 유지하는 데 매우 유용한 도구입니다. 여기서는 실무나 개인 프로젝트에서 자주 사용하는 도커 명령어들을 정리해보았습니다.   ✅ 도커 이미지 관련 명령어이미지 목록 확인docker images// 현재 로컬에 저장된 이미지를 확인할 수 있습니다.이미지 삭제docker rmi // 사용하지 않는 이미지 정리할 때 유용합니다.이미지 다운로드docker pull // ex: docker pull nginx:latest이미지 빌드docker build -t .// 현재 디렉토리의 Dockerfile을 기준으로 이미지를 빌드합니다.    ✅  컨테이너 관련 명령어컨테이너 목록 확인docker ps // 실행 중인 컨테이너docker ps -..

1. 문제 발생❓ 작업 브랜치 feat/remove-candid-section 에서 기능 개발을 마친 후, 테스트 브랜치인 stage에 가서 제 브랜치를 pull 받고, Vercel에 테스트 배포를 진행하였습니다. 그런데 예상치 못한 빌드 에러가 발생했습니다. 2. 원인 추론 🔎처음에는 타입 오류인 줄 알고 코드를 살펴보았는데, 오류 메세지를 자세히 보니 전부 주석에 관련된 것이었습니다:Error: Expected space or tab after '//' in comment. spaced-comment 1. 브랜치를 분기한 시점 🌱feat/remove-candid-section 브랜치를 main에서 ESLint 변경이 적용되기 전에 분기함.이 시점에서는 .eslintrc에 space-com..

프로젝트를 처음 시작하거나 기존 프로젝트를 리펙토링할 때, 가장 중요한 결정 중 하나는 폴더 구조를 어떻게 설계할 것인가입니다. 체계적인 폴더 구조는 코드의 가독성을 높이고, 팀원간 협업을 원할하게 하며, 프로젝트의 유지보수성을 크게 향상시킵니다.  그러나 많은 개발자들이 hooks, lib, utils, servies, api 같은 유사해 보이는 폴더들의 정확한 용도와 차이점에 대해 혼란을 느끼곤 합니다. 저도 마찬가지고요! "이 유틸리티 함수는 utils에 넣어야 할까, lib에 넣어야 할까?", "servies와 api 폴더의 차이점은 무엇일까?" 같은 질문이 자주 등장합니다.  그래서 이 블로그 포스트에서는 React 프로젝트에서 흔히 사용되는 주요 폴더들의 목적과 차이점을 명확히 설명하고, 각 ..