전체 글(85)
-
그룹채팅 - Part6 방장의 권한(2) - 강퇴
방장이 특정 사용자를 강제로 퇴장시키는 기능에 대해서 설명하겠습니다. 프론트엔드 1. 참여 사용자 목록 가져오기특정 채팅방의 사용자 목록을 가져오는 API를 호출하여 참여 사용자 목록을 상태에 저장합니다.const fetchParticipatingUsers = async () => { const res = await fetch(`/api/community/current-chatroom-info?roomId=${roomId}&action=users`); const data = await res.json(); setParticipatingUsers(data); // 참여 사용자 목록을 상태에 저장}; 2. 방장 여부 확인현재 사용자가 방장인지 확인하기 위해 채팅방 정보를 가져오는 API를 호출합니다.c..
-
그룹채팅 - Part6 방장의 권한(1) - 채팅방 수정 / 삭제
방장이 채팅방을 수정하고 삭제하는 기능을 구현하는 방법에 대해 설명하겠습니다. 방장은 채팅방의 이름, 이미지, 태그 등을 수정할 수 있으며, 채팅방을 삭제할 수도 있습니다. 프론트엔드 1. 채팅방 정보 불러오기채팅방 정보를 불러와서 수정 폼에 초기값으로 설정합니다.useEffect(() => { const fetchChatroomInfo = async () => { // 채팅방 정보를 가져오는 API 호출 const res = await fetch(`/api/community/current-chatroom-info?roomId=${roomId}&action=info`); const data = await res.json(); // 가져온 데이터를 상태에 설정 setChatr..
-
그룹채팅 - Part5 채팅방 시스템 메시지
이번 포스팅에서는 채팅방에서 시스템 메시지를 구현하는 방법에 대해 알아보겠습니다. 시스템 메시지는 사용자가 채팅방에 입장하거나 퇴장할 때, 또는 기타 중요한 이벤트가 발생했을 때 사용자들에게 자동으로 전달되는 메시지입니다. 이를 통해 채팅방의 상태를 사용자들에게 알릴 수 있습니다. 데이터베이스 스키마 chatMessages 테이블model chatMessages { id Int @id @default(autoincrement()) chatroom_id Int user_id Int? message String? image_id Int? created_at DateTime @default(now()) chatroom c..
-
Next.js API에서 파일 업로드 시 bodyParser 비활성화 이유
저번 글 '그룹채팅 - Part4 사진 전송'에서 Multer를 사용하기 위해 bodyParser를 비활성화해야 한다고 언급했는데요, 이 글에서는 그 이유와 Multer를 사용한 이유에 대해 설명하겠습니다. Next.js API 설정 export const config = { api: { bodyParser: false, // Next.js의 기본 bodyParser를 비활성화합니다. },};기본설명Next.js API 설정에서 bodyParser를 비활성화하는 것은 매우 중요합니다. 이는 Next.js가 요청 본문을 자동으로 파싱하지 않도록 하기 위함입니다. 기본적으로 Next.js는 요청 본문을 JSON 등으로 자동 파싱하여 req.body에 담아줍니다. 하지만 파일 업로드와 같은 대용량의..
-
그룹채팅 - Part4 사진 전송
사용자가 채팅방에서 사진을 전송하는 기능을 구현하는 방법에 대해 설명하겠습니다. 데이터베이스 스키마 chatImageMessage 테이블model chatImageMessage { id Int @id @default(autoincrement()) path String createdAt DateTime @default(now()) chatMessages chatMessages[] @@index([id])}이미지 파일의 경로를 저장합니다. chatMessages 테이블model chatMessages { id Int @id @default(autoincrement()) chatroom_id Int..
-
그룹채팅 - Part3 메시지 전송
사용자가 채팅방에서 텍스트 메시지를 전송하는 기능을 구현하는 방법에 대해 알아보겠습니다. 이 기능은 사용자가 텍스트 메시지를 웹소켓을 통해 실시간으로 전송할 수 있도록 합니다. 백엔드에서는 이를 데이터베이스에 저장하고 클라이언트에 실시간으로 전달합니다. 데이터베이스 스키마 chatMessages 테이블model chatMessages { id Int @id @default(autoincrement()) chatroom_id Int user_id Int? message String? created_at DateTime @default(now()) chatroom chatrooms @relation(fields: [chatroom_id], refer..