설모의 기록

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

자바스크립트가 기반인 여러 프레임워크를 이용해 웹 페이지를 구현할 때 정규식이 필요할 때가 많습니다. 예를 들어, 회원가입할 때 이메일이 형식이 제대로 맞는지, 전화번호가 제대로 입력했는지 등등 유효성을 체크할 때 정규식을 사용합니다. 아래의 정규식 목록은 추후 다른 정규식을 사용해 볼 때마다 업데이트 하겠습니다. 1. 이메일 정규식 12let emailRegExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;emailRegExp.test("hyeona@naver.com"); // 정규식에 해당하면 true, 맞지 않으면 false 반환 2. 휴대폰 번호 정규식 123let phoneRegExp1 ..

ParticleSystem 이 뭐지? 게임 엔진들은 각각 기본적으로 ParticleSystem 을 제공합니다. Cocos creator 도 마찬가지인데요. 위와 같이 Cocos creator 에는 ParticleSystem 컴포넌트를 추가하실 수 있습니다. 그렇다면 ParticleSystem 이란 무엇일까요? 기본적으로 파티클은 위치가 있고 모양과 행동을 결정하는 여러 프로퍼티를 추가할 수 있는 오브젝트를 말합니다. 그리고 그러한 파티클들을 emitter 를 사용해 방출하는 것을 ParticleSystem 이라고 합니다. 파티클 시스템은 불, 연기, 거품 등 여러 이펙트 효과를 발생시키기 위해 사용됩니다. 근래에는 ParticleSystem 이 적용되지 않은 모바일 또는 웹 게임을 찾기가 힘듭니다. 그만..

생명주기? 인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(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 는 다른 자바스크립트 프레임워크에 비해 비전공자들도 배우기 쉽게 개발할 수 있도록 만들어졌다고 합니다. 뷰는 앵귤러의 데이터 바인딩 특성과 리..