javascript/Vue14 [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. [vue3] vue3-echarts scatter 차트 (dot) 만들기! 오늘은 vue3-echarts를 이용하여 scatter 차트, 또는 dot 차트라고 하는 유형의 차트에 대해서 정리해 보려고 한다. scatter 차트는 데이터의 분포도를 나타낼 때에 유용한 데이터 시각화 차트다. 실제 업무에서는 scatter 차트를 사용했던 경험은 많이 없지만 최근 개발을 진행하면서 scatter 유형의 차트를 구현했던 경험이 있기 때문에 이렇게 글을 정리하게 되었다. Scatter 차트의 개념 Scatter 차트는 데이터를 산점도 형태로 표현하는 차트다. 이 차트는 두 변수 간의 관계를 시각적으로 파악할 수 있도록 도와주며, 각각의 데이터 포인트는 데이터 집합에서 하나의 점으로 나타난다. Scatter 차트는 일반적으로 X축과 Y축에 각각의 변수를 할당하고, 데이터 포인트를 해당 .. 2022. 12. 23. 이전 1 2 3 다음
