1. 두 배열 합치기두가지 배열이 있다.oldData = [ { sfmId: 12341, tgrtId: 9991, sfmNm: "", type: "DISABLED", dataDelYn: "N", }, { sfmId: 12342, tgrtId: 9992, sfmNm: "Graduation 1", type: "FILTER", dataDelYn: "N", }, { sfmId: 12343, tgrtId: 9992, sfmNm: "Graduation 2", type: "FILTER", dataDelYn: "N", }, { sfmId: 12344, tgrtId: 9992, sfmNm: "Graduation 3", type: "FILTER", dataDelYn: "N", },];newData = [ { sf..

지난번에 이어서 감시자 기능에 대해서 정리하려고 한다.요즘은 코딩하기에 좋은 AI 가 있어서, 학습용으로 잘 활용하면 개인 과외선생을 두는거 같아서 많은 도움을 받고 있다.가끔은 불친절하게 알려줘서 답답할 때도 있지만, 이정도면 공부하기에 좋은 방법인듯하다. 지난번에는 watch 기반으로 감시자에 대해서 설명했다.요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능1 요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능1요즘 vue3 로 프로젝트를 진행중인데, 이번 프로젝트 특성상 화면(Front)를 잘 해야하는 상황이다.grid 로 구성된 화면을 중심으로 개발만 하다가홈페이지와 같은 손 많이 가는 프로젝트는 오랫만인crebiz-community.tistory.com 6. defineExpose: 자식 컴포넌트 메서드를 ..

요즘 vue3 로 프로젝트를 진행중인데, 이번 프로젝트 특성상 화면(Front)를 잘 해야하는 상황이다.grid 로 구성된 화면을 중심으로 개발만 하다가홈페이지와 같은 손 많이 가는 프로젝트는 오랫만인데, 정말 다양한 vue3 기능들을 다뤄야 하는 프로젝이다.특히 반응하고, 감시하고, 컴포넌트간의 바인딩이나 데이터 통신과 같이 데이터를 잘 관리하는게 핵심인데..프로젝트를 하는 동안 기능을 구현하는데 어려움이 있을 때에는집에 와서 windsurf 로 구현하고자 하는 것을 요청하면 구현해준 것을 가지고 프로젝트에서 참고하고 있다.(회사 프로젝트 특성상 ai 관련된 것은 다 막혀있다) 그래서이번에는 회사에서 주로 사용하지만, 잘 알지 못하고 이해하지 못하는 감시자 기능에 대해서 정리해 보려고 한다. 1. 기..

Vue3 에서 선언된 변수와 함수를 가독성과 유지보수에 도움이 되도록 정리하는 방법 1. 상단: import 및 컴포넌트 등록외부 라이브러리, 컴포넌트 import내부에서 사용하는 컴포넌트 정의 및 등록 2. 상수 및 공통 객체 선언그룹 정보, 컴포넌트 목록 등 변하지 않는 상수공통적으로 사용하는 객체(예: 그룹 정의, 컴포넌트 정의 등) 3. 반응형 상태(reactive/ref) 선언화면 상태, 폼 데이터, 레이아웃 배열 등ref, reactive, computed 등 Vue의 상태 관리 변수 4. computed, watch 등 계산/감시 속성computed로 선언된 파생 데이터watch로 선언된 감시자 5. 핵심 비즈니스 로직 함수컴포넌트 추가/편집/삭제/미사용 등 주요 동작 함수순서는 CRUD ..

최근 개발하고 있는 코드를 집에서 예제로 해서 한번 만들어봤습니다.컴포넌트끼리의 데이터 주고 받는 이벤트에 대해서 이해하는것이 중요합니다.그래서 지금 만들었던 코드를 가지고 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: ..

세 가지 신경망 모델(LSTM, LSTM-CNN, LSTM-Attention)의 시각화 결과에 대한 해석 각 모델의 학습 과정에서 생성된 손실(loss) 그래프를 분석하여 모델의 성능과 특성을 비교해 보겠습니다. 1. LSTM 모델 (로이터 뉴스 다중 분류) LSTM 모델은 로이터 뉴스 데이터셋을 46개 카테고리로 분류하는 작업을 수행합니다. 그래프 해석: • 학습 손실(파란색)은 에폭이 증가함에 따라 지속적으로 감소하는 경향을 보입니다. • 검증 손실(빨간색)은 초기에 감소하다가 특정 지점 이후에는 증가하거나 정체되는 경향이 있습니다. • 학습 손실과 검증 손실 간의 격차가 점차 벌어지는 것은 과적합(overfitting)의 징후입니다. • 조기 중단(early stopping)이..