Jae Front-end Study

결과 화면

페이지네이션(Pagination)이란

페이지네이션은 대량의 데이터를 관리하고 효율적으로 표시하기 위한 기술로 사용자가 웹 페이지 상에서 여러 페이지로 나뉜 데이터를 탐색할 수 있도록 하는 방법이다.

페이지네이션을 백앤드에서 만들어야 하는 이유

1. 서버 리소스 효율성 증가 : 페이지네이션은 클라이언트가 필요로 하는 양의 데이터만 전송하여 서버 리소스를 효율적으로 활용한다.
2. 데이터베이스 부하 감소 : 페이지네이션을 통해 서버는 필요한 데이터만 데이터베이스에서 가져와 부하를 감소시킨다.
3. 클라이언트 성능 향상 : 서버와 데이터베이스에서 필요한 데이터만 요청하여 클라이언트의 로딩 시간을 최소화해 사용자의 경험을 향상한다.
4. 검색 엔진 최적화(SEO) : 페이지네이션은 검색 엔진이 페이지 간 이동을 파악하고 데이터를 효과적으로 색인화할 수 있도록 도와준다.

간단히 말해, 데이터의 양이 상대적으로 적은 경우(예: 100개), 페이지네이션의 유무에 따른 성능 차이를 느끼지 못할 수 있지만, 데이터의 양이 많아지면(예: 10만개 이상) 클라이언트에서 서버로 데이터를 요청하고 수신하는 과정에서 서버 및 데이터베이스 부하가 증가하게 된다. 

따라서 백엔드에서 페이지네이션을 구현해 데이터를 효율적으로 관리하고 사용자의 경험을 최적화할 수 있다.

1. board.service.ts

service 파일에는 비즈니스 로직이나 데이터 조작 등을 수행하는 메서드를 구현한다.

• src/board/board.service.ts

1. paginate 메서드를 만든다.
2. page 매개변수로 페이지 번호를 지정하고, 기본값을 1로 설정한다.
3. take 변수는 한 페이지에 표시될 아이템 수를 나타낸다.
4. findAndCount 메서드는 데이터베이스에서 페이징 된 데이터를 검색하고, 해당 데이터와 전체 아이템 수를 배열로 반환한다.
5. 페이지와 관련된 meta 정보를 return 한다.

@Injectable()
export class BoardService {
  constructor(private readonly boardRepository: BoardRepository) {}

  async paginate(page = 1): Promise<any> {
    const take = 5;

    const [board, total] = await this.boardRepository.findAndCount({
      take,
      skip: (page - 1) * take,
    });

    return {
      data: board,
      meta: { take, total, page, last_page: Math.ceil(total / take) },
    };
  }
  
  ...
}

2. board.controller.ts

• src/board/board.controller.ts

1. @Get()으로 HTTP GET 요청을 처리하는 핸들러임을 나타낸다.
2. @Query('page')를 통해 쿼리 파라미터를 받아와 page 변수에 할당하고, 기본값을 1로 설정한다.
3. boardService 클래스에 정의된 paginate 메서드를 호출해서 return 한다.

@Controller('board')
export class BoardController {
  constructor(private readonly boardService: BoardService) {}

  @Get()
  async all(@Query('page') page = 1): Promise<any[]> {
    return await this.boardService.paginate(page);
  }
  
  ...
}

포스트맨(postman)을 통해서 결과를 확인할 수 있다.

url 뒤에 page=1 쿼리 파라미터가 생겼다.

쿼리 파라미터(Query Parameter)는 URL 끝에 ?로 시작하며, 그 뒤에 'key=value' 형태로 데이터를 전달하는 방식이다.