👩🏻💻문제점
시작은 회사 관리자 페이지 로딩 시간이었다.
몇몇 페이지를 제외하고는 대부분의 페이지를 여는데 7초 이상이 소요되는 문제였다.
처음에는 이 문제를 어떻게 해결하나 막막했다.
회사에 와서 배운점은 문제 해결의 시작은 로그라는 것이다.
원인파악
관리자 페이지의 로그를 보기 시작했다.
로딩이 걸리고 화면이 보여지기까지 특정 메소드에서 시간을 오래 잡아먹는 것을 확인했다.
[2023-12-29 09:14:17:56872034][http-nio-18080-exec-6] INFO log.log - method name is select****
해당 메소드의 코드를 살펴보았고 쿼리까지 찾아냈다.
해당 쿼리의 파라미터 값은 로그인 아이디를 사용했기에 관리자 아이디를 넣고 쿼리를 실행해보자 7초 이상이 소요되는 것을 확인했다.
이 쿼리에 대한 튜닝이 필요한 시점이었다.
체크사항1
일단 이 쿼리가 어디에서 사용되고 있는지를 확인해보았다. 해당 메소드를 호출하는 자바스크립트 공통 코드를 확인하게 되었다.
해당 function은 각 페이지마다 사용되고 있었다.
function ****(){
$.ajax({
type: 'get',
url: '/***/***/**',
async:false,
dataType: 'json',
success: function (data) {
*** = data;
***(this);
},
error: function (message) {
alert(message);
}
});
} 
이 기능은 아이디 리스트를 가져오는 데 사용하고 있었고 모든 페이지에서 활용되는 기능이었기에 대부분의 페이지에서 로딩이 오래 걸렸던 것이다.
체크사항2
그리고 쿼리에서 가져오는 결과값을 어떻게 활용하고 있는지를 파악했다.
이 과정에서 알게된 점은(팀장님을 통해서도 확인했다.) 해당 쿼리가 여러 개발 단계를 거치면서 불필요한 값들을 가져오고 있었고 일부 컬럼은 오류가 있어 중복된 데이터를 줄지어 가져오고 있었다.
그래서 필요한 컬럼만 select하도록 수정했다.
쿼리 오류 해결
처음에 쿼리를 수정할 때, 쿼리 자체의 문제점을 파악하지 못했다. 기존 쿼리가 속도만 느릴 뿐, 값 자체는 제대로 가져온다고 생각하고 성능 개선에만 집중했다.
사실 페이지가 큰 문제 없이 작동했던 건 프론트엔드 자바스크립트 코드가 필요한 데이터만 걸러주고 있었기 때문이다. 최종적으로 프론트엔드에서 데이터를 어떻게 활용하는지 확인하지 못한 점이 가장 큰 실수였다.
🚨문제 파악 및 해결 과정
그리고 각각의 파라미터마다 데이터를 가져오는 패턴을 찾다가 시간을 많이 허비했다. 애초에 데이터를 잘못 가져오고 있었기 때문에 어떤 값은 모든 데이터를 가져오고, 어떤 값은 본인 데이터만 가져오는 등 기준점을 도저히 알아낼 수 없었다.
최종적으로는 필요한 데이터만 출력하도록 쿼리를 수정해서 문제를 해결했다. 이 과정에서 기존 쿼리가 훨씬 간결해졌다.
결론
회사 코드를 직접 올릴 수 없기에 나중에 이 내용이 낯설게 느껴질 수 있겠으나, 쿼리 문제 발생 시 단순히 쿼리만 보지 않고 전체 코드 흐름을 파악하여 수정할 부분을 찾아야 한다는 점을 기억하자.
💁🏻♀️ 속도 문제는 최종적으로 쿼리 자체를 수정하여 해결하는 것이 맞지만, 프론트엔드에서 데이터를 어떻게 받아 조건을 주고 출력하는지 먼저 확인하는 과정도 중요하다.
