최근 개발하고 있는 코드를 집에서 예제로 해서 한번 만들어봤습니다.컴포넌트끼리의 데이터 주고 받는 이벤트에 대해서 이해하는것이 중요합니다.그래서 지금 만들었던 코드를 가지고 windsurf 의 SWE-1 무료버전에게 물어봤습니다. 1. 속성(Props) 전달::show-dialog="currentConfig.showConfigDialog":show-dialog: 자식 컴포넌트에 show-dialog prop을 전달currentConfig.showConfigDialog: 부모 컴포넌트의 반응형 데이터를 바인딩:component="availableComponents[currentConfig.componentName]":component: 사용 가능한 컴포넌트 목록에서 현재 선택된 컴포넌트를 전달:form-d..

팝업 화면에서 확인을 클릭하고 나면 원하는 다른 페이지로 이동하게끔 하는 기능이 필요했다. 1. 먼저 팝업 화면에서 click 이벤트를 줬다. mdi-check 확인 이 코드에서 보듯이 클릭 이벤트에 'proceedRouterNavigation' 이 메소드를 호출하도록 했다. 2. proceedRouterNavigation 함수const proceedRouterNavigation = () => { showRouterConfirmDialog.value = false; // CodePage로 라우터 이동 router.push('/dashboard/code');}; 라우터 이동은 push 를 이용한다.push 를 통해 정의된 라우터를 입력해주면 원하는 페이지로 이동하게 된다.

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

연습삼아 만들어본 코드관리 화면입니다.상단이 그룹(부모)코드이고, 아래 상세(자식)코드입니다.흔히들 사용하는 화면이죠 먼저 상단에 부모 그룹을 클릭하면 아래 상세에 조회되어 결과를 보여주는 방법을 설명하겠습니다. 그룹코드의 코드를 보면 mdi-database-off 조회결과가 없습니다. {{ props.item.code_id }} {{ props.item.code_name }} {{ props.item.description }} mdi-pencil mdi-delete ..

vue js 코딩을 하다보면 composition api 에서 setup 의 위치가 다를 경우가 있습니다.import { defineComponent, ref, computed, onMounted, watch } from 'vue';import axios from 'axios';import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from 'chart.js';import { Doughnut } from 'vue-chartjs';import { getApiUrl } from '@/config/api';ChartJS.register(ArcElement, Tooltip, Legend, Title);export default defineComponen..

상단에 4개의 통계 정보를 카드 형식으로 표현했다.그 중에 총 사용금액에 대해서만 살펴보면.. mdi-currency-krw 총 사용금액 {{ formatAmount(totalAmount) }} mdi-information {{ selectedCardCompany || '전체' }} 카드 사용액 총 사용금액 선언 부분이다.// 통계 데이터const totalAmount = ref(0); //총사용금액const topAmountMe..

이런 조회 조건들을 설정해두고, v-select 를 선택할 때 watch 를 실행하도록 하는 방법 mdi-magnify 조회 v-model 에는 watch 가 실행되도록 했다.// selectedCardCompany 변경 시 데이터 재조회watch(selected..

웹 개발 관련 vue/react 나 nuxt 를 보다보면 렌더링에 대한 이야기가 나오는데,앞에서 nuxt3 와 vue3 를 비교할 때도 렌더링에 차이가 있다고 해서..렌더링과 관련된 용어들에 대해서 chatGPT 에게 요청했습니다.  SSR, SSG, ISR, CSR 와 SEO 가 뭔지 자세히 설명해줘   웹 개발에서 자주 나오는 SSR, SSG, ISR, CSR은 웹 페이지가 렌더링되는 방식을 의미해.각 방식은 SEO(검색 엔진 최적화)에도 영향을 미치니, 함께 알아보자! 🚀1️⃣ SSR (Server-Side Rendering) - 서버 사이드 렌더링✅ 서버에서 HTML을 완성한 후 클라이언트에 전달하는 방식✅ 페이지 요청 시 서버에서 HTML을 생성하여 반환✅ 검색 엔진(SEO) 최적화에 유리🔹..