SSR(Server Side Rendering) 서버 측에서 렌더링 마친 상태로 데이터가 결합된 화면을 클라이언트에 전달하는 방식 - 새로운 페이지로 이동할 때마다 요청하기 때문에 깜박거리는 현상 존재 - SPA(Single Page Application) 기법이 대두되면서 CSR 방식이 각광 CSR(Client Side Rendering) 서버가 요청을 받으면 클라이언트에 각종 리소스를 보내주고 클라이언트가 그것을 받아 렌더링 하는 방식 - 최초 요청 시 HTML을 비롯한 CSS, JavaScript 등 각종 리소스를 받아오고 이후에는 서버에 데이터만 요청 - 자바스크립트로 뷰를 컨트롤 - 초기 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공 - 초기 ..

vue.js 프로젝트 시 검색조건에서 기간을 설정하는 부분에 el-date-picker로 볼 수도 있다. el-date-picker를 처음 보는 사람은 많이 당황스러울 것이다. el-date-picker에 대해 몇가지 옵션들을 살펴보도록 하자. 이것만 알면 el-date-picker 옵션에 대해 편하게 설정할 수 있을 것이다. 아래 el-date-picker 속성값을 하나씩 살펴보겠다. 1 2 3 4 5 6 7 8 cs el-date-picker태그에 type 속성을 보게 되면 대표적으로 4가지를 들 수 있다. type="date" type="week" type="month" type="year" value-format 속성으로 해당 value값을 원하는 형식으로 설정할 수 있다. value-format..

날짜를 계산하는 라이브러리인 moment.js를 사용하면 내장된 함수를 이용하여 간단히 처리할 수 있다. moment 라이브러리를 이용하면 손쉽게 날짜관련 기능들을 구현할 수 있다. npm install --save moment moment 라이브러리를 설치해준다. "moment": "^2.29,1" 버전으로 진행했다. 스크립트에서 import moment from 'moment' 추가해준다. 1 2 3 moment().format() // 현재날짜 moment().format('YYYY-MM-DD HH:mm:SS) // format()함수로 날짜형식 지정 moment('20210930').format('YYYY-MM-DD') // 원하는 날짜를 지정 가능함 cs add()/subtract() - 원하는..

서버단에서 poi 메이븐으로 사용하여 다운로드하는 방법이 있지만 vue.js를 사용하고 있다면 화면단에서 불러온 목록 데이터를 엑셀로 만들어서 다운로드 할 수 있다. npm install --save xlsx xlsx를 설치해준다. "xlsx": "^0.16.7" 버전으로 진행했다. 스크립트에서 import xlsx from 'xlsx'를 추가해준다. data 변수는 아래와 같이 선언해주며 excelList는 조회해온 데이터로 설정하면 된다. 현재는 테스트 데이터를 넣어두었다. header에서 key값은 목록데이터에서 키값이랑 매핑이 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 data() { return { vi..

vue.js 라이프 사이클 구조 기초 정리 .vue 파일에서 스크립트는 크게 Vue.conponent와 export default 두 가지로 나뉜다. export default 스크립트 구조 대해서 간략하게 어떠한 의미로 사용하는지에 대한 설명이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 // 실제 HTML 태그가 들어가는 템플릿 cs