myinfo7091 님의 블로그

채팅 시스템 기록

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

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

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

프로젝트 개요Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기 주요 기능챔피언 정보 조회아이템 정보 조회금주의 챔피언 로테이션 정보 조회 프로젝트 셋업npx create-next-app@14 // 14버전 설치하기What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to..

지도에 커스텀 오버레이 생성하기  카카오맵 api 공식 문서를 참고해서 지도에 자유롭게 컨텐츠를 표시할 수 있는 커스텀 오버레이를 생성한다. 마커를 클릭할 시 식당의 상호명과 주소를 적당한 ui 안에 나타내기로 했다.   ◆ Custom Hook으로 분리하기  그 전에 점점 길어지고 있는 코드를 정리할 필요가 있었다. supabase에서 식당의 위도와 경도 정보를 가져와서 해당 좌표에 마커를 생성하는 지도 컴포넌트인데, 기능을 추가하다 보니 뭐가 참 많다(...) supabase에서 restaurants 테이블의 정보를 가져오는 부분은 다른 팀원들도 활용할 가능성이 있어서 따로 커스텀 훅을 만들면 좋을 것 같다. import { useEffect, useState } from 'react';import ..

게시글 작성 페이지_기능_이미지 업로드하기사용자가 로컬 시스템에서 이미지를 선택하고 업로드 전에 미리 볼 수 있는 이미지 업로더를 만들게 되었다. 목표 FileReader로 이미지 미리보기 생성하기이미지 입력을 사용자 친화적으로 만들기useState Hook로 이미지 상태 관리하기  const [imgPath, setImgPath] = useState(null); useState Hook를 통해 업로드된 이미지의 상태를 관리한다. 브라우저에서 이미지를 바로 렌더링해 미리보기하는 기능을 어떻게 구현할지 고민했는데, 비슷한 기능을 구현한 사례에서 FileReader를 사용해 base64 형식으로 변환하는 방법을 알게 되었다.   JavaScript FileReaderIn this tutorial, you'l..

팀 프로젝트: 뉴스피드 프로젝트 - 뉴스피드란?내 게시물을 포함한 모든 게시물을 볼 수 있는 공간실시간 정보 업데이트 기능 뉴스피드 프로젝트는 실시간으로 새로운 게시물이 올라오고 사용자가 쉽게 최신 정보를 확인할 수 있는 구조를 가진다. 데이터베이스와의 연동을 통해 정보 갱신 기능을 추가할 수 있다.사용자 맞춤형 피드 사용자의 관심사를 바탕으로 피드가 제공된다. ‘운동’에 관심이 많은 사용자에게는 관련된 게시물을 우선적으로 표시해줄 수 있다.소셜 상호작용 게시물에 댓글을 달고, 좋아요를 누르고, 공유하는 등 다양한 상호작용이 가능하다. 사용자 간의 관계 형성과 피드에 대한 활발한 참여를 유도할 수 있다.UI/UX의 중요성 사용자가 시각적으로 정보를 얻을 수 있어야 하므로 깔끔하고 효율적인 설계가 필요하다..