요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능2
·
Front-end
지난번에 이어서 감시자 기능에 대해서 정리하려고 한다.요즘은 코딩하기에 좋은 AI 가 있어서, 학습용으로 잘 활용하면 개인 과외선생을 두는거 같아서 많은 도움을 받고 있다.가끔은 불친절하게 알려줘서 답답할 때도 있지만, 이정도면 공부하기에 좋은 방법인듯하다. 지난번에는 watch 기반으로 감시자에 대해서 설명했다.요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능1 요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능1요즘 vue3 로 프로젝트를 진행중인데, 이번 프로젝트 특성상 화면(Front)를 잘 해야하는 상황이다.grid 로 구성된 화면을 중심으로 개발만 하다가홈페이지와 같은 손 많이 가는 프로젝트는 오랫만인crebiz-community.tistory.com 6. defineExpose: 자식 컴포넌트 메서드를 ..
요즘 프로젝트에서 잘 쓰고 싶은 감시자 기능1
·
Front-end
요즘 vue3 로 프로젝트를 진행중인데, 이번 프로젝트 특성상 화면(Front)를 잘 해야하는 상황이다.grid 로 구성된 화면을 중심으로 개발만 하다가홈페이지와 같은 손 많이 가는 프로젝트는 오랫만인데, 정말 다양한 vue3 기능들을 다뤄야 하는 프로젝이다.특히 반응하고, 감시하고, 컴포넌트간의 바인딩이나 데이터 통신과 같이 데이터를 잘 관리하는게 핵심인데..프로젝트를 하는 동안 기능을 구현하는데 어려움이 있을 때에는집에 와서 windsurf 로 구현하고자 하는 것을 요청하면 구현해준 것을 가지고 프로젝트에서 참고하고 있다.(회사 프로젝트 특성상 ai 관련된 것은 다 막혀있다) 그래서이번에는 회사에서 주로 사용하지만, 잘 알지 못하고 이해하지 못하는 감시자 기능에 대해서 정리해 보려고 한다. 1. 기..
Vue3 변수와 함수 선언 정리하는 방법
·
Front-end
Vue3 에서 선언된 변수와 함수를 가독성과 유지보수에 도움이 되도록 정리하는 방법 1. 상단: import 및 컴포넌트 등록외부 라이브러리, 컴포넌트 import내부에서 사용하는 컴포넌트 정의 및 등록 2. 상수 및 공통 객체 선언그룹 정보, 컴포넌트 목록 등 변하지 않는 상수공통적으로 사용하는 객체(예: 그룹 정의, 컴포넌트 정의 등) 3. 반응형 상태(reactive/ref) 선언화면 상태, 폼 데이터, 레이아웃 배열 등ref, reactive, computed 등 Vue의 상태 관리 변수 4. computed, watch 등 계산/감시 속성computed로 선언된 파생 데이터watch로 선언된 감시자 5. 핵심 비즈니스 로직 함수컴포넌트 추가/편집/삭제/미사용 등 주요 동작 함수순서는 CRUD ..
Nuxt3 와 Vue3 비교
·
Front-end
최근에 Nuxt3 에 대해서 알아보고 있는데, vue3 와 어떤점이 다른지 궁금해서 chatGPT 에게 물어봤습니다.  nuxt3 와 vue3 에 대해서 비교해서 설명해줘 🚀 Nuxt 3 vs Vue 3 비교Nuxt 3와 Vue 3는 둘 다 Vue 기반의 프레임워크이지만, 목적과 기능이 다르다.Vue 3는 프론트엔드 UI 라이브러리, Nuxt 3는 SSR(서버 사이드 렌더링)과 전체 애플리케이션 개발을 위한 프레임워크야.1️⃣ Nuxt 3와 Vue 3의 개념Vue 3 Nuxt 3설명UI 컴포넌트를 만들기 위한 프레임워크Vue 기반의 풀스택 프레임워크 (SSR, SSG, API 서버 기능 포함)사용 목적SPA(Single Page Application) 개발SSR(서버사이드 렌더링), SSG(정적 사이트..
구글 login 구현하기 위한 Pinia store 정의
·
Front-end
지금 개발 환경을 package.json 파일로 참고하세요. "axios": "^1.7.9", "bootstrap": "^5.3.3", "concurrently": "^8.2.2", "cors": "^2.8.5", "echarts": "^5.6.0", "express": "^4.21.2", "firebase": "^11.3.1", "papaparse": "^5.5.2", "pinia": "^3.0.1", "vue": "^3.5.13", "vue-router": "^4.5.0", "xlsx": "^0.18.5" Pinia 로 구성한 store 의 내용입니다.import { defineStore } from "pinia";import { aut..