Vue 2와 Vue Router를 활용한 라우팅 설정 및 페이지 렌더링
Vue 컴포넌트 템플릿 생성
프로젝트 구조가 잡혔다면, 이제 실제 화면을 구성할 뷰 컴포넌트를 작성해야 합니다. 간단한 예제로 목록을 보여주는 메인 화면과 상세 내용을 보여주는 화면 두 가지를 만들어 보겠습니다.
src/views 디렉토리를 생성하고, 그 안에 HomeView.vue와 DetailView.vue 파일을 만듭니다.
HomeView.vue:
<template>
<section class="home- ...
9월 28일 19:43에 게시됨
Vue 2와 Webpack 4를 사용한 SSR 프로젝트 구성
사전 준비 사항
Node.js가 설치되어 있고 환경 변수 설정이 완료되어야 합니다. Node 10 버전을 권장합니다. https://nodejs.org/en/download/
참고 자료: 이전 게시물 참조
Debian에 Node.js 설치
Yarn 및 npm 레지스트리 설정
시작하기
프로젝트 초기화
먼저 webapp이라는 디렉토리를 생성하고 yarn 명령어를 사용하여 초기화합니다.
yarn init
전체 명령어 실행 예시
...
9월 5일 11:43에 게시됨
Webpack Dev Server와 HMR을 활용한 효율적인 개발 환경 구축
웹 애플리케이션 개발 과정에서 코드 수정 사항을 확인할 때마다 매번 빌드 명령어를 실행하고 브라우저를 새로고침하는 작업은 개발 생산성을 저해하는 요소입니다. Webpack은 이러한 번거로움을 해결하기 위해 파일의 변경 사항을 감지하고 자동으로 결과물을 업데이트하는 여러 가지 방식을 제공합니다.
Webpack 자동 빌드 방식
Webpack에서 코드 변경을 감지 ...
8월 27일 14:53에 게시됨
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에 게시됨