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.  해결 과정 📋웹 스토리지(Web Storage)의 특징과 사용 사례 검토sess..

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

안녕하세요. 오늘은 아웃소싱 팀프로젝트 발표날입니다. 저희팀은 "Park Finder"라는 주차장을 쉽고 빠르게 찾을 수 있는 서비스를 만들었습니다. 팀프로젝트에서 만들게 된 "Park Finder"서비스를 블로그에 담아보겠습니다!     프로젝트 목적 📝카카오 API를 활용하여 사용자에게 가장 가까운 주차장을 실시간으로 제공하고, 지도 상에 정확한 위치를 표시하여 사용자 편의를 극대화하는 것을 목표로 했습니다. 또한, 빠른 검색 속도와 직관적인 UI, 최신 주차장 정보 제공을 통해 기존 지도 서비스와 차별화된 경험을 제공합니다. 이를 통해 사용자는 실시간 위치 기반으로 주차장을 쉽게 검색하고 정보를 확인할 수 있습니다!     프로젝트 팀 구성 및 역할 👥조아영 (팀장): 주차장 지도 기능(카카오 ..

1. 문제 발생❓사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.     2. 원인 추론 🔎원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.원래 코드(주요 부분)const Comments = () => { const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore(); const { token, us..