검색 입력창에서 사용자가 타이핑할 때마다 API를 호출하면 여러 문제가 발생한다.이를 해결하기 위해 Debounce 기법을 사용한다.Debounce란?Debounce는 연속해서 발생하는 이벤트 중마지막 이벤트가 발생한 후 일정 시간이 지나면 한 번만 실행되도록 만드는 기법이다.즉,사용자가 입력을 계속하는 동안에는 실행하지 않고입력이 멈췄다고 판단되는 시점에만 동작한다검색, 자동완성, 입력 기반 API 호출에 매우 적합하다.현재 코드 예시const handleInputChange = (value: string) => { searchQuery.value = value; emit("update:modelValue", value); // Debounce 검색 if (debounceTimer) { c..

기본 구조 개요Capacitor는 “웹 앱을 네이티브 앱처럼 감싸주는 브릿지”예요.즉, Vue로 웹 화면을 만들고 → Capacitor가 그걸 iOS/Android에서 실행할 수 있게 해주는 구조죠.📁 smartledger-app/ ┣ 📁 frontend/ ← Vue (Vite 기반) ┣ 📁 android/ ← Android 프로젝트 (Capacitor 자동 생성) ┣ 📁 ios/ ← iOS 프로젝트 (Capacitor 자동 생성) ┗ capacitor.config.ts ← Capacitor 설정 파일1단계: Vue 프로젝트 생성npm create vue@latest# ornpm init vue@latest frontendcd frontendnpm ..

1. .htaccess란?Apache 웹서버의 “디렉토리별 설정 파일”입니다.“이 폴더 안에서만 적용할 특별한 서버 설정”을 할 수 있음.파일 이름이 .htaccess(점+htaccess)이며,텍스트 파일로 직접 만들어서 서버에 올립니다.주로 아래의 용도로 사용:URL rewrite(주소 변환)특정 파일/폴더 접근 제한리다이렉트/포워딩캐시, MIME 타입, 압축 등 세부 설정 2. SPA(Vue, React, Angular 등)에서 왜 꼭 필요할까?SPA는 서버가 아닌 브라우저(JavaScript)에서 라우팅을 담당합니다.즉, 실제로는 모든 경로 요청을 항상 index.html로 주고라우터가 클라이언트에서 경로에 따라 페이지를 "바꿔 보이게" 하는 구조 문제점/main, /user/profile 등으로 ..

좋아요. 이번 글에서는 Vue Composition API를 사용할 때 예시 코드와 함께 순서대로 살펴볼게요. 1. import 구문컴포넌트에서 사용할 외부 라이브러리, 컴포넌트, 유틸 함수 등을 가장 위에 정리합니다.import { ref, computed, watch, onMounted } from 'vue'import { useStore } from '@/stores/user'import dayjs from 'dayjs' 2. defineProps / defineEmits외부에서 받는 props, 이벤트 정의는 import 아래에 둡니다. defineProps와 defineEmits는 script setup의 특수 구문입니다.const props = defineProps()const emit = ..

비교 예시== 결과=== 결과설명0 == '0'truefalse문자열 '0'이 숫자 0으로 변환됨false == 0truefalse둘 다 falsy → ==은 타입 변환함null == undefinedtruefalse==에서는 특수 케이스로 인정됨[] == falsetruefalse[]가 0으로 변환, 0 == false 실무 팁실무에서는 무조건 ===만 사용하는 게 정석==는 암묵적인 타입 변환 때문에 디버깅 어려운 버그를 만들 수 있다.ESLint 같은 린터도 == 쓰지 말라고 강제하는 경우가 많다.

Vue 프로젝트에서 서버 데이터를 가져오는 API 호출은 필수적인 작업이다.하지만 단순히 fetch()나 axios를 매번 직접 호출하는 방식은 금방 복잡해지고,컴포넌트 내부가 로직 + 화면 처리 + 예외 처리까지 섞이게 되면서 유지보수가 어려워진다. 그래서 다음과 같은 흐름으로 API 호출을 관리한다:API 호출은 async/await로 처리API 함수는 /api/모듈.js로 분리상태 관리를 포함하고 싶을 땐 useXXX() composable 함수로 구성1. async/await는 Promise를 동기 코드처럼 다루기 위한 문법이다자바스크립트는 비동기 작업을 Promise로 처리한다. 예를 들어, 서버에서 데이터를 받아오는 코드는 다음과 같이 작성할 수 있다.function getData() { r..