myinfo7091 님의 블로그

채팅 시스템 기록

Supabase 실시간 데이터 타입 불일치 문제문제: payload.new의 타입이 Message와 맞지 않아 TypeScript 에러 발생.원인: Supabase의 실시간 이벤트에서 반환된 데이터(payload.new)는 기본적으로 any 타입으로 처리되며, 정의된 Message 타입과 불일치. Supabase에서 반환된 데이터 타입을 명시적으로 캐스팅해줌.const message = payload.new as Message;  Supabase-React 채팅 메시지 순서 문제 해결문제: 채팅 모달을 닫았다가 다시 열면 메시지 순서가 뒤섞임. Supabase에서 메시지를 가져오는 과정과 실시간 업데이트 로직에서 발생한 문제로 생각됨.원인: fetchMessages 함수에서 Supabase 쿼리에 명시적..

'(prev: { chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; }[]) => ({ chatroom_id: string; content: string; created_at: string; id: string; sender_id: string; } | { ...; })[]' 형식의 인수는 'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다. payload.new의 타입이 정확히 지정되지 않았기 때문에 에러가 발생한다. payload.new가 Supabase의 postgres_changes 이벤트로 전달된 데이터인데, 타입 추론이 제대로 이루어지지 않았다. payload.new에..

Zustand를 사용해서 모달 상태를 간단하고 효율적으로 관리할 수 있다. Zustand는 경량 상태 관리 라이브러리로, 전역 상태와 모달의 열림/닫힘 상태 관리에 적합하다.  1. Zustand 스토어를 설정해서 모달의 상태와 상태 변경 함수를 정의한다.import create from 'zustand';interface ModalState { isOpen: boolean; openModal: () => void; closeModal: () => void;}const useModalStore = create((set) => ({ isOpen: false, openModal: () => set({ isOpen: true }), closeModal: () => set({ isOpen: false..

Parallel RoutesParallel Routes는 Next.js 13(App Router)에서 병렬적으로 여러 UI를 렌더링하는 기능이다. URL 상태를 기반으로 모달과 페이지 콘텐츠를 분리하면서도 독립적으로 관리할 수 있다.  채팅 UI 구현을 위한 Parallel Routes 구성app/ layout.tsx // 전체 레이아웃 page.tsx // 기본 페이지 (대화 목록) @chat/ // 병렬 라우트 layout.tsx // 채팅 모달 레이아웃 [userId]/page.tsx // 특정 사용자와의 채팅 모달 1. 기본 레이아웃 (app/layout.tsx)import ..

회원가입회원가입 입력 폼입력정보에 대한 유효성 검사정규식을 포함한 유효성 검사입력 받았으면 supabase 회원가입 로직 작성UI 꾸미기로그인 로그인 입력 폼 입력정보에 대한 유효성 검사멘토 등록자기소개 입력 필드멘토취소커리큘럼 선택프로필 사진 업로드(supabase storage 연동)회원용, 멘토용 사 진 따로 두되 멘토 사진 등록 폼에서 회원용 사진도 불러올 수 있게 버튼 추가?분야 해시태그최대 3-5개 등록카테고리 역할일단 글자수 제한 ( 10 글자 )PDF 파일 업로드 (이력서) (도전)경력 폼 어떻게 구성할지?경력 입력을 위한 양식이 존재사용자가 추가하기? 버튼을 누르면 추가 경력을 입력하기 위한 양식 노출회사 이름, 직책, 근무기간 (날짜 인풋), 맡은 업무홈페이지헤더 푸터 공용 컴포넌트로 ..

구현 목표환경변수를 설정해서 API key를 사용한다.  문제점: Next.js 환경변수 설정 오류Next.js 환경변수를 설정했지만 undefined로 표시되거나 제대로 읽히지 않았다. 클라이언트 측 코드에서 환경변수를 접근하려 할 때 값이 설정되지 않는 문제라도 있는 것일까?  NextJS에서 환경변수 .env 사용하는 방법NextJS는 기본적으로 환경 변수를 지원하고 있으며, 사용하기가 매우 쉽습니다. 환경 변수가 필요한 이유 환경 변수가 필요한 이유는 우리가 웹 애플리케이션을 만들 때 개발 모드(development mode)와cpro95.tistory.com  원인 파악: 환경변수 접두사클라이언트에서 접근하려면 환경변수 이름에 NEXT_PUBLIC_ 접두사가 꼭 필요하다고 한다. 슬랙 공지를 통..

구현 목표리그 오브 레전드 아이템 정보 페이지에 사용될 아이템 카드 컴포넌트를 만들고 알맞은 이미지를 가져와서 사용한다.  문제점: 컴포넌트에서 버전 정보 전달 오류각종 이미지와 기본 URL 사용을 위해 constants.ts에 필요한 URL과 생성 함수를 정리했는데, ItemCards 컴포넌트에서 각 아이템에 해당하는 이미지가 로드되지 않았다. 확인한 내용은 아이템 이미지를 가져오기 위해 URL을 생성하는 getItemImgUrl 함수가 버전 정보를 필요로 한다는 것이다.// constants.ts 예시// Data Dragon API 기본 URLexport const API_URL = "https://ddragon.leagueoflegends.com";// 챔피언 스퀘어 이미지 URLexport co..

import ChampionCards from "@/components/ChampionCards";import { Champion } from "@/types/Champion";import { fetchChampionList, fetchVersion } from "@/utils/serverApi";export default async function ChampionsPage() { const version = await fetchVersion(); const championList: Champion[] = await fetchChampionList(); return ( 챔피언 목록 {championList.map((champion) =..

import { ChampionRotation } from "@/types/ChampionRotation";import { NextResponse } from "next/server";export async function GET() { const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY as string; if (!apiKey) { return NextResponse.json( { error: "API KEY를 찾을 수 없습니다." }, { status: 500, } ); } try { const response = await fetch( "https://kr.api.riotgames.com..

3. 메인페이지, 레이아웃 구성 및 네비게이션 추가페이지 설정 및 메인 페이지 구현경로: /기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.렌더링 방식: Static Site Generation (SSG)빌드 시점에 페이지를 정적으로 생성합니다.요구사항:글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.힌트:Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.Tailwind CSS를 활용하여 스타일링을 적용합니다.정적 콘텐츠이므로 SSG를 사용하여 빠른 로..