choijming21 님의 블로그

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

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

1.  문제 발생❓필터 버튼을 처음 누를 때마다 "로딩 중..." 메세지가 잠시 표시됨이는 새로운 데이터를 가져오는 동안 isLoading 상태가 true가 되기 때문사용자 경험을 저하시키고 화면이 깜빡이는 느낌을 줌// useChart.tsexport const useChart = (chartType: ChartType) => { return useQuery({ queryKey: ["melonChart", chartType], queryFn: () => fetchChart(chartType), staleTime: 1000 * 60 * 5, // 추가 옵션 없음 });};    2.  해결 과정 📋Tanstack Query가 제공해 주는 placeholderData 옵션 사용하..

Next.js 프로젝트에서 melon API를 연결할 때 발생할 수 있는 CORS 이슈와 해결 방법을 단계별로 설명해보려고 합니다. 그러면 먼저 CORS가 무엇인지 부터 알아야 할텐데요! 🌍 CORS란? CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미하며, 서로 다른 출처의 웹 페이지나 서버가 자원에 접근할 수 있도록 허용하는 보안 메커니즘입니다.    1.  문제 발생❓ 웹 브라우저에서 Next.js 클라이언트 코드가 로컬 API 서버(http://localhost:5000)에 직접 요청하면 아래와 같은 CORS 오류가 발생할 수 있습니다.Access to XMLHttpRequest at 'http://localhost:5000/api/v1/chart/..

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.  문제 발생❓ 제 프로젝트에서는 네비게이션바(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..