배경
SNS에 작성된 모든 컨텐츠를 한꺼번에 요청을 하게 된다면 클라이언트의 뷰에 업데이트를 할 때 렌더링 되는 데 시간이 걸리게 된다. 또한 서버에서도 한 번에 많은 데이터를 보내야 하기 때문에 부하가 생긴다. 사용자 입장에서도, 그리고 서비스 제공자 입장에서도 한 번에 컨텐츠를 제공하거나 제공 받는 것은 여건 상 좋지 않은 방법이다.
모든 컨텐츠를 지연시간 없이, 비용의 문제 없이 사용할 수 있게 되면 상관은 없지만, 현재의 기술로서는 여건이 안됀다.
그래서 많은 서비스에서 한 페이지에 제한적인 정보만 볼 수 있게 페이징 뷰를 도입해왔다. SSR(Server Side Rendering)에서는 사용자가 보고 싶은 정보를 찾기 위해서는 새로운 페이지를 요청하면 되었다. 이제 CSR(Clinet Side Rendering)이 용이할 정도로 기술이 발전되었을 때, 무한스크롤이라는 개념을을 이용하여 새로운 정보를 페이지 변경 없이 렌더링을 할 수 있는 방식도 생겨났다.
페이지네이션(Pagination) vs 무한스크롤(Infinite Scroll)
결국 페이지네이션과 무한스크롤은 같은 기능을 구현한다. 하지만 늦게 도입되었다고 더 나은 방식이라고 생각되지는 않다. 페이지네이션과 무한스크롤 둘 다 서비스가 제공하는 기능에 따라 선택해서 구현하면 될 것이다.
[장단점 정리]
| 구분 | 페이지네이션 | 무한스크롤 |
|---|---|---|
| 장점 | - 찾고자 하는 정보가 정해져있고, 페이지를 알고 있으면 빠르게 정보를 얻어낼 수 있다. | - 사용자의 컨텐츠 몰입을 도와준다. |
| - 모바일 환경에 특화되어 있다. | ||
| 단점 | - 다소 복잡한 페이지 계산이 필요하다. | - 페이지 끝에 도달했다는 것을 알려줄 트리거의 구현이 어려운 편이다. |
서버 구현
⌞ Limit & Offset
우선 대부분의 데이터베이스 시스템에 있는 Limit과 Offset 개념을 알 필요가 있다. 이는 MySQL을 기준으로 소개한 것이고, 다른 시스템에서는 다른 용어로 사용될 수 있다.
- Limit : 얼마나 많은 데이터를 가져올 지에 대한 조건
- Offset : 몇 개의 데이터를 넘기고나서 데이터를 가져올 지에 대한 조건
SQL 에서는 다음과 같이 사용한다.
[MySQL Limit Offset 사용]
SELECT * FROM users LIMIT 10 OFFSET 5;진행하는 프로젝트에서는 MongoDB를 이용하기 때문에 MongoDB의 Limit과 Offset을 찾아봤다.
Limit의 개념은 그대로 사용하고 Offset은 next로 사용하고 있었다.
[MongoDB Limit Offset 사용]
> db.users.find().next(5).limit(10)두 경우 모두 users의 테이블(도큐먼트)의 데이터 중 5개를 뛰어넘기고 나서부터 10개의 데이터를 요청하고 있는 쿼리다.
⌞ URL Query로 limit, offset 정보 보내기
[Server Controller 중 메시지 요청에 대한 응답 함수]
const get = async (req, res)=>{
const skip = req.query.skip;
const limit = req.query.limit;
const messages = await Message.find({replyTo:null})
.skip(skip).limit(limit).sort({createdAt:-1})
.catch(err=>err);
return res.status(200).send(messages);
}위처럼 express 서버에서 req는 요청된 URL의 쿼리를 파싱해준다. 서버 설정으로 app.use(express.urlencoded({extended:false}));를 미리 작성해 놓았기 때문일 것이다. URL Query에 skip과 limit을 담아 보내고 DB Query에 해당 정보를 포함하여 보내면 요청한 만큼의 데이터를 보낼 수 있게 된다.
[URL Query로 DB 데이터 요청]
[URL Query를 변경해서 요청]
URL로 전달되는 query의 limit의 파라미터의 값을 1에서 3으로 바꿔주기만 하여 GET 요청을 보냈다. 당연하게도 데이터 1개를 돌려줬던 응답이, 데이터 3개를 돌려주는 응답으로 바뀌었다.
정리
현재 서버 쪽의 코드는 이와같이 구현이 되었다. 몽고 DB의 Skip, Limit을 사용하여 필요한 만큼의 데이터를 요청할 수 있다는 것. 그리고 URL query를 통해서 GET 메소드로도 클라이언트에서 서버로 값을 전할 수 있다는 것을 정리해본다.
다음 포스팅에서 클라이언트의 구현이 어떻게 되었는지 소개하도록 하겠다.
