새발블로그

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(..

1. 환경변수가 뭐길래?환경변수(Environment Variable)는 빌드 시점에 코드에 주입되는 설정값이에요.API 서버 주소, 서비스 이름, Firebase 키처럼 환경마다 달라지는 값을 코드에 직접 하드코딩하지 않기 위해 사용합니다. 2. .env 파일 구조와 우선순위프론트엔드 빌드 도구들은 대부분 dotenv 규칙을 따릅니다. 즉, 파일명이 아래 순서로 있으면 뒤의 파일이 앞의 파일을 덮어씁니다.우선순위파일명설명1.env공통 설정 (모든 모드 공용)2.env.local로컬 전용 (Git에 올리지 않음)3.env.[mode]특정 모드용 (development, production 등)4.env.[mode].local특정 모드 + 로컬용 (가장 높은 우선순위) 개발 시 적용 순서.env → .en..

1. 문제 상황처음에는 분석 페이지에 필요한 모든 컴포넌트와 차트 라이브러리를 한 번에 import했습니다.종합/가스/전기 모든 탭의 차트가 초기 번들에 포함탭을 보지 않아도 모든 차트 컴포넌트가 준비될 때까지 기다려야 함결과적으로 첫 진입이 너무 느리고, 개발 서버 HMR도 둔감 // (Before) 전부 정적 로딩 — 첫 진입이 무거움import { ComposedChart, LineChart, BarChart, ... } from "recharts";// ...중략... {/* 이 안에서 바로 차트 그리기 */} ... ... ...2. 해결 방법: next/dynamic으로 탭 단위 분리차트가 들어있는 무거운 탭을 동적 import로 분리했습니다.ssr: false: 클라이언트 전용으로 실..

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() 함수컴포넌트가 생성될 때 가장 먼저 실행되는 함수이..