운현 운현

사이드프로젝트

• 13. Pagination

  사이드프로젝트 2024. 7. 24. 04:54

  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 "@/..

  Read More
• 한글 두번씩 입력되는 버그해결

  사이드프로젝트 2024. 7. 24. 03:56

  지금까지 만든 프로젝트에서 한글이 두번씩 입력되는 버그가 있다.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..

  Read More
• 12. Arrow down & notification

  사이드프로젝트 2024. 7. 24. 02:58

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

  Read More
• 11.실시간 통신

  사이드프로젝트 2024. 7. 23. 20:51

  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에 관한 부분이 있..

  Read More
• 10. 메세지 수정

  사이드프로젝트 2024. 7. 23. 17:01

  https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글 ---이어서 수정기능을 만들어준다. Shad cn에서 dialog를 검색하고 인스톨해준다.https://ui.shadcn.com/docs/components/dialog DialogA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.ui.shadcn.comnpx shadcn-ui@latest add dialog 이걸 설치하고, 예시코드를 붙여넣어보면 label이 없다고 빨간줄이 그일텐데, label도 검색해서 install 해준다.http..

  Read More
• 9. Message Delete

  사이드프로젝트 2024. 7. 23. 03:34

  https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글----- 저번시간에 Message Menu를 만든거에 이어서 Delete를 만들거다.먼저 ShadCN에 가서 Alert Dialog를 검색하고 인스톨해준다.https://ui.shadcn.com/docs/components/alert-dialog Alert DialogA modal dialog that interrupts the user with important content and expects a response.ui.shadcn.comnpx shadcn-ui@latest add alert-dialog 그리고 새로운 컴포넌트를 만들어줄거다.components/MessageActi..

  Read More
• 8.Message Menu

  사이드프로젝트 2024. 7. 22. 21:41

  https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하며 정리하는 글---메세지를 수정하거나 삭제하는 등을 할 수 있게끔 해보자. 가장 먼저 수정/삭제등의 버튼이 있어야겠지.... 표시를 누르면 수정 삭제등의 버튼이 모달?로 나와서 수정 및 삭제할 수 있게해주는 걸 우선 만들어보자.shadCn에서 dropdown menu를 검색해 인스톨해준다.https://ui.shadcn.com/docs/components/dropdown-menu Dropdown MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a button.ui.shadcn.comnpx sh..

  Read More
• 6. 메세지 리스트 표시하기

  사이드프로젝트 2024. 7. 22. 19:21

  https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 실습하는 영상 ----- 이제 채팅들을 화면에서 보여주는 걸 만들건데, 우선 쉽게 관리하기 위해 컴포넌트 두개를 새로 만들어준다.components/ListMessages.tsxcomponents/ChatMessages.tsx그리고 이전에 app/page.tsx에서 채팅들을 표시주는 부분을 긁어와서 ListMessages.tsx 컴포넌트에 넣어주고, 이를 다시 ChatMessages.tsx 컴포넌트에서 가져온다. page.tsx에서는 이부분을 새로만든 컴포넌트로 대체해준다. // components/ListMessages.tsx"use client";import React from "react";const..

  Read More