myinfo7091 님의 블로그

[최종 프로젝트] 기획 단계(2)

오전 피드백- 검색 기능은 query parameter를 활용하기- 홈 페이지에서 너무 많은 기능을 처리하지 않도록 하기 위해 따로 페이지를 생성하는 방향 고려하기- npm 라이브러리(예시: 웹 에디터) 선정은 패키지 비교를 활용해서 선정하기- 개발자는 이전에 구현해봤던 기능 반, 해보지 않은 기능 반 정도를 도전해보기- 수정 사항은 회의를 거친 후 확정이 되었을때 진행하기 - 회의를 거치지 않고 수정한 기능/디자인은 갈등으로 이어질 수 있으므로 꼭 사전에 팀원들과 공유하기오후 피드백- 기능 개발 방식에 대한 논의- 필터링 구현 방식 2가지1. supabase query 날리기2. 모든 데이터 받아와서 필터링 - query parameter 구현할때 검색 페이지가 있는 것이 선호 마이 페이지-> pral..

[최종 프로젝트] 기획 단계 (1)

프로젝트 명 : 피버러소개한 줄 정리 : 나의 스타일을 등록하고 다른 사람의 스타일 구매처를 확인하는 사이트내용 : 사용자들이 직접 코디한 룩을 등록하는프로젝트 핵심 기술룩북 형태로 스타일 사진을 업로드하고,오늘의 집 처럼 룩북 구매처를 연계시켜주는 어플리케이션, (상세 페이지 아래 부분에 작성자가 직접 등록하는 방식)커뮤니케이션 형성을 어플의 중심 기능으로 개발 예정CRUD 기능C: 자신만의 룩북 등록R: 다른 사람의 룩북 조회U: 룩 수정 및 코멘트 추가D: 룩북 삭제C: 자신만의 룩북 등록R: 다른 사람의 룩북 조회U: 룩 수정 및 코멘트 추가D: 룩북 삭제도전 개발 요소룩북별 스타일 점수 부여특정 룩북은 구매 가능 (즉시 거래)사용자 레벨업 시스템 (룩북 많이 교환할수록 상위 랭크)유튜브 룩북 큐..

채팅 시스템 기록

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