Vue 빌드 시 chunk-vendors 번들 크기 최적화로 초기 로딩 속도 개선하기
프로덕션 환경에서 Vue 애플리케이션을 빌드하면 chunk-vendors 번들이 과도하게 커져 초기 화면 로딩이 지연되는 문제가 자주 발생한다. 이 글에서는 빌드 단계와 서버 설정을 함께 다루어 전송 크기를 줄이고 실제 로딩 시간을 단축하는 방법을 살펴본다.
compression-webpack-plugin으로 gzip 자산 생성
빌드 시점에 정적 파일을 gzip으로 미리 압축하면 서버 부담을 ...
8월 7일 02:52에 게시됨
Vue 프로젝트에서 사용자 정의 SVG 아이콘 컴포넌트 구현하기
프로젝트에서 vue-element-admin을 활용할 때, 학습 방법으로 직접 구성 요소를 만들어보는 방식을 선호합니다. 이러한 접근은 느릴 수 있지만 세부 사항까지 깊이 이해하는 데 도움이 됩니다. 이번 문서에서는 사용자 정의 SVG 아이콘 컴포넌트를 만드는 과정과 주요 단계를 기록하겠습니다.
먼저 svg-sprite-loader를 설치합니다.
yarn add svg-sprite-loader
다음으로, ...
7월 20일 06:06에 게시됨
Vue.js 개발 핵심 팁과 모범 사례
목차
Vue 2와 Vue 3의 주요 차이점
1.1 성능 향상
1.2 컴포지션 API
1.3 향상된 TypeScript 지원
1.4 새로운 생성 방식
1.5 Fragments, Teleport 및 Suspense
Webpack 명령어 및 패키지 관리
2.1 cross-env 의존성 추가
2.2 스크립트에서 cross-env 지정
2.3 불필요한 코드 제거
2.4 DefinePlugin을 이용한 환경 변수 설정
2.5 환경 변수 판별
2.6 localStorage를 이용 ...
7월 18일 17:14에 게시됨
Vue CLI 기반 프로젝트 초기화 및 구조 분석
Vue CLI는 Vue.js 공식 팀에서 제공하는 강력한 프로젝트 스캐폴딩 도구로, 개발자가 빠르게 표준화된 Vue 애플리케이션을 구성할 수 있도록 지원합니다. 이 도구는 반복적인 설정 작업을 자동화하고, 웹팩 기반의 빌드 환경, 코드 검사, 라우팅, 상태 관리 등을 통합하여 개발 생산성을 크게 향상시킵니다.
설치는 npm 또는 yarn을 통해 전역으로 수행할 수 있습니 ...
7월 18일 09:22에 게시됨
프론트엔드 빌드 도구 및 공학적 설계
Webpack의 핵심 구성 요소와 최적화 전략
Webpack은 모듈 기반 개발 환경에서 자바스크립트 외 파일 형식을 처리할 수 있도록 하는 중심적인 빌드 시스템이다. 그 작동 원리는 다음과 같은 핵심 개념들로 구성된다.
Loader
원본 파일(예: .css, .less, .ts)을 자바스크립트 모듈로 변환하는 역할을 한다. 각 로더는 하나의 함수이며, 입력된 소스를 처리하여 다음 로더 또 ...
7월 14일 20:19에 게시됨
Vue 프로젝트 기본 설정 가이드
1. 프로젝트 초기화
Vue.js 기반 프로젝트를 구축하려면 먼저 Node.js를 설치해야 합니다. 설치 후 NPM을 통해 Vue CLI 3.0 이상 버전을 전역으로 설치합니다. CLI는 vue ui 명령어로 그래픽 인터페이스를 제공하거나, vue create <project-name> 명령어로 터미널에서 직접 프로젝트를 생성할 수 있습니다.
프로젝트 생성 시 중요한 점은 설정 파일을 분리하는 것입 ...
7월 5일 20:31에 게시됨
웹 리소스 로딩 최적화: Prefetch와 Preload의 Webpack 통합
리소스 힌트 개요
웹 성능 향상을 위해 브라우저에 리소스 로딩 우선순위를 지시하는 prefetch와 preload를 활용할 수 있습니다. 두 기술 모두 link 태그의 rel 속성으로 구현됩니다.
<!-- 리소스 미리 가져오기 -->
<link rel="prefetch" href="리소스_URL">
<!-- 리소스 우선 로딩 -->
<link rel="preload" href="리소스_URL" as="리소스_타입"&g ...
6월 18일 01:12에 게시됨
트리셰이킹을 활용한 프론트엔드 성능 최적화 기법
트리셰이킹의 개념과 작동 원리
트리셰이킹은 불필요한 자바스크립트 코드를 정적 분석을 통해 제거하는 최적화 기법입니다. 이 용어는 '나무를 흔들어 쓸모없는 잎사귀를 떨어뜨리는 것'에 비유되며, 실제 구현에서는 코드의 추상구문 트리(АST)를 기반으로 사용되지 않는 모듈이나 함수를 식별하고 삭제합니다.
이 기법은 ES6 모듈 시스템의 정적 구조성에 의존합니다. ...
6월 10일 22:51에 게시됨
React 기반 테이블 컴포넌트 구현 가이드
프로젝트 구조 및 구성 요소 설명
기본적인 React 프로젝트 구조는 다음과 같습니다:
table-demo/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── DataTable.jsx
│ ├── App.jsx
│ └── index.jsx
├── package.json
└── README.md
public/: 정적 파일과 기본 HTML 문서를 포함합니다.
src/: 애플리케이션의 핵심 소스 코드가 위치합 ...
6월 6일 02:42에 게시됨
MERN 기술 스택 고급 튜토리얼 (7)
서버 렌더링
이 장에서는 React의 핵심 개념 중 하나인 서버에서 HTML을 생성하는 기능을 탐구합니다. 이를 통해 동일한 코드베이스를 사용해 서버와 클라이언트 모두에서 렌더링할 수 있는 동일성 애플리케이션(isomorphic app)을 구축할 수 있습니다.
기존의 단일 페이지 애플리케이션(SPA)은 초기에 빈 문서를 로드하고, 데이터를 비동기적으로 가져와 브라우저에서 DOM ...
5월 23일 10:42에 게시됨