프론트엔드 최적화 썸네일형 리스트형 가상스크롤 vue-virtual-scroller 활용한 대량 데이터 테이블 성능 최적화 혹시 지금 만들고 있는 서비스에 데이터가 엄청나게 많아서 화면이 버벅거리거나, 스크롤 할 때마다 렉 걸려서 짜증난 적 있으신가요?저도 회사의 백오피스 화면인 실시간 주문 관제 시스템에서 예전부터 주문이 폭주하는 날이면 화면이 느려져서 관제팀에서 '이것 좀 어떻게 안 될까요?' 하고 계속 요청하셨던 고질적인 문제였어요. 다들 바쁘고, 백엔드 수정은 또 큰 작업이다 보니 쉽게 손대지 못하고 있었는데, 이번에 제가 프론트엔드 단에서 이 문제를 시원하게 해결하고 관제팀으로부터 '진짜 편해졌어요!', '속 시원하다!'는 칭찬까지 들었답니다! 😊 오늘은 그 해결 과정을 한번 풀어보려고 해요 ... 이전에 있었던 문제점: 많은 주문 목록이 화면을 버겁게 만들었어요 우리 실시간 주문 관리 시스템에서 이런 문제들이 있.. 더보기 Github Action Cache 를 사용하여 CI/CD 최적화 로컬 환경에서 개발을 할 때는 외부 패키지를 최초에 딱 한 번만 설치하면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방하여 워크플로우의 최적화를 해보았습니다. 테스트 환경Runner 환경: ubuntu-20.04Node.js 버전: 20.15.0 (.nvmrc 파일 기반)패키지 매니저: Yarn캐싱 대상: node_modules의존성 파일: yarn.lock 해당 레포에는 `.github/workflows` 폴더 안에 `deploy-dev/release/production.yml` (환경별로 각각의 3개의 파일이 존재) 이 있는데요. PR 을 생성.. 더보기 이전 1 다음
