(지금은 리팩토링 됨 : [UniLetter] 서버 페이징 리팩토링 (TypeScript + TypeORM) )

1. 로딩이 너무느려..

1.1 기존 로직

1. 초기화면 접속했을 때
2. 로그인 여부(회원여부) 판단
   3.1 로그인 안 한 비회원의 경우 전체 이벤트 내려줌
   3.2 로그인 한 회원의 경우 차단한 다른 유저가 있는지 검사
   4.1 차단한 유저가 있는 경우 그 유저들이 작성한 이벤트 빼고 내려줌
   4.2 차단한 유저가 없는 경우 이벤트 전체 내려줌
   

1.2 이벤트 개수가 많아질수록...

로딩 시간이 오래걸리는 문제가 발생했다..

2. 서버 페이징 API 추가

기존에 있는 이벤트를 모두 내리는 API는 이전 버전에서도 계속 있어야 하기에
그대로 두고 새로운 API를 만들었다ㅏ.

2.1 define router

routes/events/getEventsbyPage.ts

export default defineRoute('get', '/events-by-page', schema, async (req, res) => {
    const {userId} = req;
    const {pageNum, pageSize} = req.query;

    const eventInformation = await EventService.getEventsbyPage(userId, pageNum, pageSize);
    const totalEvent = await EventService.getTotalEvent();

    const eventPageInformation = {  maxPage: Math.floor(totalEvent / pageSize) ,
        totalEvent: totalEvent,
        event: eventInformation,
    }

    return res.json(eventPageInformation);
});

2.1.1 query에 pageNum과, paseSize를 담아서 호출하는 GET method

	query: {
        		pageNum: stringAsInt, // 페이지 넘버 (0부터 시작)
        		pageSize:stringAsInt // 한 페이지에 내려줄 이벤트 개수
    },

2.1.2 response type

src/entity/schemes.ts

export const EventPageResponseScheme = {
  maxPage: z.number(),
  totalEvent: z.number(),
  event: z.object(EventResponseScheme),

};

• maxPage : 최대 페이지 수 (totalEvent/pageSize 올림값)
• totalEvent : 총 내려줘야 할 이벤트 갯수

2.2 Event Service

src/service/EventService.ts

2.2.1 getEventsbyPage : 페이지 별로 이벤트 가져옴

  // 페이지 별로 이벤트 가져옴 (NEW) TODO
  async getEventsbyPage(userId?: number, pageNum?:number, pageSize?:number ): Promise<Event[]> {
    if(pageNum != null  && pageSize != null){
      // 일단은 회원 비회원 구분 X
      return await this.getEventsRegardlessBlockingsbyPage(pageNum, pageSize);
    }else {
      return await this.getEventsRegardlessBlockings();
    }
  }

• 일단 현재는 회원, 비회원 여부를 구분하지 않는다.
• pageNum != null && pageSize != null 두 항목 모두 비어있지 않을 경우만 페이징 적용한다.
• 그렇지 않을 경우 전체 이벤트를 내려주지만, 사실 그 전에 라우터에서 에러 발생함.

2.2.2 getEventsRegardlessBlockingsbyPage : 차단 사용자 고려하지 않고 이벤트를 페이지 별로 가져오기

  private async getEventsRegardlessBlockingsbyPage(pageNum:number, pageSize:number): Promise<Event[]>  {
    const offset = pageSize * pageNum;

    return await Event.find(
        {order: {id: 'DESC'},
          skip: offset,
          take: pageSize,});
  }

• id 값 역순으로 가져온다.
• offset 부터 시작해서
• 한 번에 pageSize 사이즈 만큼!

2.2.2 getTotalEvent : 전체 이벤트 개수 가져오기

  // 전체 이벤트 수 가져오기
  async getTotalEvent(): Promise<number> {
    return await Event.count();

  }