Vue - Chart.js를 이용한 반응형 데이터 시각화 내 Github 저장소 링크 프론트엔드 연습용으로 간단하게 더미 데이터를 만들어 테스트 해보려고 만든 저장소입니다. 프론트엔드를 다루는게 처음이라 혹시 틀린점이나 프론트엔드 고수형님 계시면 피드백 부탁드립니다..😭 사용 기술 스택 Backend Spring Batch (아직 사용 안함) Spring Data JPA Maria DB QueryDSL (아직 사용 안함) MQTT, RTSP, HLS, FFmpeg (아직 사용 안함) Akka Actor (Scala) Kakao Map API (아직 사용 안함) Frontend Vue 3 Composition API, BootStrap, Vite Axios, Chart.js, Vue-Chart-3, ESL..

Vue 로컬 테스트 시 Cors Proxy 우회 Vue를 사용한 프론트엔드 서버에서 백엔드 서버의 Parsing된 Json 데이터를 받아오는 연습을 하던 도중 CORS 에러를 만났습니다. 코드는 이렇게 작성했습니다. 복잡하게 테스트할 필요 없이 단순히 v-for를 이용해 들어오는 데이터를 Reactive 변수에 넣어 Loop를 돌리고, 컴포넌트가 마운트 될 때 데이터를 출력하게만 해두었습니다. 데이터 가져오기 연습 Event ID: {{ item.id }} Frame ID: {{ item.frameId }} Extra Information Bbox Height : {{ item.extra.bbox.height }} Bbox Width : {{ item.extra.bbox.width }} Vertices ..

Actions을 이용한 비동기 코드 실행 Vuex에서 제공하는 핵심 기능중 하나가 코드의 비동기 실행 기능입니다. 이때, Mutation의 문제는 항상 동기 방식이며, 비동기 방식은 허용되지 않습니다. 따라서 Mutation이 실행 되면, 중단없이 단계별로 실행되면서 상태는 즉시 바뀌어야 합니다. 이유는 모든 Mutation이 최신 State를 받아야만 하기 때문에 이러한 방식이 강제됩니다. 이럴떄 Actions을 사용합니다. 동작 방식은 컴포넌트에서 Actions를 트리거하고 이 트리거된 Actions는 Mutation을 Commit 합니다. Actions는 비동기 방식을 지원하기 때문에 컴포넌트와 Mutation 사이에 넣는 것은 일반적으로 좋은 사용 방식입니다. 컴포넌트에서 직접 Mutation을 ..

Vues 란? Global State를 관리하기 위한 Library입니다. State는 Data로 변환될 수 있으며 일종의 반응형 데이터로도 볼 수 있습니다. 변경될 수 있으며 무언가를 트리거하는 데이터죠. 하지만 앱의 다양한 컴포넌트에 영향을 주는 데이터인 상태를 관리하는 건 어렵습니다. 그래서 우선 상태를 Global State/LocalState 로 먼저 구분해줍니다. Local State Local State는 하나의 컴포넌트 내부에서 관리도는 데이터이자 상태입니다. 해당 컴포넌트와 프로퍼티를 통해 간적접으로 하위 컴포넌트도 영향을 줍니다. 사용자의 입력값, 어떠한 컨테이너 표시, 숨기는 버튼 등의 예로 활용됩니다. Global State Global State는 여러 컴포넌트 & 앱 전체에 걸쳐..

Script Setup 기존 setup()를 사용하는 것보다 가독성 측면에서 더 뛰어난 Script Setup에서의 다양한 기능들의 사용법 입니다. 변경점만 간단하게 작성합니다. Props value: {{ propsValue }} Injected value: {{ injectedValue }} Computed value: {{ computedValue }} Reactive value: {{ reactiveValue }} Increment props: defineProps를 통해 부모 컴포넌트로부터 전달된 프롭스를 정의합니다. emit: defineEmits를 통해 이벤트를 발생시키는 함수를 정의하고, 이를 통해 부모 컴포넌트로 이벤트를 전달합니다. inject: inject 함수를 사용하여 부모 컴포넌..

Comoisition API - methdos & computed & watcher Method -> General Function 이번엔 기존 Option API에서 사용하던 methods를 Composition API에선 어떻게 사용하는지 알아보겠습니다. {{ user.name }} {{ user.age }} Change Age 사실 methods를 안쓰고 단순히 setup 내부에 함수를 정의하면 되므로 따로 설명이 필요 없는 부분입니다. Computed Property -> Computed Function 연산 프로퍼티를 연산 함수로 바꾸는 방법도 설명이 필요 없기에 코드로 대체합니다. const fullName = computed(function() { return user.firstName + ..

Reactive Object 위의 코드처럼 상수로 어떠한 값들을 선언해 보았습니다. 이번엔 반응형 객체를 만들어서 출력해보고 그 내부 동작과정을 학습해 보겠습니다. {{ user.name }} {{ user.age }} 위 코드처럼 ref의 값으로 객체를 전달하면 Vue가 객체 내부의 변화를 파악할 수 있도록 객체는 프록시로 래핑 됩니다. setup 함수가 객체를 반환하고, 내부적으로 미가공된 ref 객체를 받으며 객체 내부 반응성을 인지합니다. 그리고 새 값이 지정되거나 템플릿에서 사용될 때를 알기 때문입니다. 하지만 이렇게 객체를 다룰 경우 객체만을 위해 만들어진 Reactive를 사용하는 것이 더 좋습니다. Reactive 사용 Reactive는 ref와 비슷하지만, 객체 전용으로 만들어졌습니다. ..