javascript/Vue13 [Vue3] vue3-echarts - line + bar 차트 만들기 vue3-charts 라이브러리를 이용하여 line + bar 차트를 만들어 보려고 한다. 화면 개발을 하다 보면 통계를 나타내는 화면을 만들어야 하는 상황이 종종 생기는데, 처음 마주한다면 어려움이 있겠지만 차트 개발은 한두 번 해봤다면 어렵지 않게 만들 수 있다. 지난번 글에서 만들어봤던 line 유형의 차트와 bar 유형의 차트를 오늘은 한 번에 생성하는 방법에 대해서 정리해 보려고 한다. Line + Bar 차트 사용 사례 보통 Line 차트와 Bar 차트를 사용하는 경우가 다양하게 있는데, 어떤 경우에 사용하는지 정리해 보았다. 1. 데이터 비교 여러 다양한 데이터 집한 간의 비교를 할 때 사용할 수 있다. 예를 들어, 시간에 따른 매출량과 이익을 함께 표시하여 매출과 이익 간의 관계를 시각적으.. 2024. 4. 16. [Vue3] vue3-echarts - line 차트, smooth 차트, area 차트 만들기 오늘은 vue3-echarts 라이브러리를 활용하여 line, smooth, area 유형의 차트를 만들어 보려고 한다. UI 개발을 하면서 데이터 시각화하는 경우는 생각보다 많고, 시각화하는 유형도 생각한 것보다 다양하게 구현을 하게 된다. 기본 형태인 line 차트를 기반으로 해서 옵션을 조금만 추가해서 smooth, area 형태의 차트로도 구현이 가능하며, 옵션 하나로 훨씬 더 다양한 차트 구현이 가능하다. smooth 옵션 차트 smooth는 line 그래프의 부드러운 정도를 조절하는 옵션이다. 이 옵션을 활성화하면 선이 더 부드럽게 그려지며, 일반적으로 이 옵션은 데이터 포인트 사이를 부드럽게 연결하여 시각적으로 더 부드러운 곡선을 형성하게 된다. 선이 꺾이는 부분이 더 부드럽게 연결된다. 활.. 2024. 4. 16. [Vue3] vue3-echarts - bar 차트 만들기 오늘은 vue에서 vue3-echarts 라이브러리를 활용한 bar 형태 차트를 만들어 보려고 한다. 차트 유형중 기본이 되는 bar 형태의 차트는 다양한 시각화 차트에서 많이 사용한다. 나 또한 다양한 환경에서 bar 형태의 차트를 많이 사용해 왔고, 최근에는 apache echarts 라이브러리를 이용해서 개발을 하고 있다. Apache에서 제공되는 라이브러리는 오픈 소스로서 생산성이 매우 좋다고 생각한다. 오늘 소개하는 시각화 차트를 그리는 Echarts 또한 개발이 쉽고 생산성이 좋은 것 같다. https://echarts.apache.org/en/index.html Apache ECharts ECharts: A Declarative Framework for Rapid Construction of.. 2024. 4. 15. axios interceptor를 사용하여 token 처리하기 SPA 개발을 하다 보면 axios로 통신하는 경우가 많이 있는데 서버와 분리된 환경이다 보니 로그인 정보는 token을 이용해서 처리하는 경우가 많다. 그런데 axios를 사용하여 통신할 때마다 token값을 매번 header에 세팅하여 넘겨주는 것은 가독성이 떨어지고 비효율적이기 때문에 interceptor를 활용하여 처리해 주는 것이 좋다. interceptor란? interceptor는 보통 http 클라이언트 요청 및 응답을 가로채어 전처리 작업을 수행하도록 도와주는 기능이다. 예를 들어, axios에서는 요청을 보내기 전에 interceptor를 사용하여 요청에 대한 설정을 추가하거나 응답을 받은 후에 interceptor를 사용하여 응답 데이터를 가공하거나 오류 처리를 할 수 있다. 이를 통.. 2024. 4. 12. Vue의 생산성을 위해 vite를 사용하는 이유 vue를 개발한지는 몇 년 되었지만 vue project를 구동할 때 느리다고 생각했던 적이 없었다. 늘 그렇듯 어떤 서버를 구동하든지 컴파일되고 올라가는 데에 어느 정도 시간이 걸렸기 때문에 vue를 구동하는데도 크게 신경을 쓰지 않았던 것 같다. 이번 프로젝트를 진행하면서 vite 정보를 얻고 알아보다가 과감하게 vite를 이용해서 project 세팅을 하게되면서 차이를 느끼고 정리를 하게 되었다. (http://econoflow.co.kr) vite를 사용하여 프로젝트를 진행한 결과 기존의 구동 방식과는 다르게 엄청난 속도 차이가 난 것이다. 기존에는 별 생각없이 보낸 시간들이 아까울 지경이었다. 서버 구동 명령어를 통해서 실행하고 콘솔이 올라갈 때에는 속도를 제외하고는 어떤 부분이 바뀌었는지 알 .. 2024. 4. 2. [Vue] Component 컴포넌트 만들기 안녕하세요! 오늘은 Vue에서 컴포넌트를 만드는 방법에 대해 포스팅하려고 합니다. 컴포넌트를 만들어 사용하면 여러 가지 장점을 살릴 수 있습니다. 기능의 재사용성, 코드의 가독성, 그리고 모듈화 등 다양한 장점을 활용하여 원하는 기능을 간편하게 구현할 수 있습니다. 컴포넌트를 만들고 활용하는 방법은 간단하지만 중요한 내용이기 때문에 한 번 정리해 보는 것이 좋습니다. 그럼 예제를 통해서 어떻게 구현이 되는지 알아보도록 하겠습니다~ vue 컴포넌트의 장점 1. 재사용성 컴포넌트 기반 접근 방식은 기능을 독립적으로 구성할 수 있어 재사용성이 뛰어납니다. 컴포넌트를 작성하고 필요한 곳에서 여러 번 사용할 수 있으며, 코드의 중복을 줄여 개발 효율성을 높입니다. 2. 모듈화 각각의 컴포넌트는 자체적인 템플릿, .. 2023. 7. 11. Vue3 부모 컴포넌트와 자식 컴포넌트 데이터 주고 받기 안녕하세요. 오늘은 지난 포스팅에 이어서 컴포넌트 간의 데이터 주고받는 방법을 포스팅하려고 합니다. 지난번에는 부모 컴포넌트에서 자식 컴포넌트를 import 시켜 하나의 컴포넌트로 만드는 것을 정리하였고, 오늘은 이어서 부모, 자식 컴포넌트 간의 데이터를 주고받는 방법을 정리해 보려고 합니다. 연동만 시켰다고 실제 업무에 활용하기에는 서로 간의 데이터 연동이 없기 때문에 데이터까지 주고받는 방법을 정리해 두면 실제 업무에 많은 도움이 됩니다. 그럼 오늘도 예제 소스 코드와 함께 하나씩 정리해 보도록 하겠습니다! 1. emit & props 이해하기 소스 코드를 들어가기 전에 간단하게 소스 코드에 대한 프로세스를 그림으로 먼저 그렸습니다. 부모에서 자식으로 전달할 때에는 'props'를, 자식에서 부모로 .. 2023. 1. 31. Vue3 Component 예제를 통해 배워보기 (부모 자식간 연동하기) 안녕하세요. 오늘은 Vue3 환경에서 Component을 다루는 방법을 포스팅하려고 합니다. 요즘은 Vue로 개발하는 환경이 정말 많아진 것 같은데요. Vue의 업데이트도 꾸준히 되면서 새로운 것이 많이 나오고 있습니다. 하지만 어떤 기술이든 기초적인 것이 가장 중요하기 때문에 오늘은 Vue의 Component에 대해서 알아보고 기초적인 것들이 익숙해지고 나면 조금씩 단계를 올려 포스팅해 보도록 하겠습니다. :) ( 저도 기초가 부족해서 오래 걸릴것 같긴 합니다..ㅜ ) Vue를 사용하다 보면 기능별, 메뉴별 등 시스템 설계에 따라 Component를 나눠서 개발을 많이 하는데, 현재 저도 프로젝트를 진행하면서 하나의 페이지를 개발할 때 Component 구조를 잡는데 시간이 많이 들어가고 있습니다 ㅎㅎ.. 2023. 1. 30. Vue Options API와 CompositionAPI 비교하기! 안녕하세요. 오늘은 Vue의 Options API와 CompositionAPI의 특징과 차이점을 정리해 보려고 합니다! Options API는 Vue 2 버전에서 주로 사용하는 디자인 방식이고, Composition API는 Vue 3 버전이 나오면서 2 버전보다 조금 더 유연하고 향상된 방식이라고 보시면 될 것 같아요. 실제로 어떤 차이가 있는지 간단한 예제를 통해서 알아보겠습니다. :) 1. Vue 2 - Options API 방식 click 먼저 Vue 2 버전의 Options API 방식입니다. 위의 방식은 Vue의 가장 기본이 되는 방식이라고 할 수 있습니다. 보통 Vue를 배우기 시작하신 분이라면 Options API 방식을 많이 보셨을 텐데요. 아직은 Vue 3의 Composition API.. 2023. 1. 29. [vue] Vue3 + Apache Echarts - Pie 차트 만들기! 오늘은 Vue3 + Apache Echarts 라이브러리를 활용하여 Pie 차트를 만들고 정리해보려고 한다.Pie 차트는 데이터를 비교하고 분석하는 데 유용한 차트이며, Apache Echarts 라이브러리를 사용한다면 간단하고 쉽게 구현할 수 있다.Pie 차트의 개념과 특징Pie 차트는 데이터를 원형으로 표현하여 각 데이터 항목의 상대적인 비율을 시각적으로 나타내는 그래프다. 원형 표현Pie 차트는 원형으로 데이터를 표현하는 그래프이며, 전체 데이터를 100%로 보고 각 항목의 비율을 나타낸다. 각 항목이 전체에 대한 상대적인 비율을 한눈에 파악할 수 있도록 도와준다.비율 표시Pie 차트는 각 항목의 비율을 각각의 부채꼴 형태로 표현한다. 각 부채꼴의 중심 각도는 해당 항목의 비율을 나타내며,.. 2023. 1. 4. 이전 1 2 다음 728x90
