목록Client/Vue.js (8)
새발블로그
1. 왜 SPA에서 이탈률 측정이 어려운가?일반 웹페이지는 새로고침마다 페이지가 다시 로드되므로 page_view·page_leave 타이밍이 명확반면 SPA는:라우팅 전환 시 브라우저는 그대로, 콘텐츠만 바뀜컴포넌트가 실제로 unmount되지 않을 수도 있음(keep-alive)전환 애니메이션, 레이아웃 구조에 따라 이벤트 호출 타이밍이 달라짐결과적으로 dwell(체류시간) 또는 bounce(빠른 이탈) 계산이 왜곡될 수 있음2. 이탈률을 계산하기 위한 핵심 이벤트 정의page_view사용자가 특정 라우트에 진입하는 순간기록 정보: ts(타임스탬프), pagepage_leave사용자가 해당 라우트에서 떠나는 순간dwellMs = leave.ts - view.tsdwellMs action버튼 클릭, CT..
1. 문제 배경시계열 데이터에서 값의 크기 차이가 수십~수천 배 이상 벌어지는 경우(예: 0.1 ~ 100000), 선형 스케일(linear)만으로는 다음 문제가 발생작은 값들이 바닥에 평평하게 깔려 보임 → 정보 손실이상치(outlier) 때문에 전체 분포가 왜곡됨추세·분포·이상치를 한 번에 보기 어려움이때 필요한 것이 스케일 보정(Scaling) 이며, D3.js는 이를 정확하고 유연하게 처리할 수 있는 도구를 제공합니다.2. D3 스케일은 정확히 무엇인가?D3의 scale() 함수는 도메인(domain) 값을 픽셀(range) 값으로 변환하는 함수입니다.value (domain) ---> scale ---> pixel (range) 예시:const y = d3.scaleLinear().domain(..
Vue 3에서는 상태 관리와 관련된 문제 해결을 위해 Pinia를 사용한다.여러 컴포넌트에서 공통 데이터를 관리하고 공유할 수 있다.1. Pinia란?Pinia를 사용하면 여러 컴포넌트 간에 공통 데이터를 store로 관리하고 쉽게 공유할 수 있다. Pinia는 React와 비슷한 접근법으로 컴포넌트 단위로 데이터를 관리하며, 모듈화된 상태 관리를 지원한다.Pinia를 사용하면 store를 정의하고, 그 안에서 state, actions, getters 등을 관리할 수 있습니다. 이로써 앱의 데이터 흐름을 한 곳에서 관리하고 쉽게 공유할 수 있다. 2. Store 생성 및 사용 방법Pinia를 사용하려면 먼저 store를 생성해야하고, Pinia store는 defineStore 함수를 사용하여 정의한..
시험을 준비하면서 API를 호출하는 load함수를 언제 사용하는지 너무 헷갈렸다.다른 사람들 코드를 참고했을 때 누구는 onMount안에 호출을 하였고, 누군간 단순히 setup안에 비동기 코드를 작성하였다.Vue 생명주기를 보면 해결 가능한 간단한 문제였지만, 잊지 않고자 적어보려한다 ㅎ.ㅎ 해당 과정을 이해하려면 Vue 의 생명주기를 다시 알아야한다. 1. setup() 실행 (DOM 렌더 전)2. DOM 렌더링 (Template → HTML로)3. onMounted() 실행 (사용자에게 화면 보여짐) 즉, setup()은 렌더링 전에 실행, onMounted()는 렌더링 이후에 실행된다.목적에 따라 API 호출 타이밍을 달리할 수 있다.1. setup() 안에서 API 호출 (렌더 전에 데이터 확보..
펻 컴포넌트는 생성되고, DOM에 부착되고, 업데이트 되며, 결국 소멸한다. 이 일렬의 과정을 생명주기라고하며, 각 단계에서 특정 함수를 실행할 수 있는 라이프사이클 훅이 존재한다. 1. Vue 생명주기생성 단계 (Creation)마운트 단계 (Mounting)업데이트 단계 (Updating)소멸 단계 (Unmounting)2. 생명주기 전체 흐름 (Vue 2 기준)beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted생명주기 단계 요약:beforeCreate인스턴스 초기화 전, data와 methods 접근 불가created인스턴스 초기화 완료, data, props 접근 가능be..
Vue3의 큰 변화는 Composition API의 도입이다.기존 Options API가 가진 구조적 한계를 보완하고, 더 유연하고 재사용 가능한 컴포넌트 구조를 제공한다. 1. Composition API란?Composition API는 Vue 3에서 새롭게 도입된 API 방식으로, setup() 함수 안에서 상태와 로직을 선언적으로 정의할 수 있게 한다.기존의 data, methods, computed 등 분산된 옵션들을 하나의 함수 안에 모아두므로, 코드의 응집력과 재사용성이 높아진다.export default { setup() { // 여기에서 상태와 로직을 모두 정의 }} 2. Composition API의 핵심 구성 요소setup() 함수컴포넌트가 생성될 때 가장 먼저 실행되는 함수이..
Virtual DOM을 사용하는 이유DOM 조작은 브라우저에서 가장 비용이 큰 작업DOM을 직접 바꾸면 Reflow / Repaint가 발생하면서 성능 저하 유발.그래서 등장한 것이 Virtual DOM (가상 DOM) Virtual DOM의 핵심 목적실제 DOM 변경 전에, 메모리상의 가상 DOM에 먼저 반영변경 전후를 비교(diffing) → 실제로 변경이 필요한 부분만 반영불필요한 렌더링 최소화 → 빠른 UI 업데이트 브라우저 렌더링 과정HTML 파싱 → DOM Tree 생성CSS 파싱 → CSSOM 생성렌더링 트리(Render Tree) 생성DOM + CSSOM → 시각적으로 필요한 요소만 구성레이아웃 단계 (Reflow)요소의 크기·위치 계산페인팅 단계 (Repaint)색상, 테두리, 그림자 등..