📌“리뷰 기능은 UX에서 시작해, REST로 완성됐다 – ReviewAjaxController 구현기”

📅 2025-07-02

✍️ 박찬희

---

🔧 구현 목표

기존 강의 리뷰 기능은 전통적인 JSP 폼 제출 방식이었다.

리뷰를 등록하면 화면이 새로고침되고, 리뷰 리스트를 다시 보기 위해선 페이지 전체를 리렌더링해야 했다.

사용자 입장에서 이건 너무 거슬린다.

그리고 백엔드 관점에서도 너무 비효율적이다.

그래서 이번에 설계한 건 완전히 새롭게 분리된 Ajax 기반 컨트롤러.

RESTful 구조로 리뷰 등록과 리뷰 조회를 완전히 분리했고,

프론트와의 JSON 연동을 고려해 UX를 해치지 않으면서도 구조적으로 명확한 API를 구현했다.

---

📌 주요 시도 요약

항목	핵심 설계
리뷰 조회	GET /review?lectureId=1 → JSON 배열 반환
리뷰 등록	POST /review → JSON 응답 + 리다이렉트 URL 포함
인증 체크	세션 기반 인증 미통과 시 401 반환
예외 흐름	400 / 401 / 500 등 상황별 상태 코드 + 메시지 명시
응답 포맷	{ success, message?, data? }로 통일된 구조

---

🧱 전체 구조

[Client]
  ↕ AJAX
[ReviewAjaxController]
  → ReviewService
  → ReviewDAO
  → MySQL

• 컨트롤러는 흐름만,
• 서비스는 비즈니스 조건 판단,
• DAO는 DB 쿼리 실행
• 응답은 항상 JSON 기반으로 반환

---

⚙️ 주요 기능 흐름

✅ 1. 리뷰 조회 – GET /review?lectureId=1

int lectureId = Integer.parseInt(req.getParameter("lectureId"));
List<ReviewDTO> reviews = reviewService.getReviewsByLectureId(lectureId);
gson.toJson(reviews, res.getWriter());

• 프론트에서 강의 ID만 넘기면, 서버는 리스트를 JSON 배열로 응답
• Service 단에서 LocalDateTime → yyyy-MM-dd HH:mm 포맷 처리
• 응답은 content-type: application/json

📌 프론트는 단순히 리스트 받아 렌더링만 하면 된다. 서버가 모든 형식을 책임진다.

---

✅ 2. 리뷰 등록 – POST /review

UserDTO user = (UserDTO) session.getAttribute("user");
if (user == null) {
  resp.setStatus(401);
  ...
}

ReviewDTO dto = new ReviewDTO();
dto.setLectureId(lectureId);
dto.setUserId(user.getUserId());
...
reviewService.addReview(dto);

• 세션 검증 → 파라미터 수신 → DTO 생성 → Service 호출
• 등록 성공 시 { success: true, redirectUrl: "/lecture/play?lectureId=1" } 반환
• 프론트는 응답받고 location.href = redirectUrl 로 이동 처리

📌 POST 요청인데도 새로고침은 없다. 사용자는 ‘흐름’이 끊기지 않는다.

---

🚧 트러블슈팅 사례

❌ lectureId 없을 때 500 에러 → 400으로 수정

• 초기에는 Integer.parseInt()에서 에러가 터지며 500 Internal Server Error 반환됨
• 개선: 파라미터 누락 시 catch로 잡고 400 Bad Request 응답 + 메시지 포함

try {
  ...
} catch (NumberFormatException e) {
  resp.setStatus(HttpServletResponse.SC_BAD_REQUEST);
  result.put("message", "강의 ID가 유효하지 않습니다.");
}

📌 클라이언트와의 신뢰는 정확한 에러코드부터 시작된다.

---

🧠 배운 점

• RESTful하게 API를 나누면, 클라이언트도 자연스럽게 설계가 깔끔해진다.
• 리뷰 등록을 POST로 분리하고, JSON 포맷을 통일해두니, React/Vue 등 프론트 프레임워크에서도 쉽게 재사용된다.

• 가장 중요한 건 “리뷰를 쓴 사용자가 UI 중단 없이 흐름을 이어갈 수 있게 하는 것”이었고,

  이번 리팩토링으로 이 부분을 제대로 잡았다.

---

✍️ 회고

이번 ReviewAjaxController는 단순 리뷰 API가 아니었다.

그 안에는 사용자 흐름, 서버 확장성, 보안, 예외 흐름 등 실무 개발의 핵심이 다 들어있었다.

“Ajax를 단지 기술로 쓰지 말자.

흐름을 끊지 않는 구조 자체로 사용자 경험을 설계하자.”

프론트와 백엔드가 자연스럽게 대화할 수 있도록,

이 컨트롤러는 JSON 응답을 중심으로 명확하게 설계되었다.