choijming21 님의 블로그

[ Troubleshooting🛠️ ] 롤백시키기

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

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

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