[Flownium Chat Log #3] 실시간 채팅 MVP v1 구현기 – 메시지 불러오기 API 리팩토링 및 채팅방 UI 연결

이전까지는 채팅방 목록과 메시지 송수신은 구현됐지만, 특정 채팅방 입장 시 이전 메시지 로딩이 불안정하거나 불필요한 API 라우팅이 섞여 있었고 메시지 관련 로직을 정리해 API 연결까지 제대로 되는 구조로 리팩토링을 진행하였다.

---

✅ 이번 작업의 핵심

•	채팅방 입장 시 메시지 불러오기 구현
•	메시지 API 구조 리팩토링 (RESTful하게 재설계)
•   Express 서버의 라우터 및 구조 개선

📦 작업 내용

1. 메시지 조회 API 라우팅 재구성

변경 전	변경 후
/api/messages?roomId=xxx	/api/chatrooms/:id/messages

•	메시지를 chatroom의 하위 리소스로 간주하여 구조 개선  
•	`/routes/message-routes.cjs` 제거 → `/routes/chatroom-routes.cjs` 내부에 통합  
•	RESTful API에 맞춘 라우팅으로 직관성 향상

// chatroom-routes.cjs 내 추가
router.get('/:id/messages', async (req, res) => {
    try {
        const { id } = req.params;
        const messages = await Message.find({ chatRoomId: id })
            .sort({ createdAt: 1 })
            .populate('senderId', 'nickname');
        res.json(messages);
    } catch (err) {
        console.error('메세지 불러오기 실패 : ', err);
        res.status(500).json({ error: '서버오류' });
    }
});

---

2. 클라이언트 메시지 fetch 연동

•	페이지 진입 시 useParams로 roomId 추출 후 API 호출
•	호출된 메시지를 state에 저장 후 map 렌더링

useEffect(() => {
    const fetchMessages = async () => {
        try {
            const res = await axios.get(`${BASE_URL}/api/chatrooms/${roomId}/messages`);
            setMessages(res.data);
        } catch (err) {
            console.error('메세지 불러오기 실패', err);
        }
    };
    fetchMessages();
}, [roomId]);

---

3. 서버 진입점 (index.cjs) 리팩토링

항목	변경 전	변경 후
모델/라우터 import 위치	구조 섞여있음	상단 명확히 정리
body 파싱 미적용	express.json() 없음	app.use(express.json()) 적용
메시지 라우터 분리	/api/messages 라우터 별도 구성	chatroom 내부 /chatrooms/:id/messages로 통합
설명 주석 없음	없음	각 섹션별 ✍️ 주석 추가로 가독성 향상

// 📌 REST API 라우터 등록
app.use('/api/chatrooms', chatroomRouter);
// messageRouter 제거됨 (chatroom 내부 통합)

// 🧩 HTTP 서버 및 Socket.IO 서버 생성
const server = http.createServer(app);
const io = new Server(server, {
    cors: {
        origin: '*',
        methods: ['GET', 'POST'],
    },
});

🧠 회고

•	기존 메시지 라우팅 방식이 비직관적이었는데, /chatrooms/:id/messages로 바꾸니 확실히 REST스럽고 깔끔해졌다.
•	서버 index 파일도 주석과 구조 정리하니까 가독성이 확 올라갔다.
•   앞으로도 매일 올리고 싶지만 업무미팅 때문에 가능할련지 모르겠다. 앞으로 열심히 해야지..