운현 운현

분류 전체보기

• 3. 스키마생성

  MERN Stack ChatApp 2024. 7. 31. 17:59

  https://www.youtube.com/watch?v=3wi_fScbF1Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=6 몽고디비 스키마를 생성했다. (몽구스 사용)별 특별한 건 없고, chatModel : 채팅방의 정보. - isGroupChat이라는 칼럼을 만들어 그룹챗인지 아닌지 알 수 있도록 만드는 부분이 흥미로웠다. - lastestMessage : 이 채팅방에서 마지막으로 보내진 메세지를 표시하는 부분인 거 같은데, 이걸 따로 칼럼으로 빼주는 건 별로 생각못했었는데 좋은 것 같다. 역시 NoSQL인가 messageModel : 메세지의 정보. 특별한 건 없다. 유저와 채팅방의 정보를 각각 외래키로 가지고 있고, 콘텐츠(메세지 내용)도 가지고 있다.us..

  Read More
• 2. 프론트와 연동

  MERN Stack ChatApp 2024. 7. 31. 17:13

  https://www.youtube.com/watch?v=3wi_fScbF1Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=6를 보며 챗웹 만들기를 하고 있다. 그런데 위 동영상에서 리액트를 쓰는데, 리액트 버전이 너무 오래되고, 라우터 형식이라던지 여러가지가 옛날거라서 새롭게 nextJs로 바꿔주며 하고있는데, 생각보다 분투하고있다. 뭐 진도에 관해서는 특별히 쓸 내용이 많지는 않고, 새롭게 알게된 내용이라던지 이런걸 써줘보겠다. 1. 서버와의 연동사실 그동안 nextJs로 뭔가를 만들때는 거의 서버를 따로 만들지 않고 서버컴포넌트를 이용해 풀스택으로 만들었었기 때문에 이번처럼 서버를 따로 만들고 연동해줘보기는 처음이다. (사실 하면서, 그리고 지금도 그냥 expr..

  Read More
• MERN Stack으로 챗앱만들기 - 1.서버가동

  MERN Stack ChatApp 2024. 7. 31. 14:30

  MERN 스택으로 챗앱만들기를 하려 한다.MERN 스택하면 예전에 유행?이었지만 이제 지나간 느낌이 없지 않긴한데 유튜브를 보며 따라 만들어보려한다.이걸 하는 이유는 최근에 NextJS 14 + Supabase로 채팅방 만들기 사이드프로젝트를 하는데,웹소켓에 대한 이해가 좀 떨어지다보니(물론 supabase에서 사용하는거랑 살짝 다르긴하지만)약간 난항을 겪고있다고해야하나.하면서도 좀 이상한 느낌도 들고 해서, https://www.youtube.com/watch?v=29FEesnQrjA&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=4이분의 강의를 보며 따라만들어보려 한다.현재 express로 서버 가동하는 것까지 했는데, 예전생각도 나고 재밌다. 그런데 강의에서는 프..

  Read More
• BOJ 20437 - 문자열 게임2

  PS 2024. 7. 31. 09:26

  https://www.acmicpc.net/problem/20437 생각한대로 풀려서 기분이 너무 좋았다. findLongestSubArray문제를 풀어봤던 것이 도움이  됐다. 알파벳이 몇개 나왔나 카운트 하는 배열이 있고,어떤 글자가 어떤 인덱스에 나왔다 저장하는 벡터 배열을 만든다.vector loc[30]; // 어떤 글자가 나온 인덱스들을 저장    ex) a가 2, 5, 8번 인덱스에 나왔다면 loc[0] = {2,5,8}; 그리고 글자수를 돌아가며 카운트를 세고, loc에 각각 나온 인덱스를 저장해준다.그러다가 카운트가 k개 이상이 나오면, 현재 인덱스와 loc의 마지막에서 k개만큼 빼주면, k개 이전의 인덱스가 나온다.그럼 이제 현재 인덱스 - 이전에 같은 글자가 나왔던 인덱스 + 1을 해..

  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
• BOJ 15989 - 1, 2, 3 더하기 4

  PS 2024. 7. 30. 08:32

  https://www.acmicpc.net/problem/15989 어떻게 풀어야 할지 굉장히 고민을 많이 했던 문제.처음엔 완전탐색, 백트래킹으로 풀려고 했었고 그럼 중복처리 ((1+1+2, 1+2+1)을 같은걸로 처리해야함.)를 어떻게 처리해야 하나 고민하다가 배열을 3차원으로 만들어서 쓴 숫자들을 중복처리해줘야 하나도 고민을 해줬지만, 그렇게 한다면 메모리를 너무 많이 차지해서 안됬다.이런저런 고민을 하다가 결국 다른분들이 푼 방법을 봤는데, 생각보다 너무 간단했다.냅색 문제 풀듯이 푸는데, 이게 보통 냅색문제가 숫자 몇을 만드려고 하는데 이때 최소 동전 몇개를 써야하냐 이런식인 경우가 많았던 것 같은데, 이 문제는 그게 아니라 숫자 몇을 만드는데 경우의 수가 몇개가 필요하냐 뭐 이런식이었다.그래서..

  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