vue7 [Vue] 이벤트 핸들링 - @click, .prevent, .stop 1. 서론Vue 에서는 DOM 이벤트를 '@' 디렉티브로 간단히 연결할 수 있습니다.또한 '.prevent', '.stop' 같은 수식어(modifier) 를 붙이면 이벤트의 기본 동작을 쉽게 제어할 수 있다. 2. @click 이란?Vue 에서 DOM의 click 이벤트를 처리할 때 사용하는 디렉티브 vue클릭 @click은 v-on:click 의 축약형@input, @change, @keyup 등도 가능 3. .prevent 수식어HTML 태그의 기본 동작을 막을 때 사용(예 : 태그 클릭 시 페이지 이동 방지) vue링크= 아래 코드와 같음.jsonClick(e) { e.preventDefault();} 4. .stop 수식어이벤트의 버블링(전파) 을 막고자 할 때 사용(예 : 자식 요소 클.. 2025. 7. 19. [Vue] Axios 인터셉터 & 로딩 상태 관리 1. 서론Vue에서 API를 많이 호출하다 보면 매번 토큰을 붙이거나, 로딩 상태를 관리하는게 번거로워집니다.이런 반복을 줄이고, 사용자 경험을 향상시키기 위한 실무기술이 바로 '인터셉터' 와 '로딩 상태 관리' 입니다. 2. 인터셉터 (Interceptor) - 토큰 자동 삽입 2-1. 인터셉터란?Axios 요청/응답을 중간에 가로채서 공통 처리할 수 있는 기능-> 모든 요청에 인증 토큰을 자동으로 넣거나-> 응답 에러를 한 곳에서 처리할 수 있음. 2-2. 예시 :요청 시 토큰 자동 추가js// api.js ( 공통 axios 인스턴스 )import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example... 2025. 7. 19. [Vue] Axios로 API 연동하는 구조 1. 서론실무에서도 무조건 사용하고, 면접에서도 'API는 어떻게 호출했나요?' 질문 나오는 부분이다.지금까지 asyncData, fetch, mounted, created 에서도 봤지만 이번엔 Axios 에만 집중해보자. Vue에서 외부 API와 통신할 때는 보통 Axios 라이브러리를 사용합니다.Axios는 fetch 보다 사용법이 간단하고, 에러 처리와 인터셉터 등이 풍부해서 널리 쓰입니다. 2. 설치 방법bashnpm install axios 또는 Nuxt.js 에서는 모듈 형태로 사용 가능 bashnpm install @nuxtjs/axios 3. 기본 사용 예시import axios from 'axios'; export default { data() { reutrn { .. 2025. 7. 19. [Vue] v-for + key 의 의미 1. v-for 란?v-for 는 Vue 에서 배열이나 객체를 반복 렌더링할 때 사용하는 디렉티브입니다.반복 렌더링을 할 때는 key 속성 사용이 필수적입니다. 2. 기본 문법 {{ item.name }} 3. key가 왜 필요할까?Vue에는 DOM 조작 최적화를 위해 Virtual DOM을 사용합니다.화면에 변화가 생기면, 새로운 Virtual DOM과 이전 것을 비교(diffing) 하여 바뀐 부분만 실제 DOM에 반영합니다.이때 각 항목을 정확히 식별하기 위한 것이 바로 key 입니다. 4. key 가 없으면 생기는 문제 {{ item.name }}key 없이 index 기반 비교를 하면-> 요소 순서가 바뀌거나 삭제될 때 의도치 않은 재렌더링이 발생-> 특히 input.. 2025. 7. 19. [Vue] Virtual DOM 이란? 1. Virtual DOM 이란?브라우저의 실제 DOM 과 1:1로 매핑된 가벼운JS 객체 트리-> 변경 사항을 추적하고, 최소한의 실제 DOM 조작만 수행하기 위한 중간 단계! 2. 왜 Virtual DOM 을 쓸까?- 실제 DOM 조작은 느림 -> 매번 지우고 새로 그리면 퍼포먼스 안 좋다.- 그래서 Vue(React도 마찬가지)는 메모리 안에 가벼운 가상 DOM을 먼저 만든 후, 변경 사항만 실제 DOM에 반영(=patch) 3. 흐름 예시[1] 화면이 렌더링될 때-> Vue는 Virtual DOM 트리 생성2. 상태가 바뀌면-> 새로운 Virtual DOM을 다시 생성3. 이전 Virtual DOM과 비교(diffing)-> 바뀐 부분만 실제 DOM에 반영! 4. 실제 흐름 요약data 변경 ->.. 2025. 7. 19. [Vue] v-if vs v-show 1. 서론Vue 에서 요소의 표시 여부를 제어할 때 자주 쓰는 디렉티브가 'v-if'와 'v-show'입니다.기능은 비슷하지만 내부 동작과 사용 목적이 다르기 때문에 면접에서도 자주 나오는 주제입니다. 2. 공통점- 둘 다 조건에 따라 DOM 요소를 보이게 하거나 숨김- 템플릿에 조건물을 적용할 수 있음 항목 v-if v-show렌더링 방식조건이 false이면 DOM에서 완전히 제거됨DOM은 존재하되, display: none 처리초기 렌더링 비용조건이 참일 때만 DOM 생성 → 초기 렌더링 느림항상 DOM 렌더링 → 초기 .. 2025. 7. 19. 이전 1 2 다음