운현 운현

MERN Stack ChatApp

• 16.Socket 연결

  MERN Stack ChatApp 2024. 8. 21. 23:30

  https://socket.io/how-to/use-with-nextjs How to use with Next.js | Socket.IOThis guide shows how to use Socket.IO within a Next.js application.socket.io socket setup 이벤트를 챗룸을 클릭했을 때가 아니라, 그냥 접속하면 바로 달아줘야함. https://corner-ds.tistory.com/71 [Node.js] 12장(2) 미들웨어와 소켓 연결하기5. 미들웨어와 소켓 연결하기 입퇴장하는 사람의 ID를 보여주고 싶은데, 그 정보는 req.session.color에 저장되어 있으므로 Socket.IO에서 지금은 접근이 불가합니다. 이를 해결하기 위해 우리는 Socket.IOco..

  Read More
• 15. 채팅방에서 메세지 불러오기, 메세지 보내기 화면

  MERN Stack ChatApp 2024. 8. 16. 23:02

  https://www.youtube.com/watch?v=cHziFZ7Q58Y&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=14를 보며 하고있다. 그런데 사실 이번편은 화면 어떻게 작동하나만 확인하고, 내가 알아서 만든거라 동영상 내용이랑은 많이 다를 수 있음. 한거는 먼저 messageStore를 만든다. 챗 하나를 클릭하면, 지난시간에 만든 메세지 패치 api를 사용해서 채팅방 하나에있는 메세지들을 모두 불러온다. 그리고 message State를 패치해온걸로 바꿔줌. 그리고 chatBox 컴포넌트에서 해당 메세지를 표시해준다. 메세지 보내기는 역시 messageStore와 함께 쓰는데, 메세지를 전송하면 messageStore에  addMessage라는 함수를 ..

  Read More
• 14. Message API

  MERN Stack ChatApp 2024. 8. 14. 22:50

  https://www.youtube.com/watch?v=m5-6A-MQ0Os&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=13를 보며 만들고 있다. 이번시간에는 메세지 보내는 API를 만들었다.막 특별할 건 없고, 메세지를 보내는 API는 보내는 메세지(content)와 보낼 채팅방의 ID(chatId)를 받아서 인서트해준 후 lastestMessage를 업데이트 해준다. 메세지를 조회하는 API는 path로 chatID를 받아와, 그 채팅방의 모든 메세지를 SELECT하고 보내준다.(외래키 조인할 건 조인해서) github : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/14.MessageAPI GitHub - Wun..

  Read More
• 13. 채팅방 프론트 - 그룹챗 만들기

  MERN Stack ChatApp 2024. 8. 13. 22:02

  https://www.youtube.com/watch?v=kJfwjGQY99M&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=12를 보며 하고있다. 그런데, 사실 이번 파트는 위 동영상을 거의 보지 않았다. 95%는 보지 않고, 그냥 디자인 참고랑, 어떤 기능을 하는지만 보고 만들고 있다.이유는 위 동영상이 나온 시기가 오래되서, 지금쓰는 기술과 맞지 않는다는 게 가장 큰 이유다. 나는 요즘 next.js로 뭘 만들고있는데, 위 동영상에서는 타입스크립트도 쓰지 않고, 자바스크립트 리액트로 만들고 있다. 리액트도 오래되서 서버액션이 없는 버전이고, 어떤 형식을 보내거나 할 때 validation 체크 등도 하지 않아서, nextJS 연습도 하고, zod등도 써볼겸 해서 ..

  Read More
• 12. 채팅방 프론트. 로그인보완 (서버사이트 상태저장)

  MERN Stack ChatApp 2024. 8. 6. 22:01

  https://www.youtube.com/watch?v=2JNL2JBgruI&t=3066s를 보며 만들고 있다.그런데 이번편에서는 틀은 이 동영상처럼 하지만 안의 내용은 좀 많이 다르게 할 것이다.왜냐면 나는 react가 아니라 nextjs로 앱을 만들고 있기도 하고,이 동영상이 나온지가 좀 됬다보니 좀 옛날 것들을 많이 사용하기도 했다. 지금은 거의 쓰이지 않는. 그래서 모양이나 틀은 이것과 비슷하게 갈거지만, 안의 내용은 다르게 만들어보겠다. 먼저 로그인 상태관리를 해주기위해 zustand를 인스톨 해준다.https://docs.pmnd.rs/zustand/getting-started/introduction Zustand DocumentationZustand is a small, fast and s..

  Read More
• 11. 1:1 채팅방 API, 모든 내 대화방 가져오기, 그룹채팅방 만들기, 채팅방 이름 바꾸기

  MERN Stack ChatApp 2024. 8. 5. 17:43

  https://www.youtube.com/watch?v=HArC6GxkMMI&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=10 이번에는 1:1 채팅방 만들기를 하겠다.카톡이나 슬랙등에서 1:1 채팅을 해본 경험은 다들 있을 것이다.이 때, 기존의 채팅내역이 있다면 기존 채팅방을 불러오면 되지만, 없다면 새로운 1:1 채팅방을 만들게 된다.서버 => 라우터 => 컨트롤러 순으로 가겠다.// backend/server.jsconst express = require("express");const { chats } = require("./data/data");const dotenv = require("dotenv");const connectDB = require("./co..

  Read More
• 10. AuthMiddleware

  MERN Stack ChatApp 2024. 8. 5. 15:52

  https://www.youtube.com/watch?v=HArC6GxkMMI&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=10 다음으로 서버에 인증 미들웨어를 만든다. 인증이 필요한 부분으로 이동할 때, 지금 만드는 미들웨어를 거친다음 원하는 곳으로 가게끔 할 수 있다.지금만드는 건 인증이니깐 인증이 되야만 다음단계로 거치도록 할 수 있다. 미들웨어 안에서 req, res객체에 뭘 넣어줄수도 있고.만들고 사용하는 방법은 먼저 미들웨어를 만들고// backend/middleware/authMiddleward.jsconst jwt = require("jsonwebtoken");const User = require("../models/userModel.js");const..

  Read More
• 9. Find Users API

  MERN Stack ChatApp 2024. 8. 5. 14:50

  유저들을 찾는 api.backend/routes/userRoutes.jsbackend/routes/userRoutes.js에router.route("/").get(allUsers) 추가.router.route("/").get(allUsers).post(registerUser);이런식으로 기존의 router.route("/").post(registerUser).get(메서드).patch(메서드) 이런식으로 붙여줘도 됨.backend/controller/userController.js에 메서드 추가const allUsers = asyncHandler(async (req, res) => { const keyword = req.query.search; const query = keyword ? { ..

  Read More