왜 운영 환경에서 console.log를 제거해야 할까?개발하다 보면 console.log를 여기저기 남기게 되는데,운영 환경의 경우 민감한 데이터가 노출될 수 있고, 불필요한 연산이 매번 실행되기 때문에 제거하자! 설정 - esbuild.drop// nuxt.config.jsexport default defineNuxtConfig({ vite: { esbuild: { drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [], }, },}) 선택적 제거 - esbuild.pureconsole.error나 console.worn는 유지하고 console.log만 골라서 제거하고 싶은 경우 pure 옵션..
CSS 레이아웃 속성은 많지만, 실무에서 자주 쓰는 건 정해져 있는 경우가 많다.핵심만 빠르게 정리해보자..! 가운데 정렬Flexbox 하나로 수평/수직 모두 해결/* 화면 전체 가운데 정렬 */.container { display: flex; justify-content: center; /* 수평 */ align-items: center; /* 수직 */ height: 100vh;} Flexbox vs GridFlexbox- 1차원 (한 방향으로 나열)- 메뉴, 버튼/* 아이템을 가로로 쭉 나열 */.nav { display: flex; gap: 16px;} Grid- 2차원 (행과 열 동시에 다룰 때)- 대시보드, 카드 목록/* 3열짜리 카드 레이아웃 */.card-list {..
React로 개발하다 보면 성능 최적화를 위해 useMemo와 useCallback을 사용하게 되는데,두 훅을 언제 어떻게 사용해야 하는지 정리해보자 useMemo연산 결과 값을 메모이제이션const expensiveValue = useMemo(() => { return heavyCalculation(data);}, [data]); useCallback함수 자체를 메모이제이션const handleClick = useCallback(() => { doSomething(id);}, [id]); 언제 사용해야 할까?1. 자식 컴포넌트에 props로 전달되는 함수// 안 좋은 예// Parent가 리렌더링될 때마다 handleClick은 새로운 참조를 가진 함수가 됨// memo로 감싸져 있지만 prop..
Suspense 는 비동기 컴포넌트가 로드되는 동안 fallback UI를 보여주는 Vue의 내장 컴포넌트아직 실험적 기능이라 프로덕션 환경에서는 신중한 사용 필요 기존 방식- 매번 loading, error 상태 직접 관리- 중복된 코드 로딩 중... 에러 발생: {{ error }} Suspense를 사용한 방식- 로딩 상태 자동 관리 로딩 중... Vue3 에서의 사용 {{ user.name }} {{ user.email }} 사용자 정보를 불러오는 중... 여러 비..
Image Lazy Loading웹 성능 최적화 할 때 이미지 레이지 로딩은 비용 대비 효과가 좋은 방법 중 하나페이지 로드 시 모든 이미지를 한 번에 불러오지 않고, 사용자가 실제로 보게 될 때 필요한 이미지만 로드하는 기법 Vue3에서의 사용Vue3에서는 브라우저의 네이티브 lazy loading 활용 가능 Intersection Observer API 활용- 더 세밀한 시점 제어가 필요한 경우 사용!! Composableexport function useLazyImage(el, callback) { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting..
문제 상황수천, 수만 개의 아이템을 리스트로 렌더링 할 때 일반적인 v-for 사용 시 브라우저가 모든 DOM 노드를 한 번에 생성이는 초기 렌더링 시간을 지연시키고, 스크롤 성능을 크게 저하 virtual scroller란?- 실제로 화면에 보이는 영역의 아이템만 DOM에 렌더링하는 기법- 사용자가 스크롤 할 때 동적으로 보이는 아이템을 교체하여 모든 아이템이 렌더링된 것처럼 보이게 함 설치npm install vue3-virtual-scroller 기본 사용법// main.jsimport { createApp } from 'vue'import VueVirtualScroller from 'vue3-virtual-scroller'import 'vue3-virtual-scroller/dist/vue3..
Google Tag Manager 란?- 웹사이트에 태그를 쉽게 관리하고 배포할 수 있는 라이브러리- GA4, Facebook Pixel 등 다양한 마케팅 도구를 코드 수정 없이 관리 설치 방법1. @zadigetvoltaire/nuxt-gtm 모듈 설치npm install @zadigetvoltaire/nuxt-gtm 2. nuxt.config.js 설정// nuxt.config.jsexport default defineNuxtConfig({ modules: [ '@zadigetvoltaire/nuxt-gtm' ], gtm: { id: 'GTM-XXXXXXX', // GTM 컨테이너 ID enabled: true, debug: process.env.NODE_ENV ===..
문제 상황아이폰으로 사파리 브라우저에서 웹 사이트를 테스트 하던 중,전화번호, 팩스번호, 사업자번호 항목이 자동으로 파란색 링크로 변경되는 문제가 있어 이 글을 작성하게 되었다. 원인iOS Safari는 사용자 편의를 위해 전화번호처럼 보이는 숫자 패턴을 자동으로 감지하여 태그로 변환한다.이는 iOS의 기본 동작으로, 개발자가 명시적으로 비활성화해야 발생하지 않는다. 영향을 받는 패턴- 전화번호: 02-1234-5678, 010-1234-5678- 해외 번호: +82-10-1234-5678- 사업자번호: 123-45-67890- 기타 숫자 조합 해결 방법1. 기본 HTML 에서 해결- 2. Nuxt3에서 해결- nuxt.config.js 파일에서 전역 설정으로 추가// nuxt.config.js..
문제 상황대시보드에서 드래그 앤 드롭으로 위젯의 위치를 변경할 수 있는 기능을 구현하던 중,차트가 포함된 위젯을 드래그하면 드래그 하는 동안 차트가 사라지고 드롭 후에 다시 나타나는 현상 발생 증상- 일반 텍스트/이미지 위젯: 정상 동작- 차트(Canvas) 포함 위젯: 드래그 중 차트 사라짐 사용 기술 스택- vue-draggable-next: 드래그 앤 드롭 라이브러리- vue-chartjs: 차트 라이브러리 원인 분석처음에는 라이브러리 문제로 생각하고 직접 드래그 기능과 차트를 구현해봤지만, 동일한 문제 발생!추정 원인으로는 Canvas의 특성 때문?- Canvas는 단순 DOM 요소가 아닌 비트맵 그래픽 영역- DOM 복제 시 Canvas의 렌더링 컨텍스트는 복사 X- cloneNode(tr..
문제 상황사용자가 폼 작성 중이거나 중요한 작업을 수행하는 도중 브라우저의 뒤로가기 버튼을 누르면 데이터가 손실될 수 있다.이런 상황에서 뒤로가기를 막거나 사용자에게 확인을 받아야 한다. 사용 사례- 폼 작성 중 뒤로가기 방지- 데이터를 저장하지 않았다고 사용자에게 경고- 결제 프로세스 중 이탈 방지 해결 방법Vue Router는 onBeforeRouteLeave 내비게이션 가드를 제공 1. 기본 사용 파라미터- to: 이동하려는 라우트 정보- from: 현재 라우트 정보- next: 내비게이션을 제어하는 함수 next() 함수 옵션- next(): 네비게이션 허용- next(false): 네비게이션 취소- next('/path'): 다른 경로로 리다이렉트- next({ name: 'routeName..