송민준의 개발노트

Lazy Loading이란? react, vue와 같은 SPA로 개발을 하면 사용자가 처음 진입 시 프로젝트와 관련된 모든 리소스를 다운 받는다. 그렇다면 현재 보여지는 화면 외에 다른 리소스까지 다운을 받게 되고 이는 프로젝트가 커질 수록 영향을 받게 된다. 이러한 문제를 개선하기 위한 방법이 Lazy Loading이다. 말 그대로 로딩을 지연한다는 것이다. 적용 방법은 간단하다. Vue Cli와 같은 도구를 사용하면 빌드 파일을 분리할 수가 있다. route를 설정하는 파일에서 특정 컴포넌트를 가져올 때 주석으로 webpackChunkName을 추가해주면 된다. 예를 들어 아래와 같이 변경이 가능하다. // 기존 import Notice from '@/views/board/Notice.vue' // ..

데이터를 다루다가 어느 순간부터 특정 테이블 쿼리가 느려지기 시작했다. 5개 정도 테이블을 조인 걸어서 조회하는 것이였는데... 실행계획이 이상하게 잡혔나싶어서 보니 정상적이다... 인덱스도 바뀐게 없는데...!!? 이리저리 힌트 바꿔가면서 삽질해봤지만 10초 정도 시간 줄이는게 끝... 물론 쿼리도 개선해야 할 부분이 있었다. 필요없는 칼럼들이 포함되어 있고 조건절에 'exists'가 아닌 'in'으로만 이루어져 있고... 하지만 더 좋은 방법이 있었다. Analyze를 사용하는 것이었다. Analyze란 무엇일까? - 인덱스, 테이블, 클러스터의 통계정보를 생성한다. 생성된 정보들은 비용기준의 옵티마이저가 가장 효율적인 실행계획을 수립하기 위해 최소비용을 계산할 때 사용된다. 구조를 확인하는 것은 물..