[Process] 더보기 : 컨텐츠 더 보기 기능을 구현할 때 고려해야할 것

 

 

더보기 기능 예시

 

더보기의 기능은 주위에 엄청 많습니다.

 

• 구글에 검색하여 아래로 스크롤하며 게시글 목록 더보기
• 알림 더보기
• 게시글 더보기
• 아프리카TV의 방송 더보기 등

등 사용하는 곳은 엄청 많습니다.

 

이미지 예시1)

출처 : 구글 검색한 이후 페이지

이미지 예시2)

 

출처 : 아프리카TV 게임 카테고리 페이지

 

 

어떻게 보면 페이징하고 다를게 없는데? 라고 생각할 수 있지만 그것도 맞는 말입니다.

그래서 이번에 생각할 것은 실시간으로 바뀌는 더보기 기능입니다.

 

 

 

 

 

나의 문제 상황

 

나는 실시간 알림 기능을 구현하고 있었다.

알림을 클릭하면 알림 목록이 나오는데 사용자가 알림을 삭제 할 수도 있고 알림을 실시간으로 받아졌다.

알림을 수신받고 마지막 목록을 안보이게 처리하는 여기까지는 문제가 없다..

알림3을 그냥 DOM에서 제거해주면 화면에선 노출되지 않게 되며 더보기 해도 알림3부터 데이터를 가져올테니

 

그런데 알림을 삭제 할 때 좀 고민이 생긴다.

내가 알림을 삭제 했을 때 그 DB 커넥션을 맺어서 또 List를 가져오던가 그 바로 다음 알림을 조회 해야하는 문제가 생긴다.

굳이? 삭제를 했는데 또 가져오는 로직을 태워서 DB 커넥션을 또 맺어? 라는 고민을 하게 되었다.

 

 

 

구현 할 때 고려할 상황이면서 해결 방법

 

실시간으로 알림을 받을 수 있으며 삭제 하는 것에는 제약이 없게 만들기 위해서 

나는 리스트에서 다음번이 있는 지의 여부와 다음 알림의 ID(=Sequence) 값을 API에서 Response를 내려 줄 수 있었다.

 

API Response

// 더보기 할 알림이 있을 경우
{
    "list" : [
    	{알림 정보 JSON}
        ..
        ],
    "nextYn" : true,
    "nextId" : 4
}

// 더보기 할 알림이 없을 경우
{
    "list" : [
    	{알림 정보 JSON}
        ..
        ],
    "nextYn" : false,
    "nextId" : null
}

 

 

 

그럼 쿼리문은 어떻게 하면 되는데?

 

JSON으로 어떻게 프론트엔드 개발자에게 보내준다고는 알았는데 제일 중요한! 그런 데이터를 어떻게 뽑아내냐는 겁니다.

우선 서비스 계층에서는 nextId(=Sequence)가 있어야 쿼리를 조회하겠다 로직이 들어가겠져?

-- 동적으로 들어갈 값은 () 로 감싸 주었습니다.
SELECT id, 알림 정보 필드1, 알림 정보 필드2
FROM notification
WHERE id <= (다음 존재하는 ID)
ORDER BY 생성일자 필드 DESC
LIMIT (목록 조회 사이즈)

 

그다음 DB를 또 조회해서 내가 가져온 값의 다음 값을 가져오거나 난 목록이 10개 밖에 안필요해 하면 limit을 11개 작성해여 서비스단에서 10개로 변경하는 작업 로직을 넣어주면  될것 같습니다.

 

 

 

 

 

감사합니다.