이번 프로젝트에서 vue-grid-layout 를 이용해서 컴포넌트들을 가지고 폼을 구성하는 화면을 만들게 되는데..한번 만들어 봤습니다. 일단 결론적으로 vue-grid-layout 이 라이브러리가 최선인가 하는 생각을 하게 됩니다(아직 잘은 모르지만). 일단 화면 구성은... 이렇게 구성됩니다.왼쪽에는 컴포넌트들의 목록이 나오고,오른쪽에는 왼쪽 컴포넌트를 drag & drop 방식으로 두면서 폼을 만드는 형식입니다. vue-grid-layout 에서 제공하는 샘플을 보면.. 이런 화면을 구성하고 각각의 item 들을 이동해서 화면을 만들수 있습니다.보통 포틀릿 화면을 구성하는 방식이죠. 소스에서 보면.const state = reactive({ layout: [ { x: 0, y: ..

fastAPI를 사용하고 있는 중인데, ORM 맵핑의 JPA와 비슷하다는 생각이 들어서 Gemini 에게 물어봤습니다.알려준 설명을 남겨봅니다. FastAPI에서 데이터베이스에 있는 데이터를 CRUD (Create, Read, Update, Delete) 할 때 사용하는 방식이 Spring Data JPA와 완전히 동일하다고 보기는 어렵지만, 몇 가지 유사한 개념과 목표를 공유하는 부분이 있습니다. 유사한 점:ORM 활용: FastAPI는 주로 SQLAlchemy라는 ORM (Object-Relational Mapper)과 함께 사용됩니다. JPA 역시 ORM 표준입니다. ORM의 핵심 목표는 데이터베이스 테이블을 객체로 매핑하여 개발자가 SQL 쿼리를 직접 작성하는 대신 객체 지향적인 방식으로 데이..

실제 프로젝트에서 배열을 활용하는 일이 많은데,몇년전까지만 해도 for 문을 이용해서 데이터를 추출하고, 새로 만들기도 했습니다. ES6(ECMAScript 2005) 가 나오고 나서부터 새로운 표현방법들을 통해서 for 문을 대체하고 있는데,중요한 기술들을 Gemini 가 설명해주는걸로 정리해보려고 한다. 1. 화살표 함수(Arrow Functions)화살표 함수는 함수 표현식을 간결하게 만들어줍니다. 특히 배열의 map, filter, reduce 메서드와 함께 사용할 때 유용합니다.const numbers = [1, 2, 3, 4, 5];// 기존 방식const squaredNumbers = numbers.map(function(num) { return num * num;});// 화살표 함수 사..

객체 분해 할당에 대해서 공부하던 중에 Gemini 에게 물어보고 받은 답변입니다.  객체 분해 할당(Destructuring assignment)은 객체나 배열의 속성을 개별 변수에 쉽게 할당할 수 있도록 하는 JavaScript의 강력한 기능입니다. 복잡한 객체에서 필요한 값만 추출하여 사용하는 코드를 간결하고 가독성 좋게 만들어줍니다.  1. 객체 분해 할당 기본 사용법 const person = { name: '홍길동', age: 30, job: '개발자',};// 객체 분해 할당const { name, age, job } = person;console.log(name); // 출력: 홍길동console.log(age); // 출력: 30console.log(job); // 출력: 개발자co..