Minipolarbear

Vue 3 + Nuxt 3 기반의 프로젝트에서 매체 리스트를 가져오는 과정에서 useFetch를 사용했다가 다음과 같은 에러를 마주했다. 이 글은 그 문제 상황과 원인, 해결 방법을 기록한 실전 포스트모템이다.문제 상황 매체 검색 조건이 바뀔 때마다 API를 다시 호출해 리스트를 갱신하는 기능을 refetchMediaList()라는 함수로 구현했고, 이 함수 안에서 다음과 같이 apiFetch()를 사용했다.const { data, error } = await apiFetch('/api/media-item/list', { ... }); 그런데 이 함수는 watch() 내부나 lodash.debounce() 안에서 호출되고 있었고, 다음과 같은 에러가 발생했다.에러 메시지[unhandledRejection..

1. 하고 싶었던 것매체 카테고리 트리 구조를 Vue 3 + Vuetify 3로 구현하고 있었는데카테고리 리스트가 트리 구조라서“모두 펼치기” / “모두 닫기” 기능이 필요했다. Vuetify 3에 v-treeview가 있어서v-model:open으로 열고 닫을 노드 ID 배열만 넘겨주면 된다길래“오 이거 쉽게 되겠네” 하고 가볍게 시작했다. 2. 첫 번째 시도 ( v-treeview + open 배열)expandAll() { // 부모 노드만 id this.expandedItems = this.mediaItemCategoryVo.map(item => item.id);} 근데 막상 써보니까부모 노드만 열리고, 자식 노드는 안 열린다. 3. 그러면 하위까지 다 넣으면 되지 않을까?collectAllN..

nestjs로 구현했던 내용을 vue로 컨버전 하는중에서 발생한 이슈 정리 ~ Vue 3 에서 컴포넌트를 구현하면서 겪은 문제와 해결 방법을 정리합니다.TreeView가 “안 보인다”, “데이터는 있는데 글씨가 안 나온다” 등의 문제로 고생하신다면 반드시 확인해보세요. 1. 트리뷰는 뜨는데 텍스트가 안 보임원인: Vuetify는 기본적으로 title 필드를 텍스트로 사용. 내가 쓴 데이터는 label을 사용하고 있었음.해결:item-text="label" 명시적으로 설정또는 데이터를 label → title로 필드명을 변환혹은 데이터 변경:this.mediaItemCategoryVo = data.map((item) => ({ ...item, title: item.label, children: ..

Vue 3 + Vuetify + vue-facing-decorator 환경에서 v-data-table을 활용한 사용자 목록 테이블 구성 방법을 정리합니다.1. headers 선언Vuetify 3에서는 text 대신 title을 사용해야 합니다.headers = [ { title: 'ID', value: 'id', sortable: true }, { title: '사용자명', value: 'fullKoreanName', sortable: true }, { title: '사용자 상태', value: 'userStatusCommonCode.displayValue', sortable: false }, { title: '전화번호', value: 'phone', sortable: true }, { titl..

클로저(Closure)클로저는 함수가 자신이 정의된 스코프 밖에서도 그 스코프 내의 변수들에 접근할 수 있게 해주는 기능입니다. 클로저의 기본 개념클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 주며, 외부 함수가 종료된 이후에도 그 변수를 “기억”할 수 있습니다. 이를 통해 자바스크립트에서 변수와 함수의 생명주기를 관리하는 데 강력한 도구가 됩니다. 클로저의 동작 원리 1. 스코프 체인: 자바스크립트에서 변수는 자신이 선언된 스코프와 그 상위 스코프에서만 접근 가능합니다. 2. 함수의 일급 객체성: 자바스크립트에서는 함수가 일급 객체로 취급되어 변수에 할당되거나 다른 함수의 인자로 전달될 수 있습니다. 이 때문에 함수가 반환된 이후에도 원래 스코프의 변수를 “기억”할 수 있습니다.funct..

1. var의 스코프var는 함수 스코프(Function Scope)를 따릅니다. 즉, var로 선언된 변수는 가장 가까운 함수 내에서만 유효합니다. 만약 함수 내부가 아니라면 전역 스코프에 존재하게 됩니다. var는 블록 스코프(예: {}로 감싸진 블록)를 따르지 않으며, 함수 내부 어디서나 접근 가능합니다.function example() { var x = 10; if (true) { var y = 20; } console.log(x); // 10 console.log(y); // 20 (블록 밖에서도 접근 가능)}example(); var로 선언된 y는 블록 내부에서 선언되었지만 함수 전체에서 유효합니다. 이는 var가 블록 스코프를 따르지 않고, 함수 스코프를 따르기 때문입니다. 2..

스코프(Scope)변수, 함수, 객체가 접근 가능한 범위를 정의하는 개념입니다.이는 코드가 실행되는 환경과 해당 환경 내에서 변수나 함수에 접근할 수 있는지를 결정합니다. 자바스크립트의 스코프는 크게 두 가지로 구분할 수 있습니다: 전역 스코프와 지역 스코프 ES6 이후 블록 스코프도 중요한 개념으로 추가되었습니다. 1. 전역 스코프(Global Scope)전역 스코프는 프로그램 전체에서 접근할 수 있는 범위를 의미합니다. 전역에 선언된 변수나 함수는 어디에서나 접근 가능합니다.var globalVar = "I am global";function printGlobal() { console.log(globalVar); // "I am global"}printGlobal();console.log(globa..

async/await비동기 코드를 더 쉽게 작성할 수 있도록 돕는 기능입니다. 이 두 가지는 자바스크립트의 Promise와 함께 동작하며, 비동기 작업을 마치 동기 코드처럼 작성할 수 있게 해 줍니다. 1. async 함수async 키워드는 함수 앞에 붙여서 해당 함수를 비동기로 만듭니다. 비동기 함수는 항상 Promise를 반환하며, 반환된 값이 Promise 객체로 감싸집니다. 즉, 함수 내부에서 값을 반환하면 그 값은 자동으로 Promise.resolve()를 통해 처리되고, 에러가 발생하면 Promise.reject()가 호출됩니다.async function fetchData() { return "데이터가 성공적으로 로드되었습니다!";}fetchData().then(result => cons..

1. PromisePromise는 자바스크립트에서 비동기 작업을 처리하기 위해 제공되는 객체입니다.현재 작업이 완료되었는지(혹은 실패했는지)를 나타내고, 나중에 작업이 완료되면 결과를 사용할 수 있도록 합니다. 기본 개념Pending (대기): 초기 상태, 작업이 아직 완료되지 않음Fulfilled (성공): 작업이 성공적으로 완료됨Rejected (실패): 작업이 실패함. Promise 구조Promise 객체는 new Promise() 생성자를 통해 만들 수 있습니다. 이 생성자는 두 개의 콜백 함수, resolve와 reject를 받습니다. resolve는 작업이 성공했을 때 호출되며, reject는 작업이 실패했을 때 호출됩니다. const promise = new Promise((resolve, ..

콜백 함수(callback)콜백은 비동기적 작업을 수행할 때 자주 사용되며, 그 외에도 함수의 동작을 동적으로 변경하고자 할 때 유용합니다. 콜백은 자바스크립트의 중요한 특징인 일급 객체(first-class object) 개념에서 비롯되는데, 자바스크립트에서는 함수를 변수에 할당하거나 다른 함수의 인수로 전달할 수 있습니다. 주요 특징함수의 인수로 전달됨: 콜백 함수는 다른 함수에 인수로 전달됩니다.나중에 실행됨: 콜백 함수는 인수로 전달된 함수가 호출될 때 특정 조건이 만족되거나 특정 시점에서 실행됩니다.비동기 작업에서 중요: 비동기 작업(예: 타이머, 이벤트 처리, AJAX 요청 등)에서 자주 사용됩니다. 작업이 완료되었을 때 콜백 함수가 호출되어 후속 작업을 처리합니다. 콜백 함수 사용 예시 기본..