choijming21 님의 블로그

트러블 슈팅: 페이지 새로고침/이동 시 데이터 유지하기🌟

1.  문제 발생❓유저가 입력을 진행하던 중 실수로 새로고침을 하거나 뒤로가기를 했을 때 모든 입력 데이터가 초기화되어 supabase에 데이터 값이 null값으로 들어가는 문제가 발생했습니다.  const OneTimeContent = () => { const [formData, setFormData] = useState({ main_category_id: 0, sub_category_id: 0, user_id: userId, egg_pop_name: "", // ... 기타 초기값 });}      2.  원인 추론 🔎React의 state는 페이지 새로고침 시 모든 상태가 초기화 됨      3.  해결 과정 📋1) localStorage를 활용한 데이터 임시 저장 로직 구현/..

트러블 슈팅: API 중복 호출 방지🌟

1.  문제 발생❓에그팝, 에그클럽, 에그데이 생성 버튼을 여러번 누르면 생성된 상세페이지로 가기전에 여러개의 모임생성 완료 알랏창이 뜨면서 모임이 여러개 생기는 문제점이 있었습니다( 모임 생성 버튼 연속 클릭 시 중복 API 호출 발생 ).  모임 여러개 생기는 오류 영상      2.  원인 추론 🔎API 호출 제한 로직의 부재버튼 클릭 이벤트에 쓰로틀링(Throttling) 미적용     3.  해결 과정 📋1. useTrottle 커스텀 훅 구현  2. 모임 생성 API 호출 간격 300ms, 모임생성 다음단계 버튼은 20초으로 useTrottle 커스텀 훅 적용 Q. 모임생성과 모임생성 다음 버튼 시간을 다르게 준 이유는?데이터베이스 작업(모임 생성): 20초 쓰로틀링 - Supabase i..

1.  문제 발생❓Next.js 프로젝트 빌드 시 다음과 같은 에러가 발생했습니다.Export encountered errors on following paths:/(pages)/(club)/club/type-selection/create/one-time/page: /club/type-selection/create/one-time/(pages)/(club)/club/type-selection/create/regular-time/page: /club/type-selection/create/regular-timeerror Command failed with exit code 1.   // app/(pages)/(club)/club/type-selection/create/one-time/page.tsx"use..

1. 문제 발생❓Next.js 프로젝트에서 Supabase에 저장된 이미지를 Image 컴포넌트를 통해 불러오려고 했으나, 다음과 같은 에러가 발생했습니다.        next.config.mjsimport withPWA from "next-pwa";/** @type {import('next').NextConfig} */const nextConfig = { images: { domains: ["슈퍼베이스 도메인"] }};export default withPWA({ dest: "public", ...nextConfig}); ClubList.tsx"use client";import React, { useEffect, useState } from "react";import { getOne..

1. PWA란?PWA는 프로그레시브 웹 앱(progressive web app)의 줄임말입니다. PWA는 웹으로 개발된 사이트를 앱처럼 사용할 수 있게 하는 방법입니다. Next.js 공식문서에도 PWA를 적용하는 방법이 자세히 나와있습니다.https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps Configuring: Progressive Web Applications (PWA) | Next.jsLearn how to build a Progressive Web Application (PWA) with Next.js.nextjs.org    2. PWA 특징웹 플랫폼 기술을 사용하여 구축되었지만 플랫폼별 앱..

1.  자랑스러운 코드: 같은 장소의 여러 후기들을 한 그룹으로 묶어서 하나의 마커로 지도에 표시해줌! // 같은 위치의 후기들을 그룹화 const groupedData: GroupedData = useMemo(() => { const grouped: GroupedData = {}; filteredArticles.forEach((article: Article) => { // 각 후기의 위도와 경도를 결합한 고유 키 생성 const key = `${article.lat},${article.lng}`; // 장소에 대한 첫번째 후기 작성 시 빈 배열 생성 if (!grouped[key]) { grouped[key] = []; } ..

1. 문제 발생❓Git 저장소에 Supabase key를 올려버렸습니다...나중에 Git 저장소의 여러 브랜치에 걸처 키가 포함된 'supabaseClient.ts' 파일이 커밋되어 있음을 발견했습니다.알아차린 시점이 조금 늦었습니다.  pr도 올리고 머지 성공하고 각자 팀원들 작업하고 ... 하루 뒤에 알아버렸습니다.pr에도 기록이 남아있고, 개개인 브랜치에도 기록이 남아있는 상태입니다.(돌이킬 수 없는 강...을 건너버렸습니다...🥲)supabaseClient.ts에는 키와 같이 중요한 정보가 들어있어 보안 위험이 있어 노출되면 안됩니다.   2. 원인 추론 🔎개발 과정에서 하드 코딩 된 값을 사용했기 때문입니다.코드 리뷰 과정에서 이 문제를 발견하지 못했습니다.    3. 해결 과정 📋1. p..

1. 문제 발생❓원격 dev 브랜치에서 로컬 개인 브랜치 feat/mypage로 pull을 시도했을 때, 다음과 같은 문제가 발생했습니다.충돌이 발생하면서 rebase가 자동으로 시작됨.rebase 과정에서 기존에 작업 했던 footer 컴포넌트가 사라짐.브랜치 상태가 ''no branch, rebasing feat/mypage"로 변경됨.git config --global pull.rebase false 설정으로 문제 해결을 시도했으나 실패     2. 원인 추론 🔎Git 설정 문제: pull.rebase 설정이 true로 되어 있어 pull 시 자동으로 rebase가 실행되었을 가능성이 높아보입니다.로컬 브랜치와 원격 브랜치 사이에 많은 차이가 있어 충돌이 발생했을 수 있습니다.git add . 했..

오늘은 제가 최근에 완성한 리그 오브 레전드 정보 앱 프로젝트에 대해 소개해드리려고 합니다. Riot 개발자 사이트에서 제공하는 API를 활용하여 만든 이 앱은 Next.js와 TypeScript를 기반으로 하고 있습니다. 프로젝트를 진행하면서 겪은 경험과 구현 과정을 공유하고자 합니다.     # 시연 영상 📹︎리그 오브 레전드 정보 앱         1.  프로젝트 셋업 및 기본 구조 🌿프로젝트를 시작하기 위해 Next.js와 TypeScript를 사용하여 기본 구조를 잡았습니다. 여기에 Tailwind CSS를 추가하여 스타일링을 손쉽게 할 수 있도록 설정했습니다.       2.  데이터 Fetching 💿먼저 types/ 폴더를 만들어 그안에 디렉토리에 필요한 타입들을 정의했습니다. // ..

Next.js 는 지속적으로 발전하는 React 기반 웹 프레임워크입니다. 최근 버전에서 라우팅 시스템에 큰 변화가 있었습니다. 이 블로그 포스트에서는 Next.js의 새로운 라우팅 시스템, 특히 useRouter의 대체제인 usePathname, useSearchParams, useParams 그리고 useRouter의 주요 메서드들에 대해서도 자세히 알아보겠습니다.     1. useRouter 란?useRouter는 Next.js에서 제공하는 훅 중 하나로, 현재 페이지의 라우터 정보에 접근할 수 있게 해줍니다. 이를 통해 URL의 정보를 얻거나, 프로그래밍 방식으로 페이지 간 이동을 할 수 있습니다.  ⭐⭐⭐⭐⭐   useRouter는 오직 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포..