설모의 기록

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

변수 선언의 방법 어느 언어로 개발을 하던지 변수라는 것을 사용합니다. 각 언어마다 변수를 선언하는 방법이 있습니다. 자바스크립트는 ES6 부터 let, const 라는 키워드가 등장해 var 를 포함해 총 3가지 방법으로 변수를 선언할 수 있습니다. 하나하나 알아볼까요? 자바스크립트에서의 변수의 유효범위 자바에서는 변수의 유효범위가 블록단위입니다. 그렇기 때문에 함수 반복문 등 블록안에서 생성한 변수는 그 블록이 끝난 이후에는 사용할 수가 없습니다. 자바스크립트는 자바와는 다르게 함수가 유효범위가 됩니다. 따라서 반복문 안에서 생성한 변수는 함수가 끝나지 않았다면 반복문 밖에서도 사용할 수 있습니다. 변수의 유효범위가 넓다는 것은 마냥 좋은 것만은 아닙니다. 아래의 예제를 볼까요? let 과 var 의..

ray cast 란? 이번에도 클래시 로얄 게임으로 예를 들어보겠습니다 (제가 요즘 클래시 로얄에 빠져있어서..ㅎ). 위의 그림에서 보시면 빨간색의 상대방 캐릭터가 제 캐릭터인 드래곤과 충돌해 공격을 준비하는 장면입니다.만약 ray cast 를 사용하지 않고 그냥 attack () 함수를 이용해 드래곤의 hp 를 깎아주도록 구현을 했다면 어색한 장면이 보일겁니다. 빨간색 캐릭터는 불을 쏴서 드래곤을 공격하지만 그 불은 드래곤을 지나쳐 뒤따라오는 두 마리의 고블린에게도 타격을 입히는 모습이 나타나기 때문입니다. 이런 어색한 장면이 있다면 상대방에게는 너무 억울한 상황이겠죠? 불 공격 한방으로 세 마리의 캐릭터에게 타격을 입혀야하는데 겨우 드래곤 한 마리라니,, 그래서 적용하는 것이 ray cast 개념입니..

Object pool? 객체 풀이 뭐야? 대뜸 배틀그라운드 사진을 첨부해서 놀라셨죠? 이번 포스팅은 게임을 개발할 때 성능을 좌지우지하는 object pool 을 설명하기 위해 배틀그라운드 사진을 첨부했습니다. 위와 같은 게임에서는 총수들이 총을 쏘며 캐릭터들을 죽이는 장면을 쉽게 볼 수 있습니다. 그런데 만약, 제가 총 쏘기를 1000번을 수행했다면 총알을 1000을 만들어야 할까요? '에이~ 요즘 컴퓨터들이 얼마나 빠른데 1000개 만드는거까지 성능 최적화를 해야하나요?' 라고 말씀하실 수 있습니다. 그러나 유저들에게 제공되어야하는 게임의 속도는 어색하지 않고 끊김이 없으며 부드러워야 합니다. 총알 객체를 new 하고 이미지를 입히고 애니메이션 이미지들을 로드해 애니메이션을 적용해 화면을 붙이는 작업..

Group Manager 란? 물리엔진을 사용해 충돌에 관련된 작업들을 하려고 할 때 group manager 를 사용의 장점을 알아보겠습니다. 예를 들어, 클래시 로얄 게임을 생각해 볼까요? 빨간색 hp 를 가진 캐릭터들이 적 캐릭터, 파란색 hp 를 가진 캐릭터들이 제 캐릭터 입니다. 제가 지금 이 게임을 개발하는 중이라고 가정하겠습니다. 저는 캐릭터끼리 충돌이 일어났을 때 싸우도록 구현을 하려고 합니다. 그렇지만 제 캐릭터끼리 만났을 때는 싸우면 안되겠죠? 같은 그룹인 (내 캐릭터 그룹, 상대방 캐릭터 그룹) 캐릭터끼리는 충돌했을 때 싸우지 않도록 구현하고 싶은 것입니다. 이럴 때 Cocos creator 에서는 group manager 라는 기능을 제공합니다. 제 캐릭터 노드들은 같은 그룹으로 설..

Draw Call 게임 엔진의 성능에 대해 공부를 할 때, delta time 과 함께 등장하는게 바로 드로우 콜입니다. 드로우 콜은 말 그대로 그려달라는 요청입니다. 하나의 오브젝트를 화면에 그리기 위해 CPU 가 GPU 에게 "화면에 그려줘~!" 라고 요청하는게 바로 draw call 입니다. 따라서 이미지 1000개를 그리기 위해서는 1000번의 요청이 필요하고 한 프레임안에 그 요청을 수행해야하니 delta time 이 낮아지겠죠? 그렇게 게임이 느려지게 되는 것입니다. 따라서 드로우 콜이 높아질수록 게임의 성능은 낮아질 수밖에 없습니다. 그렇기 때문에 draw call 을 줄이는 작업은 매우 중요합니다. 이 draw call 을 줄이기 위해 게임엔진들은 batch 기술을 제공합니다. 아래의 예시..