본문 바로가기
728x90
반응형

전체 글156

Vue 컴포넌트 기본 구조 컴포넌트 라이프 사이클 훅 beforeCreate created - 컴포넌트 생성 beforeMount mounted - 템플릿에 작성한 html 코드 랜더링 beforeUpdate updated beforeUnmount unmounted - 컴포넌트를 빠져나감 //view에 해당하는 html 코드를 작성 2023. 7. 30.
Vue.js - Lazy Load 적용하기 (비동기 컴포넌트) 큰 프로젝트의 경우 Vue CLI로 빌드하여 소스코드가 하나의 파일로 합쳐지면, 초기 랜더링 시간이 오래걸려 사용자 경험을 해칠 수 있다. Vue.js 에서 Lazy Load는 리소스를 컴포넌트 단위로 분리 -> 컴포넌트 또는 라우터 단위로 필요한 것들만 그때 그때 다운 받을 수 있게 하는 방법이다. Vue CLI3부터 prefetch 기능이 추가되었다. prefetch는 미래에 사용될 수 있는 리소스(예: 비동기 컴포넌트)를 캐시에 저장하여, 사용자가 접속했을 때 리소스를 빠르게 내려조는 기능이다. but 비동기 컴포넌트로 정의된 리소스를 (사용하지 않을수도 있는데) 전부 캐시에 담는 비용이 발생한다. 별도 분리된 chunk 파일 마다 각각 request 가 일어나고... 각각 다운로드 받아서 캐시에 .. 2023. 7. 30.
라우팅 Vue.js에서의 라우팅이란...? Vue 와 같은 SPA의 경우 페이지를 이동할 때 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅하여 화면을 갱신한다. 라우팅이란? 클라이언트에서 url 주소에 따라 페이지가 전환되는 것 Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 놓는다. 공식 플러그인인 vue-router를 이용해서 라우팅을 쉽게 구현할 수 있다. Vue-Router 설치 vue add router 2023. 7. 25.
Vue 프로젝트 파일 구조 Vue 프로젝트 파일 구조 node_modules npm으로 설치된 패키지 파일 모음 public webpack을 통해 관리되지 않는 정적 리소스 모음 src/assets image, css, font 등을 관리 App.vue Root 컴포넌트 main.js 가장 먼저 실행되는 자바스크립트 파일. Vue 인스턴스 생성 babel.config.js 바벨 설정 package-lock.json 설치된 package의 dependency 정보 관리 package.json 프로젝트에 필요한 package를 정의하고 관리 2023. 7. 25.
--save 옵션 패키지 설치 시 --save 옵션 --save 옵션을 사용하면 package.json 파일에 설치한 패키지 정보가 추가된다. 패키지 정보를 추가한 package.json 파일을 공유하면 명령어 npm install 한방으로 현재 내 프로젝트 디렉토리에 없는 패키지를 한 번에 설치할 수 있다. 이 방식으로 하면 깃헙에 패키지 파일을 업로드할 피룡가 없다. 2023. 7. 25.
728x90
반응형

티스토리툴바