Web과 프로그래밍 언어/JavaScript25 [VUE.JS] 조회한 데이터로 차트 그리기 (Echarts, Apexcharts 사용하기) vue.js 에서 조회 결과로 차트를 그리려고 함. 처음에는 echartbar 로 시도했는데, 반응형이 아니어서 아쉽기도하고 디자인이 조금 더 세련되었으면 하는 요구사항이 있어서 apexcharts 로 2안을 마련했음. 완성된 차트를 먼저 확인해보자. ECharts와 ApexCharts의 차이점라이선스무료 (Apache 2.0)무료 + 일부 유료 기능사용 난이도중간 (설정 복잡)쉬움 (직관적인 설정)차트 유형매우 다양적당히 다양데이터 처리 능력대규모 데이터 처리에 적합소규모/중간 규모 데이터에 적합프레임워크 지원독립적 사용 및 플러그인 형태로 통합 가능Vue, React, Angular와 강력한 통합디자인강력한 커스터마이징, 복잡한 그래프 가능깔끔하고 세련된 기본 디자인 제공반응형기본적으로 반응형 아님모.. 2025. 1. 16. [VUE.JS] Vue.js 셀 값 변경 이벤트로 날짜(YYYY/MM/DD) 유효성 검사하기(onCellValueChanged) vue날짜 유효성 검사를 하는 방법은 여러가지이지만 사용자가 셀 값을 입력한 직 후 event 를 발생시켜 사용자가 입력한 날짜의 유효성 검사를 실시해보기로 하자. onCellValueChanged(event) { if (event.colDef.field == 'getDate') { const dateRegex = /^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/; const enteredDate = event.newValue; // console.log('enteredDate:', enteredDate); // console.log('dateRegex.test(entere.. 2023. 7. 13. [SVELTEKIT] Layout, Loading Layout +layout.svelte웹페이지의 공통 레이아웃에 대한 설정Navigation bar 이나 전체 reset.css 등 앱 전체에 공통으로 들어가는 요소들을 src/routes/+layout.svelte 파일을 만들어서 넣어준다기본 레이아웃 레이아웃 페이지에는 어떤 것이든 추가할 수 있지만 무조건 을 포함하고 있어야 한다. 만약 레이아웃에 를 추가한다고 하면 다음과 같이 작성해야만 한다. Home About Settings-> 위의 코드에서 nav 영역은 공통으로 들어가는 부분이고, slot이 각 페이지마다 다르게 들어가는 부분이다. = +layout을 설정하면, 네비게이션이 모든 페이지에 공통으로 들어가고 각 페이지는 slot에 들어가게 nested layouts(중첩 .. 2023. 3. 24. [SVELTEKIT] 스벨트킷 튜토리얼 SVELTEKIT tutorial - Routing, Pages sveltekit tutorial React에 NextJS, Vue에 Nuxt가 있듯이 Svelte에는 SvelteKit이 있다. NextJS와 Nuxt와 같이 SSR, SSG 등 여러가지 다양한 기능들을 제공한다. SvelteKit 은 고성능 웹 앱을 구축하기 위한 프레임워크이다.SSR/SSGloadhookendpointSvelte 는 UI를 쉽게 만들게 해줄 수 있는 컴파일러 or 라이브러리라면 Sveltekit는 svelte를 사용하여 SSR웹을 구축한다거나 Routing을 한다거나 등을 손쉽게 핸들릴 할 수 있게 해준다. RoutingSvelteKit 은 filesystem-based router 을 사용하여 src/routes 폴더 안에 있는 파일들은 SvelteKit이 자동으로 파일 이름에 따.. 2023. 3. 24. 이전 1 2 3 4 ··· 7 다음
