페이지네이션 API 작성

패키지 작성

backend/src/api 디렉토리에 디렉토리 및 파일을 생성합니다.

스캐폴딩 규칙은 아래와 같습니다.

• 기능/dto

• 기능/기능.controller.ts

• 기능/기능.service.ts

• 기능/기능.module.ts

본 샘플에서는 아래와 같이 디렉토리 및 파일을 생성하였습니다.

user/dto

user/user.controller.ts

import { Controller } from '@nestjs/common'
import { ApiTags } from '@nestjs/swagger'
import { UserService } from './user.service'

@ApiTags('user')
@Controller('api/user')
export class UserController {
  constructor(private userService: UserService) {}
}

user/user.service.ts

import { Inject, Injectable } from '@nestjs/common'
import { DataSource } from 'typeorm'

@Injectable()
export class UserService {
  constructor(
    @Inject('DATA_SOURCE')
    private datasource: DataSource
  ) {}
}

user/user.module.ts

import { Module } from '@nestjs/common'
import { UserController } from './user.controller'
import { UserService } from './user.service'

@Module({
  imports: [],
  controllers: [UserController],
  providers: [UserService]
})
export class UserModule {}

작성한 모듈을 등록하기 위해서 아래의 파일을 수정합니다.

backend/src/app.module.ts

import { UserModule } from './api/user/user.module'

@Module({
  imports: [
    ...  
    UserModule
    ...
  ]
})

export class AppModule {}

페이지네이션 API 작성

dto/get-user-list.dto.ts

import { ApiProperty } from '@nestjs/swagger'

export class GetUserListDto {
  @ApiProperty({
    description: 'page',
    example: 1
  })
  page: number
}

user.controller.ts

import { Controller, Get, HttpStatus, Query, Res } from '@nestjs/common'
import { ApiTags } from '@nestjs/swagger'
import { GetUserListDto } from './dto/get-user-list.dto'
import { UserService } from './user.service'
import { Response } from 'express'

// ANCHOR user controller
@ApiTags('user')
@Controller('api/user')
export class UserController {
  constructor(private userService: UserService) {}

  // ANCHOR get user list
  @Get('getUserList')
  async getUserList(@Res() res: Response, @Query() dto: GetUserListDto) {
    // get user list
    const data = await this.userService.getUserList(dto)

    // return 200 response
    res.status(HttpStatus.OK).json({
      statusCode: HttpStatus.OK,
      message: '',
      data
    })
  }
}

user.service.ts

import { User } from './../../entities/user.entity'
import { GetUserListDto } from './dto/get-user-list.dto'
import { Inject, Injectable } from '@nestjs/common'
import { DataSource } from 'typeorm'

@Injectable()
export class UserService {
  constructor(
    @Inject('DATA_SOURCE')
    private datasource: DataSource
  ) {}

  // ANCHOR get user list
  async getUserList(dto: GetUserListDto) {
    const limit = 12
    const offset = (dto.page - 1) * limit

    // count
    const count = await this.datasource
      .getRepository(User)
      .createQueryBuilder('u')
      .select(['count(1) as count'])
      .where('1=1')
      .getRawOne()

    // data
    const data = await this.datasource
      .getRepository(User)
      .createQueryBuilder('u')
      .select([
        'u.id as id',
        'u.account as account',
        'u.username as username',
        'u.password as password',
        'u.role as role',
        'u.created_at as createdAt',
        'u.updated_at as updatedAt'
      ])
      .where('1=1')
      .orderBy('u.created_at', 'DESC')
      .limit(limit)
      .offset(offset)
      .getRawMany()

    return {
      count: Number(count.count),
      data
    }
  }
}

결과

API 함수 작성

디렉토리 및 파일 작성

frontend/src/apis/user/index.ts

import axios from 'axios'
import { CommonResponse } from 'src/common/interface'

const rootUrl = '/api/user/'

// ANCHOR get user list
export const getUserList = (params: object) => {
  const url = `${rootUrl}getUserList`
  const response = axios.get<CommonResponse>(url, { params })

  return response
}