[Flownium Chat Log #2] 실시간 채팅 MVP v1 구현기 – 채팅방 목록 기능 구현 & 구조 통합 리팩터링

이번에는 채팅방 리스트 기능을 중심으로 서버-클라이언트 구조를 명확히 정리하고,
MongoDB와의 연결을 안정화시키는 데 집중했다.

---

✅ 이번 작업의 핵심

• MongoDB 연결 및 seed 데이터 삽입
• 채팅방 목록 API (/api/chatrooms) 구현
• 클라이언트에서 axios로 연동 및 렌더링
• 서버/클라이언트 디렉토리 구조 분리 및 node_modules 정리
• 채팅방 구조에 따른 모델 수정 (시간제/익명 지원 포함)
• 요구사항 정의서 / WBS / README 업데이트

---

🧱 폴더 구조 리뷰

flownium-chat/
├── server/               # Express, Socket.IO 백엔드
│   ├── index.cjs
│   ├── models/
│   ├── routes/
│   └── scripts/seed.js
├── src/                  # 프론트엔드 React 구성
│   ├── api/
│   ├── components/
│   ├── pages/
│   └── App.jsx
├── README.md      
└── .gitignore

루트 node_modules 제거 후, /server 단위로 패키지 관리 분리
각 실행 명령어도 분리하여 Vercel / Render 배포 고려하였다.

node로는 해본적이 없어서 무턱대고 프로젝트 폴더에 node_modules을 만들었는데
Server는 별도의 node_modules로 관리했다.

🧩 MVP 기능 구현 요약

항목	구현 여부	비고
채팅방 목록 조회 API	✅	userId 기준 필터링
마지막 메시지 포함 응답	✅	populate + sort
채팅방 UI 렌더링	✅	ChatRoomList.jsx
익명/시간제 필드 표시	✅	Tailwind 기반 정렬
MongoDB 연결 확인	✅	.env 구성 완료

---

진행한 작업 리뷰

1. 채팅방 목록 API

router.get('/', async (req, res) => {
  const { userId } = req.query;
  const rooms = await ChatRoom.find({ participants: userId })
    .populate('participants', 'nickname')
    .lean();

  const result = await Promise.all(
    rooms.map(async (room) => {
      const lastMessage = await Message.findOne({ chatRoomId: room._id })
        .sort({ createdAt: -1 })
        .lean();

      return {
        ...room,
        participantsCount: room.participants.length,
        lastMessage: lastMessage
          ? {
              text: lastMessage.text,
              timestamp: lastMessage.createdAt,
            }
          : null,
      };
    })
  );

  res.json(result);
});

userId로 필터링 → 해당 채팅방 리스트만 반환
마지막 메시지 가져오기 위해 각 채팅방마다 Message.findOne + sort
결과는 프론트에서 바로 사용 가능하도록 flatten 가공하였다.

2. 채팅방 목록 화면

useEffect(() => {
  const loadRooms = async () => {
    const res = await fetchChatRooms(userId);
    setRooms(res);
  };
  loadRooms();
}, []);

axios 통해 API 연동
map()으로 채팅방 목록 렌더링
participants.length, lastMessage?.text, expiresAt 등 사용

3. MongoDB 연동 및 Seed 데이터 삽입

이번 작업에서는 로컬 개발을 위한 MongoDB 연동을 완성하고
기본 유저, 채팅방, 메시지를 자동 삽입하는 seed 스크립트를 구성했다.

• .env 파일을 통해 Atlas URI 보안 처리
• mongoose.connect()로 서버 구동 시 DB 연결
• /scripts/seed.js 에서 Mongoose 모델 기반 더미 데이터 삽입

await mongoose.connect(process.env.MONGO_URI);
console.log('✅ DB 연결 완료');

// 유저 생성
const user1 = await User.create({ ... });
const user2 = await User.create({ ... });

// 채팅방 생성 및 메시지 삽입
const room = await ChatRoom.create({ ... });
await Message.create([
  { chatRoomId: room._id, senderId: user1._id, text: '안녕' },
  ...
]);

이렇게 사전에 정의된 모델 구조를 기반으로
초기 데이터 흐름을 실제 DB에 적재하면서 프론트 연동까지 테스트 완료하였다.

🧭 다음 작업 방향

• 채팅방 클릭 시 메시지 목록 로딩
• 입력창 및 메시지 전송 구현 (Socket 연동)
• 카카오 로그인 OAuth2 연동
• 클라이언트 라우팅 구조 설계 (React Router)

🧠 회고

이번 작업에서는 세일즈포스가 아닌 node.js를 사용하다보니
너무 미숙한게 많아 module이 꼬이는 등 여러 문제가 있었다.
구조 정리에 상당한 시간이 들었지만 서버/클라이언트 분리, .env 정리, 의존성 충돌 제거 등
장기적인 유지보수를 위한 기반이 완성됐다.

또한, 실제로 데이터를 넣고 조회해보니 MVP 실감이 났고
요구사항 정의서와 모델이 연결되면서 설계가 안정화 된 것 같다.