풀스택을 개발하면서 데이터 정렬 기능을 구현할 때, 다음과 같은 궁금증이 생겼다.
데이터 정렬은 프론트엔드에서 하는 것이 좋을까? 서버에서 하는 것이 좋을까?
이 질문에 대하여 보통 데이터 처리는 서버에서 하므로, "서버에서 하는 것이 맞다!"라고 넘어갈 수 있지만 각각의 장단점을 따져보자.
프론트엔드에서 데이터 정렬하는 방식
서버로부터 데이터를 받아 클라이언트에서 배열 데이터를 다음과 같이 정렬할 수 있다.
// foods 데이터를 Fetch 했다고 가정
let foods = [
{ id: 1, name: 'Pizza' },
{ id: 2, name: 'Burger' },
{ id: 3, name: 'Salad' },
{ id: 4, name: 'Pasta' },
];
// 배열 데이터를 이름(name)을 기준으로 오름차순 정렬
foods.sort((a, b) => {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
프론트엔드에서 배열을 정렬한다면 다음과 같은 장단점이 있다.
장점
- 프론트엔드에서 원하는 대로 정렬 방식을 쉽게 변경할 수 있다.
- 데이터 요청시 query 또는 body가 없어도 된다.
- 브라우저(클라이언트)가 비용을 부담한다.
단점
- 클라이언트의 성능에 의존하므로, 저사양 기기에서는 성능 문제가 발생할 수 있다.
- 데이터 양이 많을 경우, 클라이언트 측에서의 정렬 작업이 비효율적일 수 있다.
- 페이지네이션(많은 데이터를 분할 요청) 정렬이 어렵다.
장단점을 살펴보면 확실히 단점이 뚜렷하고, 치명적이다. 그렇지만 데이터가 작고 단순하며, 유연한 가공이 필요하다면 해당 방식을 사용할 수 있다.
서버에서 정렬된 데이터를 응답받는 방식
express와 mysql을 사용하는 서버에서 데이터를 정렬한 후 응답을 해주는 코드는 다음과 같다.
// 정렬 기준과 순서를 쿼리 파라미터로 받기
const page = parseInt(req.query.page) || 1;
const pageSize = 10;
const offset = (page - 1) * pageSize;
const sortBy = req.query.sortBy || 'name';
const sortOrder = req.query.sortOrder === 'desc' ? 'DESC' : 'ASC';
const query = `
SELECT * FROM food
ORDER BY ${sortBy} ${sortOrder}
LIMIT ${pageSize}
OFFSET ${offset}
`;
connection.query(query, (error, results) => {
if (error) {
return res.status(500).json({ error: error.message });
}
res.json(results);
});마찬가지로 장단점을 살펴보자
장점
- 서버에서 데이터를 정렬하여 제공하므로, 클라이언트는 정렬된 데이터를 쉽게 받아올 수 있다.
- 데이터 분할(페이지네이션)을 할 때도 정렬이 유지되므로, 일관된 결과를 제공한다.
- 주로 클라이언트보다 서버의 성능이 좋기 때문에 대용량 데이터를 쉽게 처리 가능하다.
단점
- 프론트엔드에서 정렬 기준을 변경하려면 서버 API를 수정하거나, 정렬 옵션을 요청에 포함해야 한다.
- 서버 측 자원을 사용하는 것 이므로, 서버의 비용이 나간다.
결론
데이터가 수백만 개에 달하고, 이를 분할하여 가져와야 하는 경우에는 서버에서 정렬된 데이터를 응답받는 방식이 더 적합하다.
요약한다면 다음과 같다.
효율적인 페이지네이션
서버에서 정렬된 데이터를 페이지네이션하여 제공하면, 클라이언트는 분할된 정렬 데이터를 효율적으로 받아올 수 있다.
일관된 정렬
서버에서 전체 데이터를 정렬하고, 그 결과를 페이지네이션하여 제공함으로써, 사용자는 일관된 정렬 결과를 보장받을 수 있다.
성능 최적화
서버는 대량의 데이터를 효율적으로 처리할 수 있으며, 클라이언트는 상대적으로 적은 양의 데이터를 받아 처리하므로, 클라이언트 성능 문제를 최소화할 수 있다.
