[Spring Boot][TROUBLESHOOTING] 6초 이상의 첫 로딩 시간 문제 해결

1. 6초 이상의 첫 로딩 시간문제

백엔드는 Spring Boot, 프런트엔드는 React.js로 작성된 서비스이다. 이 서비스에 접근하면 6초 이상의-극악의-로딩 시간이 필요했다.

 

2. 원인

크롬 개발자 도구에서 확인해 보니 전체 로딩 시간 중 5초 이상을 백엔드 API 호출이 차지하고 있었다. 백엔드 코드(서비스 클래스)를 확인해 보니 API 호출 시 GET과 UPDATE 요청이 각각 순차적으로 이루어지며, UPDATE 요청이 완료되면 GET 요청 결과를 응답하도록 작성되어 있었다. UPDATE 요청도 여러 번 시도되고 있었기 때문에 이 부분에서 병목 현상이 발생하고 있다고 보았다.

[그림 1] 6초 이상의 로딩 시간 중 대부분이 API 요청에 사용되고 있다.

 

 

3. 비동기 처리하여 1초 미만으로 개선

UPDATE 요청을 비동기 처리하여 GET 요청이- UPDATE 요청이 완료될 때까지 기다리지 않고-즉시 응답되도록 하였다. 그 결과 [그림 2]와 같이 1초 이내로 로딩이 완료될 수 있었다.

[그림 2] 비동기 처리 후 API 요청에 대한 응답이 1초 미만으로 개선되었다.

 

개선한 코드의 대략은 아래와 같다. UPDATE 요청 부분을 비동기 처리하기 위해 새로운 서비스 클래스를 생성해 @Async를 적용하고, 기존 서비스 클래스는 추가한 서비스 클래스의 객체를 주입받는 방식으로 수정하였다.

// 기존 서비스 클래스 수정
// (생략)
@Service
@AllArgsConstructor
public class HomeService {
    // (생략)
    // int resUpdate = promotionMapper.updateCallCnt(all); // 기존 코드
    promotionService.updateCallCntAsync(all); // 비동기 처리한 서비스 객체 사용. 반환값이 없으므로 변수에 할당하지 않았음.
    // (생략)
 }

// 비동기 처리 위해 새로운 서비스 클래스 추가 정의
//(생략)
@Service
public class PromotionService {

    private final PromotionMapper promotionMapper;

    public PromotionService(PromotionMapper promotionMapper) {
        this.promotionMapper = promotionMapper;
    }

    @Async // 비동기 처리
    public void updateCallCntAsync(List<PromotionDTO> all) {
        promotionMapper.updateCallCnt(all);
    }

}