운현 운현

사이드프로젝트

• supabase google 연결

  사이드프로젝트 2024. 8. 30. 16:27

  https://supabase.com/docs/guides/auth/social-login/auth-google?queryGroups=environment&environment=client Login with Google | Supabase DocsUse Sign in with Google on the web, in native apps or with Chrome extensionssupabase.com 프로젝트 ID : 프로젝트 -> Settings -> General -> ReferenceID를 넣어주면 된다 나중에 앱 게시할 때 여기서. url query의 프로젝트id는 자신에게 맞게 변경해주기.https://console.cloud.google.com/apis/credentials/consent?..

  Read More
• 20. Message Websocket Broadcast방식으로 바꿔주기 2

  사이드프로젝트 2024. 7. 30. 16:28

  이어서 Edit과 Delete도 Broadcast방식으로 바꿔주겠다. // components/MessageActions.tsxconst handleEdit = async () => { const text = inputRef.current.value.trim(); if (text) { const edittedMessage = { ...actionMessage, text, is_edit: true, } as IMessage; optimisticUpdateMessage(edittedMessage); const { error } = await supabase .from("messages") .updat..

  Read More
• 19. Message WebSocket Broadcast 방식으로 바꿔주기 - 1

  사이드프로젝트 2024. 7. 30. 14:16

  다음으로 기존에 디비가 바뀐걸 감지하고, 메세지를 표시해주는 방식을 바꿔주기로 하겠다.이 걸 왜 바꿔주냐면, 디비에 접근하는데는 아무래도 시간이 좀 걸리기 때문에 메세지를 빠르게 입력하면 모든 내용을 표시해주는 게 아니라 몇개가 씹히는 현상이 있다. 이걸 웹소켓 Broadcast방식으로 바꿔줘보자.https://supabase.com/docs/guides/realtime/broadcast Broadcast | Supabase DocsSend and receive messages using Realtime Broadcastsupabase.com먼저 메세지를 보내는 부분부터 바꿔주자. 먼저 보내는 부분부터.위 공식문서에 보면, 메세지를 보내는 방식은 두가지가 있다. 첫번째는 채널을 구독하고 보내는 방식, 두..

  Read More
• 18. Invalid Date 버그처리

  사이드프로젝트 2024. 7. 29. 06:32

  먼저 메세지를 입력했을 때, Invalid Date가 나오는 버그를 고쳐보겠다.이게 Invalid Date가 표시되는 이유는 메세지를 넣어줄 때,1. DB에 인서트 할 객체를 만들어 DB에 추가를 해주고2. Optimistic Update를 해주는데, 이 1과 2사이에서 넣어주는 객체가 각각 다르다. // components/ChatInput.tsxconst newMessage = { id: uuidv4(), text, // user_id: user?.id, is_edit: false, // created_at: new Date().toISOString(), }; const { data, error, status } = await supabase ..

  Read More
• 17. 앞으로 개선사항

  사이드프로젝트 2024. 7. 29. 06:08

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

  Read More
• 16. 배포

  사이드프로젝트 2024. 7. 26. 03:11

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

  Read More
• 15. Logout

  사이드프로젝트 2024. 7. 26. 01:36

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

  Read More
• 14. Presence (현재 접속자)

  사이드프로젝트 2024. 7. 25. 22:08

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

  Read More