▶ Front-End23 Vue3 기초 예제 - 입력 글자 수 표시(Computed) 입력 글자 수 제한을 사용자가 알기 쉽게 화면에 동적 입력 글자 수 표현 *자세한 설명 생략 ▷ Computed 란? - template의 data 표현을 간결하게 하는 속성 - 가독성 ↑ 유지보수 ↑ *한눈에 알아보기 - 사용하기 전 코드 ( {{ inMsg.replaceAll('\n', '').length }} 자 / 최대 {{ MAX }} 자 ( {{ inMsg.replaceAll('\n', '').length }} 자 / 최대 {{ MAX }} 자 ) - 사용 후 코드 ( {{ inMsgSize }} 자 / 최대 {{ MAX }} 자 ) ( {{ inMsgSize }} 자 / 최대 {{ MAX }} 자 ) ▷ 프로젝트 전체 구조 ▷ 기초 예제 - 입력 글자 수 표시 *전체 코드 *주석 이외 설명 .. 2023. 11. 21. Start to Last Date Date 타입의 시작 날짜부터 종료 날짜까지 날짜들을 구하는 메소드 *자세한 설명 생략 /** * Start to Last Date * @param {*} startDate(Date) * @param {*} lastDate(Date) * @returns YYYY-MM-dd */ function getDatesStartToLast(startDate, lastDate) { if (!(startDate instanceof Date && lastDate instanceof Date)) return "Not Date Object"; var result = []; var curDate = startDate; while (curDate 2023. 11. 14. Date Formater Date 타입을 원하는 Format으로 변경하는 메소드 *자세한 설명 생략 /** * Date Formater * * @param {*} date * @returns YYYYMMdd */ function getFormatDate(date) { const YYYY = String(date.getFullYear()) const MM = String((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1)) const dd = String(date.getDate() >= 10 ? date.getDate() : "0" + date.getDate()) return YYYY + MM + dd } /** * Date Format.. 2023. 11. 14. Null Check 빈칸(""), null, 공백(" ")을 체크하는 메소드 *자세한 설명 생략 /** * Null Check * * @param {*} str * @returns default false */ function nullCheck(str) { if ("" == str) { return true } if (null == str) { return true } if (str.replace(/\s/g, '').length < 1) { return true } return false } *개선한 버전 /** * isBlank Check * * @param {*} str * @returns {boolean} */ function isBlank(str) { return !str || str.trim().length ===.. 2023. 11. 14. Vue3 기초 예제 - Local Storage Local Storage에 대한 간단한 설명과 이를 사용하는 기초 예제 *이전 Vue3 기초 예제 - Toast 팝업에 이어서 진행(아래 관련 글 참고) *자세한 설명 생략 ▷ Local Storage 란? - 로컬에 존재하는 저장소 - 데이터를 브라우저에 반영구 저장 - 브라우저를 재시작해도 데이터가 남음 * 불필요한 데이터를 직접 삭제해줘야 하는 단점 ▷ 프로젝트 전체 구조 *이전과 동일 한 부분 생략 ▷ 기초 예제 - Local Storage *사용자가 입력한 메시지를 Local Storage에 저장/삭제하는 예제 *주석 이외 설명 생략 - LocalStorageUtil.js import * as CmmUtil from '@/module/CmmUtil' /** * Local Storage Init .. 2023. 11. 14. Vue3 기초 예제 - Toast 팝업(Primevue) 사용자로부터 입력받는 간단한 페이지와 Primevue ToastService 사용 예제 *새로운 프로젝트로 진행 *API 관련 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 ▷ Primevue + ToastService 설치 *vue-cli를 통해 Project 생성 후 진행 💡npm install primevue ▷ Axios 설치 *vue-cli를 통해 Project 생성 후 진행 *API 통신을 위한 설치 생략 가능 💡npm install axios ▷ 기초 예제 - Toast 팝업 - main.js *Primevue + ToastService 등록 /** Vue */ import { createApp } from 'vue' import App from './App.vue' /** Prime.. 2023. 11. 13. Vue3 기초 예제 - Line Charts(Vue-ECharts) Vue-Echarts 라이브러리를 사용하여 Line Charts를 생성하는 기초 예제 *Vue3 기초 예제 - Bar Charts(Vue-ECharts)에 이어서 진행 *API 관련 설명 생략 *자세한 설명 생략 ▷ Vue-Echarts 설치 *vue-cli를 통해 Project 생성 후 진행 *설치방법 생략 *Vue3 기초 예제 - Bar Charts(Vue-ECharts) 참고 ▷ 기초 예제 - Line Charts - main.js *Vue-ECharts 라이브러리 등록 *LineChart 추가 /** Vue */ import { createApp } from 'vue' import App from './App.vue' /** Router */ import { router } from '@/modu.. 2023. 11. 10. Vue3 기초 예제 - Bar Charts(Vue-ECharts) Vue-Echarts 라이브러리를 사용하여 Bar Charts를 생성하는 기초 예제 *Vue3 기초 예제 - 날짜 검색(v-calendar)에 이어서 진행 *API 관련 설명 생략 *자세한 설명 생략 ▷ Vue-Echarts 설치 *vue-cli를 통해 Project 생성 후 진행 *설치방법 생략 *Vue3 기초 예제 - Pie Charts(Vue-ECharts) 참고 ▷ 기초 예제 - Bar Charts - main.js *Vue-ECharts 라이브러리 등록 *BarChart, GridComponent 추가 /** Vue */ import { createApp } from 'vue' import App from './App.vue' /** Router */ import { router } from '.. 2023. 11. 9. Vue3 기초 예제 프로젝트 정리 Vue3 기초 예제 프로젝트 구조 및 소스 정리 *관련 글이 점점 늘어나 하나로 통합하기 위함 *이 글에서만 싱크 맞춤 *주석 이외 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 *순서대로 나열 ▷ Cmp.css ▷ HeaderCmp.vue ▷ LoginCmp.vue ▷ MenuCmp.vue ▷ A01C01.vue ▷ ACM.vue ▷ CCM.vue ▷ CompositionTestCmp.vue ▷ ForTestCmp.vue ▷ IfTestCmp.vue ▷ MenuNav.js ▷ LoginStore.js ▷ AxiosModule.js ▷ CmmUtil.js ▷ App.vue ▷ main.js ▷ Cmp.vue @import url('https://fonts.googleapis... 2023. 11. 6. 이전 1 2 3 다음 728x90 728x90
