AG Grid

데이터 허브 관련 UI를 작업하던 도중, 처음 접해보는 라이브러리를 발견했습니다.그것은 바로 AG Grid인데요. 이것이 무엇인지 알아봅시다! 1. AG GridAG Grid란?(AG Grid 공식 홈페이지 바로가기) 고성능의 JavaScript 데이터 그리드 라이브러리로, 다양한 기능과 유연성을 제공하여 웹 애플리케이션에서 복잡한 테이블과 데이터를 효과적으로 관리하고 표시할 수 있게 지원합니다. 2. AG Grid 설치그럼 바로 AG Grid를 설치해 봅시다!(저는 Vue를 사용했어요,) 설치 공식 문서 1) NPM 설치다음과 같이 입력하여, 라이브러리를 설치해 줍니다.npm install ag-grid-vue3 2) Vue 데이터 그리드 가져오기그럼 이제 데이터 그리드를 가져와야겠죠?AG Grid를 ..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 22.
• textsms

Helper 함수

Vuex의 주요 속성들을 더욱 쉽게 사용할 수 있는 API가 있다고 해서 그것이 무엇이고, 어떻게 사용하는 지 알아봅시다! 1. HelperHelper란? 코드의 중복을 줄이고 가독성을 높이기 위해 자주 사용되는 유틸리티 함수 or 메소드를 제공하는 API입니다. 2. 사용방법helper를 사용하고자 하는 vue 파일에서 다음과 같이 해당 헬퍼를 로딩해 줍니다.App.vueimport { mapState } from "vuex";import { mapGetters } from "vuex";import { mapMutations } from "vuex";import { mapActions } from "vuex";export default { computed() { ...mapState(["num"]),..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 9.
• textsms

Vuex

React에서는 Flux 패턴과 같은 상태 관리 아키텍처가 존재합니다.Vue또한 상태 관리를 하기 위해 무엇인가 존재할 것 같은데요.그렇게 찾아보다가 Vuex를 찾게 되었습니다!Vuex가 무엇이고 어떤 특징을 가지는 지 알아봅시다. 1. VuexVuex는 Vue.js 애플리케이션을 위한 상태 관리 라이브러리로, 중앙 집중식 저장소를 제공하여 컴포넌트 간의 상태 관리를 용이하게 합니다!이는 애플리케이션의 상태를 예측 가능한 방식으로 관리하고, 상태 변경을 추적하고, 디버깅을 쉽게 할 수 있게 해줘요.이는 React의 Flux 패턴에서 기인했다고 합니다. ※ Flux 패턴Flux 패턴이 뭘까요?Flux 패턴이란, Facebook에서 제안한 애플리케이션 아키텍처로 MVC 패턴의 복잡한 데이터 흐름 문제를 해결..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 9.
• textsms

Vue.js에서의 ES6

Vue.js에서 ES6를 사용하여 개발하면, 더욱 편하게 개발할 수 있을 거에요.여기서 ES6는 무엇이고 이를 활용한 문법이 무엇이 있는지 알아봅시다! 1. ES6ES6(ECMAScript 2015 or ES2015)란? JavaScript 언어의 주요 버전 업데이트로, JavaScript 언어의 기능을 크게 확장하고 향상시킵니다.※ 여기서 2015년은 ES5(2009년)이래로 진행한 첫 메이더 업데이트가 승인된 해입니다. 또한, 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식입니다.ES5에 비해 문법이 간결해져서 익숙해지면, 코딩을 훨씬 편하게 할 수 있을 거에요. 2. Babelbabel 공식 홈페이지 바로가기 ES6를 공부하면, Babel을 빼먹..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 8.
• textsms

Computed vs Watch

Vue.js에서 computed와 watch는 둘 다 반응형 데이터를 다루는 방법을 제공하지만, 그 목적과 사용 방식에 따라 차이가 존재해요.그 차이에 대해 알아봅시다! 1. ComputedComputed는 계산된 속성(Computed property)을 정의하는 데 목적을 두고 있어요.어떤 데이터의 변화에 따라 다른 데이터를 자동으로 갱신해야 할 때, 사용합니다.이 속성은 종속된 데이터가 변경되지 않는 한 캐시됩니다.캐싱(Caching) : 데이터 or 연산 결과를 일시적으로 저장하여, 나중에 동일한 데이터를 요청할 때, 다시 계산하거나 가져오는 대신 저장된 데이터를 빠르게 제공하는 기술 따라서 종속 데이터가 변경되지 않으면, 동일한 결과를 반환하며 성능 최적화에 유리합니다. computed.html ..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 4.
• textsms

Props와 Events

Vue.js에서 컴포넌트 간의 통신 방식은 부모-자식 관계, 형제 관계, 전역 상태 관리 등을 통해 이루어진다고 해요.그러면 이제, 주요 컴포넌트 통신 방식에 대해 알아봅시다! 1. PropsProps는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 사용해요.자식 컴포넌트는 props 옵션을 사용하여, 부모로부터 전달된 데이터를 수신합니다.다음 코드와 같이 사용할 수 있어요. props.html -->  결과AppHeader안에 propsdata라는 속성으로 데이터 hi가 내려간 것을 확인할 수 있습니다. 이를 활용하여, 다음과 같이 여러 컴포넌트에 props 속성을 사용할 수 있습니다. -..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 4.
• textsms