운현 운현

이제부터는 동영상강의를 벗어나서 프로젝트를 수정하고, 개선해나가겠다.먼저 해야할 일을 뽑아보자면1. 메세지 옆 Invalid Date 에러처리 (Optimistic Update될때)2. 현재 소켓에서 디비의 상태를 감지해서 상태 업데이트를 해주고 있는데, 아무래도 느림. 웹소켓방식으로 바꿔줄것.2-1. 이렇게 할 때, 메세지들의 저장 타이밍 및 중복되지 않게 인서트3. 현재 단일 채팅방인데, 멀티 채팅방 만들기. 구조는 보통 게임에서 하는 것처럼, 전체 채팅방이 하나 있고 방들이 여러개 보이고, 클릭해서 입장할 수 있게.4. 본인 아이디로 큐알코드 생성.5. 본인이 큐알코드를 보여주고 상대편이 큐알코드를 스캔하면 즉시 1:1 대화방 둘다 입장.

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 정리하며 쓰는 글----- 이제 배포를 하자. 배포하기 전에 로컬에서 npm run build로 빌드가 잘 되나 미리 확인해보는 게 좋다.vercel에서 배포해줄거다. vercel로 이동 => new => projectImport 해준다. 여기 목록에 없으면 아래의 Import Third-Party Git Repository => URL 복사 => 붙여넣기. Branch 잘 확인해주기. 그리고 배포를 위한 새로운 깃 레포지토리를 만들라고 하는데, 만들면 자동으로 빌드가 시작된다.이제 앞으로 배포할 일 있을 때, 저 레포지토리의 메인 브랜치에다가 푸시하면 자동으로 배포가 된다.그런데, 예전에는 환경변수 (...

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 정리하며 쓰는 글---저번시간에 이어 로그아웃을 만든다.현재 로그아웃을 해도 로그아웃 버튼이 로그인 버튼으로 바뀌기만 할뿐, 나머지 화면은 그대로다. 이걸바꿔줘보자.가장먼저 지난시간에 presence로 현재 접속중인 유저들이 몇명인지를 표시해줬는데, 로그아웃을 해도 상태가 그대로다.이건 왜그러냐면 로그아웃을 하는 components/ChatHeader.tsx로 가보면,await supabase.auth.sighOut()을 하고 router.refresh()를 해주고 있긴 하다.하지만 현재 user의 상태는 zustand로 전역적으로 관리해주고 있다. 이거에 대한 별다른 조치를 취해주고 있지 않기때문에 여전..

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글--- 다음으로 접속자 상태를 알 수 있는 걸 만들겠다. 먼저 components/ChatPresence.tsx 파일을 만들어주고, 기존 components/ChatHeader.tsx에서 온라인 상태를 표시해주던 부분을 가지고와 대체해준다. components/chatPresence.tsximport React from "react";const ChatPresence = () => { return ( 2 Online );};export default ChatPresence; components/ChatHeader.tsx"use client";impo..

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글----- 지금은 처음 접속할 때 모든 대화를 한번에 가져오고 있는데, 이게 아니라 페이지네이션으로 20개만 가져오도록 하겠다. 데이터가 너무 많으면 한번에 가져와서 처리하는 것보다 순차적으로 가져와서 처리하는 게 부담도 안가고 좋기때문이다. // components/ChatMessages.tsximport React, { Suspense } from "react";import ListMessages from "./ListMessages";import { createClient } from "@/utils/supabase/server";import InitMessages from "@/..

지금까지 만든 프로젝트에서 한글이 두번씩 입력되는 버그가 있다.https://velog.io/@euji42/solved-%ED%95%9C%EA%B8%80-%EC%9E%85%EB%A0%A5%EC%8B%9C-2%EB%B2%88-%EC%9E%85%EB%A0%A5%EC%9D%B4-%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0 MMZ 일지 19. 한글 입력할 때 2번 입력이 되는 경우 in React, TypescriptIME에 의해 발생하는 오류에 대한 설명과 해결법velog.io이 글을 보고 도움을 받아 해결했다. // components/ChantInputMessage.tsxreturn ( { if (e.key === "Enter" && e.native..

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글 --- 다음으로 스크롤을 올렸을때 제일 밑으로 내려오게하는 화살표 모양을 만들겠다. components/ListMessages에 들어가 작업해준다."use client";import { IMessage, useMessage } from "@/lib/store/messages";import React, { useEffect, useRef, useState } from "react";import Message from "./Message";import { DeleteAlert, EditAlert } from "./MessageActions";import { createClient } fr..

https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하는글 ---지금까지 만든건 기능이 작동하긴 하지만 실시간이 아니다. optimistic update로 개인이 보기엔 실시간인 것처럼 보이지만, 채팅앱은 실시간으로 정보를 주고 받아야 한다. 이제 실시간으로 만든다.사실 내가 이 프로젝트를 실습하게 된 가장 결정적인 이유다. https://supabase.com/docs/reference/javascript/subscribe Subscribe to channel | SupabaseCreates an event handler that listens to changes.supabase.com여기로 들어가보면 channel subscribe에 관한 부분이 있..