[Servlet] 서블릿을 활용한 비동기 게시판 정렬 – JSON 데이터 처리 및 페이지네이션 구현 🚀

🛠 서블릿을 이용한 비동기 게시판 정렬 기능 구현

정렬하는 기능을 구현할 때, 페이지를 새로고침하지 않고 비동기(Async) 방식으로 데이터를 가져오는 것이 일반적

BoardComboOrderServlet을 이용, 게시글 데이터를 JSON 형식으로 클라이언트에 반환,

최신순, 오래된순, 인기순 정렬 및 페이지네이션 처리

 

🚀 주요 기능

✅ 비동기 요청 처리 (AJAX와 함께 동작)
✅ 게시판 데이터 정렬 (최신순, 오래된순, 인기순)
✅ 페이지네이션 기능 구현 (더보기 방식으로 데이터 로드)
✅ JSON 형식으로 데이터 응답 (View에서 쉽게 처리 가능)

 

📌 코드 분석 – 핵심 로직 설명

1️⃣ View에서 정렬 조건과 페이징 정보 전달

View는 AJAX 요청을 통해 정렬 조건과 페이지 정보를 서버로 전달 → 서블릿에서 request.getParameter()로 받아 처리

// 클라이언트에서 전달한 정렬 조건
String orderCondition = request.getParameter("boardOrderCondition");
System.out.println("백단 도착 여부: " + orderCondition);

// 클라이언트에서 보낸 페이지 번호와 보여줄 데이터 개수
int boardPageNumber = Integer.parseInt(request.getParameter("boardPageNumber"));
int boardContentCount = Integer.parseInt(request.getParameter("boardContentCount"));

System.out.println("더보기 횟수: [" + boardPageNumber + "]");
System.out.println("보여줄 데이터 수: [" + boardContentCount + "]");

// View AJAX 예시
$.ajax({
    url: "/BoardComboOrderServlet",
    method: "GET",
    data: {
        boardOrderCondition: "ORDERUPTODATE",  // 최신순 정렬
        boardPageNumber: 1,
        boardContentCount: 10
    },
    success: function(response) {
        console.log(response);  // 서버에서 받은 JSON 데이터
    }
});

 

2️⃣ 페이지네이션 처리 – 시작 인덱스 계산

View에서 현재 페이지 번호와 한 페이지에 보여줄 데이터 개수를 전송, 서버는 startIndex를 계산하여 적절한 데이터 범위를 설정

// 페이지네이션을 위한 시작 인덱스 계산
int startIndex = (boardPageNumber - 1) * boardContentCount;
System.out.println("시작 인덱스 번호: [" + startIndex + "]");

• 더보기 버튼을 누를 때마다 다음 페이지의 데이터를 가져오도록 구현

 

3️⃣ 데이터 조회 및 JSON 변환

DB에서 가져온 데이터를 JSON 형식으로 변환하여 클라이언트에 응답

BoardComboDAO boardComboDAO = new BoardComboDAO();
ArrayList<BoardComboDTO> boardComboDatas = boardComboDAO.selectAll(boardComboDTO);
if (boardComboDatas == null) {
    boardComboDatas = new ArrayList<>();
}

JSONArray boardComboArray = new JSONArray();
for (BoardComboDTO boardCombo : boardComboDatas) {
    JSONObject boardComboObject = new JSONObject();
    boardComboObject.put("boardComboNumber", boardCombo.getBoardComboNumber());
    boardComboObject.put("memberName", boardCombo.getMemberName());
    boardComboObject.put("boardComboTitle", boardCombo.getBoardComboTitle());
    boardComboObject.put("boardComboViewCount", boardCombo.getBoardComboViewCount());
    boardComboObject.put("boardComboLikedCount", boardCombo.getBoardComboLikedCount());
    boardComboObject.put("boardComboRegisterDate", boardCombo.getBoardComboRegisterDate().toString());

    boardComboArray.add(boardComboObject);
}

// JSON 데이터 응답
response.getWriter().write(boardComboArray.toJSONString());

// View가 받는 JSON 응답
[
    {
        "boardComboNumber": 1,
        "memberName": "홍길동",
        "boardComboTitle": "오늘의 추천 조합",
        "boardComboViewCount": 150,
        "boardComboLikedCount": 23,
        "boardComboRegisterDate": "2025-03-30 14:25:00"
    },
    {
        "boardComboNumber": 2,
        "memberName": "이순신",
        "boardComboTitle": "최고의 가성비 콤보",
        "boardComboViewCount": 98,
        "boardComboLikedCount": 10,
        "boardComboRegisterDate": "2025-03-29 10:10:00"
    }
]

 

✨ 개선 후 기대 효과

✅ 비동기 방식으로 UX 향상

• 페이지 새로고침 없이 AJAX 요청으로 빠르게 데이터 로드 가능

• 더보기 버튼 클릭 시 추가 데이터 불러오기

✅ 유지보수성과 확장성 증가

• 정렬 조건이 추가될 경우, if-else 구문만 추가하면 새로운 정렬 방식 추가 가능

• JSON 포맷을 사용하여 다양한 클라이언트와 연동 가능

✅ 서버 부하 감소

• 필요한 데이터만 가져오는 페이지네이션 처리를 통해 불필요한 DB 쿼리 실행 방지

• 클라이언트에서 필요한 부분만 요청하여 불필요한 트래픽 감소

 

🚀 결론: 비동기 방식으로 효율적인 게시판 정렬 구현

서블릿을 활용하여 비동기 게시판 정렬과 페이징 기능을 구현

비동기 방식으로 데이터를 주고받아 사용자 경험(UX)을 개선, 서버 부하 감소, 유지보수 용이

 더 최적화된 방식으로 데이터 처리 속도를 개선하는 방법 고민