[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:.. [GPU] NVIDIA MIG(Multi-Instance GPU)의 구조적 이해: Profile과 Config 01. MIG(Multi-Instance GPU)란?하나의 물리적 GPU를 최대 7개의 독립적인 GPU 인스턴스로 분할하여 사용할 수 있게 하는 기술입니다.기존의 시간 분할(Time-slicing) 방식이나 소프트웨어적인 가상화와 달리, MIG는 하드웨어 레벨에서 격리(Isolation)를 제공합니다. 즉, 분할된 각 인스턴스는 고유한 메모리, 캐시, Compute Core를 할당받습니다. 이로 인해 하나의 인스턴스에서 부하가 발생하더라도 다른 인스턴스의 성능에 영향을 주지 않는 것이 특징입니다. 02. 핵심 구성 요소MIG를 구성할 때 가장 혼동하기 쉬운 두 가지 개념이 Instance Profile과 GPU Config(Placement)인데,이를 '조각'과 '조합'의 관점에서 이해하면 명확합니다. .. [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.. [CSS] SCSS 문법 01. 중첩 (Nesting)HTML 구조처럼 CSS를 겹쳐서 작성할 수 있음/* SCSS */.navbar { width: 100%; padding: 1rem; ul { list-style: none; } li { display: inline-block; }} 02. 상위 선택자 참조 (&)중첩 안에서 부모 선택자를 지칭할 때 사용주로 가상 클래스(:hover)나 클래스 결합할 때 씀/* SCSS */.button { background: blue; /* .button:hover 와 동일 */ &:hover { background: darkblue; } /* .button.active 와 동일 */ &.active { background: red; }} 03.. [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.. [JS] 얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)객체를 복사할 때 최상위 속성만 복사하고, 그 안에 또 다른 객체나 배열이 있으면 그 주소값만 복사'바로가기 아이콘'을 복사하는 것과 같다고 할 수 있습니다.아이콘을 복사해서 바탕화면에 두 개가 생겼지만, 두 아이콘 모두 결국 똑같은 원본 프로그램을 가리킵니다.하나를 통해 원본을 바꾸면 다른 바로가기에도 영향이 갑니다. 예시 코드 👀const original = { name: "peazh", age: 20, address: { city: "서울" }};// 스프레드 문법을 사용한 얕은 복사const shallowCopy = { ...original };// case 1.// 복사본의 최상위 속성 변경shallowCopy.name = 'pp';// 원본 객체.. [HTTP] HTTP 상태 코드 HTTP 상태 코드는 클라이언트(브라우저)가 서버에 무언가를 요청했을 때, 서버가 그 요청을 어떻게 처리했는지 알려주는 세 자리 숫자로 된 결과 이 코드를 통해 요청이 성공했는지, 실패했다면 왜 실패했는지(예: 페이지가 없어서, 권한이 없어서, 서버에 문제가 생겨서 등)를 알 수 있습니다. 상태 코드는 크게 5개의 그룹으로 나뉩니다.1xx: 정보 (Informational)요청을 받았으며, 처리 중이라는 의미 (거의 사용되지 않음)2xx: 성공 (Success)요청이 성공적으로 접수되고, 처리되었다는 의미200 OK : 요청이 성공적으로 처리202 Accepted : 요청을 받았지만 처리가 완료되지 않은 상태201 Created : 요청이 성공하여 새로운 리소스가 생성204 No Content : 요청은.. 이전 1 2 3 4 ··· 15 다음
