[Vue] 라우터 가드 beforeEach vs beforeEnter Vue Router를 사용하여 프로젝트의 인증 로직이나 페이지 접근 제어를 구현하다 보면, 필연적으로 네비게이션 가드(Navigation Guard)를 사용해야 한다.이때 가장 많이 헷갈리는 두 가지가 바로 beforeEach와 beforeEnter이다.이름도 비슷하고 "페이지 진입을 막는다"는 역할도 같아 보이지만, 이 둘은 적용되는 범위(Scope)와 코드를 정의하는 위치에서 결정적인 차이가 있다.이 두 가지 가드를 언제, 어떻게 구별해서 써야 하는지 정리해보자.1. 주요 차이점구분router.beforeEach (전역 가드)beforeEnter (라우트 독점 가드)적용 범위애플리케이션의 모든 라우트 이동 시 실행특정 라우트에 진입할 때만 실행정의 위치라우터 인스턴스 (router 객체)라우터 설정 .. [Vite] 빌드 최적화: 초기 로딩 속도 개선 프로젝트를 배포하기 위해 빌드할 때, 초기 진입 속도가 느리다는 문제를 발견했다.원인을 분석해보니 초기 진입 시 로드되는 index 파일의 용량이 지나치게 크다는 것이 문제!Vite 환경에서 번들 사이즈를 분석하고, 다양한 기법을 통해 빌드 용량을 최적화한 과정을 정리했다.1. Visualizer로 용량 확인하기최적화를 시작하기 전, 어떤 파일이 용량을 많이 차지하는지 눈으로 확인하는게 좋음. visualizer은 빌드 시 파일이 차지하는 공간을 시각화하여 보여주는 플러그인// vite.config.jsimport { visualizer } from "rollup-plugin-visualizer";export default { plugins: [ visualizer({ filename:.. [Vue] Watch 동작 방식 Vue 3에서 watch를 사용할 때, 감시 대상을 전달하는 방식은 크게 두 가지가 있는데,이 두 방식은 단순히 문법의 차이가 아니라, 대상이 reactive냐 ref냐에 따라 감지 범위(Deep)와 이전 값(Old Value)의 참조 방식이 완전히 달라진다. 감시 대상(Source)을 직접 전달: watch(requestParams, ...)Getter 함수 형태로 전달: watch(() => requestParams, ...)01. 대상이 reactive 객체일 때const requestParams = reactive({ page: 1, limit: 10 }); 💠 Case A: 객체를 직접 전달할 때watch(requestParams, (newValue, oldValue) => { console.. [Vue] Watch, watchEffect Watch특정 반응형 상태가 변경되었을 때를 감지하여 다른 작업을 수행할 수 있음 ▪️기본 문법const message = ref('hello')watch(감지할 반응형 데이터, 콜백함수(변경된 새로운 값, 이전 값) => { // 변경될 때마다 수행할 작업});감지할 반응형 데이터 : ref, reactive, computed, getter 함수, array 타입이 될 수 있음예제 {{ message }} {{ message }} {{ message }} 특정 오브젝트의 속성을 감지하고 싶을 때는 getter 함수 이용 {{ message }} 반응형 객체를 직접 watch 하면 암시적으로 깊은 감시자가 생성됨즉, 속성 뿐만 아니라 중첩된 .. [Vue] 반응형(Reactivity) 반응형 상태 선언❏ reactive() Click : {{ state.count }} 객체나 배열과 같은 Reference Type(참조 타입)을 반응형 객체로 만들 수 있음 {{ message }} click 반응형 함수는 Reference Type(참조 타입)의 반응형 상태를 선언하는 함수이기 때문에, Primitive Type(원시 타입)은 반응형이 동작하지 않음❏ ref() {{ count }}기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 사용생성한 객체 안에는 value라는 하나의 속성만 포함하는데 value의 값은 ref() 메서드에서 매개변수로 받은 값을 가지고 있음이 객체는 내부의 value 값에 대한 반응형 참조(refer.. [Vue] 템플릿 문법 Vue 데이터 바인딩{{ message.split('').reverse().join('') }}기본 형태는 {{ data }} (이중 중괄호, 콧수염 괄호) 사용이중 괄호에서는 자바스크립트 표현식도 가능함 Vue Directives(뷰 디렉티브)v- 접두사가 붙은 특별한 속성으로, HTML 태그에 직접 추가하여 화면 요소를 동적으로 제어핵심 역할은 데이터가 변경될 때 화면(DOM)에 어떤 반응(Reactivity)을 일으킬지 Vue에게 알려주는 것v-once {{ message }} // Hello World!!!!!!!! (클릭할 때마다 느낌표가 붙음) {{ message }} // Hello World! Click! 데이터가 변경되어도 갱신(반응)되지 않는 일회성 보간 수행v-.. [Vue] Lifecycle Hooks(라이프사이클 훅) Lifecycle(라이프사이클)Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말함다시 말해, 인스턴스가 생성된 후 눈에 보여지고 사라지기까지의 단계 Lifecycle(라이프사이클) 단계생성 (Create) ➡️ 장착 (Mount) ➡️ 업데이트(Update) ➡️ 소멸(Unmount) Lifecycle Hooks(라이프사이클 훅)라이프사이클 단계에서 실행되는 함수 01. 장착 (Mount): 화면에 처음 나타날 때 ✍🏻 onBeforeMount()컴포넌트가 화면(DOM)에 삽입되기 직전에 호출가상 DOM은 준비되었지만, 실제 화면에서는 아직 볼 수 없음 ✍🏻 onMounted()컴포넌트가 화면에 완전히 그려진 후에 호출사용자가 화면에서 컴포넌트를 볼 수 있으.. [Vue] Component 컴포넌트란?UI를 독립적이고 재사용 가능한 조각으로 나눈 'UI 부품' 또는 '레고 블록' 컴포넌트 사용 이유재사용성 (Reusability) : 반복적인 코드를 캡슐화하여 재사용하기 위함조직화 (Organization) : 복잡한 페이지를 컴포넌트 단위로 나누면 코드 구조가 매우 깔끔하고 명확해짐독립적인 관리 (Maintainability) : 독립적으로 코드를 분리하여 쉽게 유지보수하기 위함 컴포넌트의 구조 {{ label }} : 컴포넌트의 HTML 구조를 정의하는 부분 ② main.js에서 각 컴포넌트 import 하기import {createApp} from "vue";import App from './App.vue'import AppHeader from './components/AppHead.. [Vue] Vue의 기본 Vue자바스크립트 기반의 프레임워크MVVM 패턴에서 뷰(View)의 역할과, 데이터를 연결하는 뷰모델(ViewModel)의 역할을 모두 수행 💡 MVVM (Model-View-ViewModel)- UI 개발을 위한 소프트웨어 아키텍처 패턴- 목적 : 화면 로직과 비즈니스 로직을 분리하여 깔끔하고 유지보수성, 협업 효율성 위함- Model : 핵심 데이터와 비즈니스 로직 / View : 사용자에게 보여지는 화면 / ViewModel : 뷰와 모델을 연결 Vue 설치방법❏ CDN ❏ NPMnpm init ❏ CLIVue CLI : 웹팩 기반 빌드 도구로, 특정 웹팩 기능에 의존하지 않는 한 vite로 프로젝트 시작하는 것을 권장npm i -g @vue/cliVite : Vue SFC를 지원하는 .. [Vue] Vue 관련 핵심 용어 라우팅 (페이지 이동)Router (라우터) 🗺️사용자가 웹사이트의 다른 페이지로 이동할 수 있도록 길을 안내하는 시스템사용자가 '메인 페이지'에서 '상품 상세 페이지'로 가는 경로를 설정하고 관리하는 역할vue-router 라이브러리를 통해 구현하며, 어떤 컴포넌트를 보여줄지 규칙을 정의함 Route (라우트) 📍라우터 내부에 설정된 각각의 페이지 경로를 의미라우터(Router)가 도시의 모든 길 정보가 담긴 '지도'라면, 라우트(Route)는그 지도 위에 표시된 경로 컴포넌트 간 통신 Props (프롭스) 🔽부모 컴포넌트에서 자식 컴포넌트로 데이터 전달할 때 사용하는 단방향 데이터 흐름 방식자식은 받은 데이터를 직접 수정할 수 없음 Emit (에밋)🔼자식이 부모에게 보내는 신호나 메시지pro.. Option API vs Compostion API Vue.js에서 컴포넌트를 작성하는 두 가지 방식인 Options API와 Composition API가 있다. 간단히 말해, 이 둘은 레고 블록을 조립하는 두 가지 다른 설명서라고 생각할 수 있다. Composition API는 Vue는 정해진 서랍장에 정리하는 방식이고, Composition API는 관련있는 것끼리 묶어 정리하는 방식이다. 자세한 비교는 아래에서 더 알아보자. 01. Option API 1) 정의Vue의 전통적인 방식으로, 컴포넌트의 data, methods, mounted 등 같은 옵션 객체를 사용하여 컴포넌트의 로직을 정의옵션으로 정의된 속성들은 함수 내부에서 THIS로 노출되며, 이는 컴포넌트 인스턴스를 가리킴 2) 동작 원리data : 컴포넌트에서 사용할 변수(데이터)meth.. [Vue] Router를 이용해서 페이지 전환하기 01. Vue Router 01) Router라운터는 브라우저에서 웹 페이지 이동할 때 화면을 전환하는 기능페이지를 이동할 때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 화면을 바꾸는 것 (=Single Page Application)라우팅을 이용하면 화면 간의 전환을 매끄럽게 할 수 있음뷰에서는 라우팅 기능을 지원해 주는 라이브러리가 있음뷰 라우터는 브라우저를 새로고침하지 않고 페이지끼리 자유롭게 이동할 수 있음페이지를 이동할 때, 변경된 요소의 영역에 컴포넌트를 갱신해 줌 02) Vue Router 설치 npm install --save vue-router 02. 새로운 프로젝트 생성 ① 터미널에 'vue create sep14' 입력하기vue create sep14 ② .. 이전 1 2 다음
