choijming21 님의 블로그

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. 문제 발생❓댓글 수정 기능 구현 중 UI 반응성 문제 발생수정 버튼 클릭 후 프로세스(문제 과정 설명)수정 후 완료 버튼 누르기수정 모드 종료기존 값 유지몇초 후 수정된 값으로 변경됨    2. 원인 추론 🔎서버 응답을 기다린 후 UI 업데이트React Query의 기본 동작을 그대로 사용원래 코드(주요 부분)const { mutate: edit } = useMutation({ mutationFn: ({ id, text }) => updateComment({ id, text }), onSuccess: () => { queryClient.invalidateQueries(["comments"]); alert("댓글이 수정되었습니다!"); }});const handleEditSubmit..

오늘은 뉴스피드 팀프로젝트의 발표날이다!따라서 어제는 트러블 슈팅을 진행하였다. 3가지 오류를 발견하였는데 그 부분에 대해서 블로그에 담아보겠다! 1. 배포 시, SVG 이미지 파일이 깨지는 문제2. 수정 완료 후 마이페이지 네비게이션 문제3. 로그인 페이지에서 뒤로가기 버튼의 위치 문제  ...  1. 배포 시, SVG 이미지 파일이 깨지는 문제 문제 설명: React 프로젝트를 Vercel로 배포할 때, SVG 이미지 파일이 제대로 렌더링되지 않고 깨지는 현상이 발생했다. 이는 주로 상대경로로 설정해서 문제이거나 스타일드 컴포넌트 사용시 동적 이미지 스타일링을 해서 문제점이 발생할 수 있다. 해결 방법: Lucide 아이콘 라이브러리 사용  이 문제를 해결하기 위해 Lucide 아이콘 라이브러리를 사..

작성 폼 페이지 기능 구현을 거의 다 완성하였지만 문제점이 생겼다.... 오늘은 그것에 대해서 어떻게 해결했는지 블로그에 담아보겠다!!     React에서 게시글 수정 시 이미지 파일 처리 문제와 해결 방안  1. 문제 상황게시글 작성과 수정시 모든 필드(이미지 포함)에 대한 빈칸 유효성 검사를 구현했다.수정 시 기존 이미지 파일을 Supabase에서 불러오는데 어려움이 있었다.이로 인해 사용자가 이미지를 변경하지 않더라도 새 이미지를 업로드 해야만 유효성 검사를 통과할 수 있는 문제가 발생했다. 2. 원인 분석Supabase에서 이미지 파일 자체를 불러오는 것이 기술적으로 복잡했다.파일 시스템이나 스토리지 서비스에서 직접 파일을 가져오는 것은 보안 및 성능 이슈를 이야기 할 수 있다. 3. 임시 해결..

내가 맡은 부분은 작성폼 페이지이다! 오늘은 작성폼 페이지 기능구현에 대해서 블로그를 써보겠다.          1. 상태 관리일단 상태관리는 useState 훅을 사용하여 폼데이터를 관리한다. 각 입력 필드에 대한 상태를 하나의 객체로 관리하고 있다.const [formData, setFormData] = useState({ storeName: '', image: null, address: '', region: '', rating: '', review: ''});     2. Context 사용PostContext를 통해 전역 상태를 관리하고 있다. 이를 통해 게시물 목록을 업데이트할 수 있다.const { posts, setPosts } = useContext(PostContext);   ..