설모의 기록

vue router 는 url 경로마다 띄워줄 component 들을 설정하는 것입니다. vue-router 를 이용하면 SPA(Single Page Application) 을 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있습니다. 참고로 vue router 의 기본 경로는 '기본_도메인/#/' 입니다. 기본 경로에 #을 없애고 싶으시다면 router 의 mode 를 history 로 설정하시면 됩니다. 이제 기본적인 사용법에 대해 알아볼까요? Vue router 사용법1. 모듈설치우선 모듈부터 설치해야겠죠? 아래의 명령어를 이용해 vue-router 모듈을 설치해주세요.$npm i vue-router --save // --save 는 package.json 에 자동으로 추가되도록 하기 ..

vue 를 이용해 핸드폰에서도 이용가능한 반응형 웹을 만들 때, 이미지 슬라이더를 구현해야 할 때가 있으실 겁니다. 스와이프를 통해 여러 이미지를 리스트 형식으로 보여주는 기능을 구현하기 위해 vue-tiny-slider 모듈을 사용해보았습니다. 아래는 데모입니다. 위의 데모는 3개의 이미지를 슬라이더로 만들어 보여주는 예제입니다. 그럼 자세한 사용방법에 대해 알아볼까요? 사용하기 전 준비 vue-tiny-slider 를 사용하기 전 모듈을 먼저 설치해야 합니다. 저는 npm 을 주로 사용하기 때문에 npm 을 이용해서 모듈을 설치하도록 하겠습니다.$npm i vue-tiny-slider --save // --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다. 모듈을 설치하..

생명주기? 인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(life cycle) 이라고 합니다. 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook) 이라고 합니다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가집니다. 속성의 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 로 총 8개입니다. 아래에서 하나하나 살펴볼까요? 1. beforeCreate> 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 때는 뷰 인스턴스의 data 와 methods 속성이 정의되어 있지않고 화면 요소(ex. dom) 에도 ..

Vue? 웹개발을 목표로 하시는 분이라면 뷰제이에스에 대해 한번쯤은 들어보셨을 겁니다. 유명한 자바스크립트의 프레임워크는 대표적으로 리액트와 앵귤러가 있는데요. 저도 잠깐 리액트와 앵귤러2는 공부했었는데 두 프레임워크를 시작하기 위해 필요한 사전 개발 지식들이 많아서 공부하다 중지했었습니다. 자바스크립트를 잘 모르거나 개발을 시작한지 얼마 안됐다면 두 프레임워크는 배우기엔 진입장벽이 다소 높습니다. 더군다나 앵귤러2는 타입스크립트 기반이기 때문에 자바스크립트보다 더 높은 이해수준을 요구합니다. 이러한 요인이 vue.js 를 더 유명해지게 만들었는데요. vue.js 는 다른 자바스크립트 프레임워크에 비해 비전공자들도 배우기 쉽게 개발할 수 있도록 만들어졌다고 합니다. 뷰는 앵귤러의 데이터 바인딩 특성과 리..