본문 바로가기

지금, 개발하기/Vue12

[Vue.js] Vue의 코드 재사용 방법 - mixin vs Compositon API 🚨1. 현재 프로젝트의 문제점 제가 하고 있는 프로젝트의 여러 컴포넌트에는 현재시간을 불러와서 조회하는 기능이 있습니다. 같은 기능인데 개발자가 다르다 보니 컴포넌트 마다 현재시간을 불러오는 방법이 각각 다르게 구현되어 있었습니다. 최근에 이 시간 조회 방식을 변경해야 했는데, 모든 컴포넌트를 돌아다니면서 수정을 했어야해서 여간 불편했습니다😥 그래서 재사용 가능 기능(여기선 현재시간을 불러오는 기능)을 여러 컴포넌트에 분산시킬 때, 어떤 방법이 좋을지 비교해보았습니다. 💡2. Vue의 코드 재사용 방법 1) EventBus EventBus는 Vue 인스턴스를 이용하여 한 컴포넌트에서 다른 컴포넌트로 이벤트를 전달하는 방법입니다. 이를 통해 컴포넌트간에 데이터나 알림을 보낼 수 있습니다. 👍 장점: "구현.. 2024. 1. 28.
암호화 프론트 엔드에서 암호화 // SignUp.vue signUp(){ const hashedPw = CryptoJS.SHA256(this.user.password).toString(); // hashedPw = a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3 this.$http.post(`/api/user/signUp`, { user: { userName: this.user.username, userID: this.user.userid, password: hashedPw, } }) .then((res) => { if(res.data.success){ alert("회원가입이 정상적으로 완료되었습니다.") }else{ alert("회원가입에 실.. 2023. 5. 16.
Vue3] data-grid _ tabulator 테마 변경 tabulatot는 Vue 프로젝트 내에서 data table을 만들수 있도록 지원하는 무료 라이브러리입니다. tabulator는 vue2와 vue3를 모두 지원하고 있고, 해당 글은 vue3를 기준으로 작성되었습니다. 이번 글에서는 tabulator의 테마를 변경하는 법을 알아보겠습니다. https://tabulator.info/docs/5.4/theme Tabulator - Themes Choose from a range of built in themes to help style your table to match popular frontend frameworks tabulator.info tabulator 홈페이지에서 왼쪽 메뉴를 클릭하면 지원하는 테마가 나옵니다. 테마는 에 import해도 되고,.. 2023. 1. 11.
Vue] vue.js 데이터 시각화 라이브러리 for 리포트 1. Bryntum(브린텀) vue 2, 3 대표 사이트: https://bryntum.com/ 데모 : https://www.bryntum.com/products/grid/examples/columntypes/ 기능: 열별로 데이터 그룹화, 특정 값(날짜 등)으로 필터링, 그룹 내 정렬, 그룹 요약, 등 기본기능 가격 : https://bryntum.com/store/ High Performance Web Components For Project Management A suite of customizable Gantt, Scheduler, Grid, Calendar and Kanban web components that are seamlessly integrated with React, Vue, Ang.. 2023. 1. 5.

티스토리툴바