검색 입력에서 Debounce를 사용하는 이유와 구현 정리 (Vue 기준)

검색 입력창에서 사용자가 타이핑할 때마다 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 ..

좋아요. 이번 글에서는 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 = ..

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

1. 왜 비동기 처리가 필요한가?자바스크립트는 단일 스레드(single-thread) 기반 언어다.즉, 어떤 작업이 오래 걸리면(예: 네트워크 요청), 그동안 다른 작업은 멈춰버리게 된다.이를 해결하기 위해 자바스크립트는 비동기 처리 방식을 도입했는데,그 대표적인 방식이 바로 Promise고, 그 위에 편하게 쓸 수 있도록 만들어진 문법이 async/await이다.2. Promise 복습: 기본 비동기 구조function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("성공") }, 1000) })}getData() .then(result => console.log(result)) ..

Vue의 Composition API로 프론트를 개발하다 보면 어느 순간 이런 생각이 들 수 있다.“그러고 보니 this는 거의 안 쓰네?”“근데 화살표 함수는 그냥 편해서 쓰는 건가?”“그리고 Promise, async/await는 어디까지 알아야 하는 거지?”나도 백엔드를 주로 해오다가 프론트를 직접 개발하면서 이런 의문이 생겼고,하나씩 직접 써보면서 이해한 내용을 정리해본다.1. this는 왜 Composition API에서 안 쓰일까?Composition API를 쓰면 거의 모든 변수와 함수가 setup() 함수 스코프 안에 선언된다.즉, ref, reactive, computed 등으로 선언된 상태를그냥 일반 변수처럼 사용하면 된다.// Composition API 내부setup() { con..