Minipolarbear

관리자 페이지에서 공지사항을 관리하는 기능을 개발하면서 기존 vue-quill 에디터의 한계가 눈에 보이기 시작했다.그래서 새로운 에디터를 찾던 중 Tiptap을 발견했고, 실제로 적용하면서 얻은 경험을 정리해본다.— Vue 기반 서비스에 가장 적합한 모던 Headless Rich Text Editor2025년 현재 WYSIWYG 에디터 시장은TinyMCE → CKEditor → Quill로 이어지는 전통적인 흐름에서이제는 Tiptap + Lexical 같은 “Headless 기반 모던 에디터”로 넘어오고 있습니다. 여기서는 그중에서도 가장 빠르게 성장 중인 Tiptap을직접 Vue 프로젝트(관리자 페이지)에서 적용한 경험을 중심으로 정리합니다.🔍 Tiptap이란?ProseMirror 기반 Headle..

NestJS 기반의 관리자 서버를 구현하던 중,정상적으로 작동하던 /admin/find-me API가 갑자기 400 에러를 내뿜었다.로그에는 다음과 같은 메시지가 찍혔다.ERROR (400) - /admin/find-me유효하지 않은 파라미터 - Validation failed (numeric string is expected) - /admin/find-me이번 글은 그 문제의 원인과 해결 과정을 정리한 실전 포스트모템이다. 1. 문제 상황관리자 정보를 조회하는 API가 아래처럼 구성되어 있었다.@Controller('admin')export class ServerAdminController { constructor(private readonly serverAdminService: ServerAdmin..

최근 백엔드 개발자들 사이에서 ORM(JPA/Hibernate/Spring Data 등)에서 순수 JDBC로 점진 회귀하는 현상이 조용히 퍼지고 있습니다. Medium 글의 주장에 더해, 업계 전반의 경험과 커뮤니티 반응을 종합해 보면, 그 배경엔 투명성, 성능, 예측 가능성이라는 키워드가 있습니다. Everyone’s Quietly Moving Back to JDBC — Here’s Why That Should Worry YouIf you look closely at what senior backend engineers are doing lately, something strange is happening: they’re quietly moving back to plain…medium.com 1. “..

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