JUNGKIMHOON

VUE.JS 프런트엔드 프레임워크는 크게 React, Vue, Angular가 있다. 그 중 Vue.js를 조사해본다. MVVM 패턴 Vue의 디자인은 MVVM 패턴을 기반으로 작성된다. 1. View View는 UI에 관련된 것을 다룬다. 사용자가 화면을 통해 사용되는 구조, 레이아웃, 형태 등의 인터페이스를 정의한다. 2. ViewModel View를 표현하기 위해 만든 View를 위한 Model. View를 나타내기 위해 데이터 처리를 ViewModel에서 한다. 3. Model 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분. Vue.js 장점 1. Easy to get started 다른 프런트엔드 프레임워크를 사용해보진 못했지만, Angular > React > Vue 순으로 난이..

기존 웹페이지 방식 페이지를 서버에 요청하고 받아 렌더링하는 형식 -> 서버사이드 렌더링 (jsp, php, asp ...) 페이지를 바꿀때 마다 로딩되므로 시간이 많이 걸린다. SPA (Single Page Application) 최신 웹 프론트엔드 프레임워크의 방식 (Vue, React, Angular...) 최초 접속시 모든 css, javascript를 가져와 페이지를 구성하고 필요시 서버의 rest API 데이터를 비동기 요청하여 받아와 렌더링한다. 화면 구성에 필요한 소스들은 클라이언트가 갖고 있으므로 기존 웹페이지 방식보다 SPA방식이 속도가 빠르다. SPA 장점 필요한 부분의 데이터만 서버에 받아서 렌더링하기 때문에 처리가 효율적이다. 화면 각각을 렌더링할 필요가 없어 화면 이동이 빠르다...

AOS Animation on Scroll 스크롤을 돌릴때 적용된 컨텐츠가 애니메이션 형태로 쇼잉된다. 설치 npm install --save aos@next 적용 (main.js) import AOS from 'aos'; import "aos/dist/aos.css"; new Vue({ created() { AOS.init(); }, el: '#app', router, render: h => h(App) }) 적용이 완료되었다. 사용 웹 개발자 김정훈입니다. /* */ 애니메이션의 여러가지 옵션이 있다. div태그 말고도 다른 태그들도 적용 가능. michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library..

위 이미지와 같이 타이핑 애니메이션을 사용할 수 있는 NPM 모듈 vue-typer 설치 npm install --save vue-typer 적용 (main.js) // ES6 import VueTyperPlugin from 'vue-typer' // CommonJS var VueTyperPlugin = require('vue-typer').default // Global var VueTyperPlugin = window.VueTyper.default Vue.use(VueTyperPlugin) 사용 프로퍼티는 cngu.github.io/vue-typer/ 참고 SCSS가 유난 부릴 때 참고 npm uninstall --save-dev sass-loader npm install --save-dev sass..

Vue CLI Template 종류 vue init webpack 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등 지원 vue init webpack-simple 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 vue init browserify 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등 지원 vue init browserify-simple 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 vue init simple 최소 뷰 기능만 들어간 HTML 파일 1개 생성 vue init pwa 웹팩 기반의 프로그레시브 웹 앱 기능을 지원

MOMENT.JS 날짜에 관한 계산, formatting적용에 moment.js를 사용한다고 한다. 설치 npm install --save vue-momentjs npm install --save moment 적용 (main.js) import moment from 'moment'; import VueMoment from "vue-momentjs"; Vue.use(VueMoment, moment); 적용이 완료되었다. 사용 {{ $moment(movie.writeDate).format('YYYY-MM-DD') }} 데이터의 날짜 형식을 적용. {{$moment().format('YYYY-MM-DD')}} {{$moment(item.dateTime).format('YYYY-MM-DD')}}