본문 바로가기
반응형

vuejs6

[svelte 실무적용] #1. 사용이유, html 에디터(quill), SEO 적용 샘플 SvelteJS 사용 이유? 빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다. react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~ 아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다. typescript를 사용하는 이유? 정형화된 틀에 맞춰.. 2022. 8. 4.
[VueJs] amcharts3 사용하기 설치 npm install amcharts3 --save 사용 샘플 소스 오류 수정 import AmCharts from 'amcharts3' 위 형태로 하면 AmCharts.makeChart() 함수를 찾을 수 없다는 오류가 나와서 수정 참조 URL https://github.com/developerKumar/AmchartsUse 2020. 6. 19.
[VueJs] API 기능 모음 (추가 중) history.back() this.$router.go(-1) UI 강제 업데이트 this.$forceUpdate() // string replace all let replaceAll = function (source, needle, target) { return source.split(needle).join(target) } // 를 변환 let decodeHTML = function (html) { let txt = document.createElement('textarea') txt.innerHTML = html return txt.value } 2020. 6. 7.
[VueJs] vue-chartjs 로 멀티라인 그래프 그리기 머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~! 개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다. vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts.. 2020. 5. 11.
[VueJs] CKEditor 연동하기 // 설치 npm i --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic // package.json 확인 "dependencies": { "@ckeditor/ckeditor5-build-classic": "^16.0.0", "@ckeditor/ckeditor5-vue": "^1.0.1" } // template 파일 샘플 팁 언어를 한국어(ko) 로 지정을 해도 메뉴들이 여전히 영어로 나올 경우, 한국어를 직접 참조할 수 있도록 추가 import '@ckeditor/ckeditor5-build-classic/build/translations/ko'; 참조 URL : https://ckeditor.com/docs/ckeditor5/lates.. 2020. 4. 27.
[VueJs] component 에서 벗어날때 이벤트 처리하기 페이지 이동 전에 특정 이벤트를 처리하고 싶은 경우가 있는 경우 유용합니다. // component LIFECYCLE components: { ... }, mounted: { ... } methods: { ... }, beforeRouteLeave (to, from, next) { ... } // 컴포넌트를 벗어나는 경우 처리할 이벤트 // 샘플 beforeRouteLeave(to, from, next) { const answer = window.confirm('데이터 저장이 되지 않았습니다. 이 페이지를 나가시겠습니까?') if (answer) { next() } else { next(false) // false를 추가한 경우 페이지 이동을 하지 않음 } } 2020. 4. 26.
반응형

티스토리툴바