전체 글

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. Javascript Index SignaturesJavascript(및 Typescript)의 Object는 다른 Object의 참조를 유지하기 위해 문자열로 접근할 수 있습니다.다음은 간단한 예입니다.let foo:any = {}; foo['Hello'] = 'World'; console.log(foo['Hello']); // World 우리는 "Hello"라는 Key로 "World"라는 문자열을 저장했습니다. 기억하세요, 우리는 Javascript의 어떤 객체든 저장할 수 있습니다. 그럼 이제 이번 장의 컨셉을 이해하기 위해 클래스의 인스턴스를 아래와 같이 저장해보도록 하죠.class Foo { constructor(public message:..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.클래스는 유용합니다.다음과 같은 구조는 일반적으로 사용되는 패턴이죠.function foo() { let someProperty; // Some other initialization code function someMethod() { // Do some stuff with `someProperty` // And potentially other things } // Maybe some other methods return { someMethod, // Maybe some other methods }; } 이는 드러내는 모듈 패턴 으로 알려져 있으며 Javascript에서 흔히 볼 수 있습니다. (자바 스크립트 클로저 사용).만약 당신이 파일 모듈 패턴..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 수업JavaScript에서 클래스를 첫 번째 강의 주제로 다루는 이유는 다음과 같은 중요한 이유가 있습니다.클래스는 유용한 구조적 추상화를 제공합니다.계속 자신만의 방식으로 새로운 버전을 만들어내는 framework(emberjs, reactjs etc) 대신 class를 사용하여 개발자에게 일관적인 방법을 제공합니다.객체 지향 개발자는 이미 클래스를 이해합니다.마지막으로 이제 JavaScript 개발자가 Class를 가질 수 있습니다 . 여기에 Point라는 기본 클래스가 있습니다.class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = ..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 현재로부터 미래의 자바스크립트Typescript의 주요 판매 전략은 현재 자바스크립트(ES3, ES5)로부터 ES6까지 지원해준다는 것 입니다. 이제부터는 Typescript에서 제공하는 유용한 기능과 TypeScript에서 이러한 기능이 구현되는 방법에 대해 자세히 설명합니다.참고 : 이러한 기능 중 일부는 JavaScript에 즉시 추가 할 수있는 것은 아니지만 코드 구성 및 유지 관리에 유용합니다. 또한 결국 프로젝트의 대부분을 사용하게 될지라도 프로젝트에 이해가되지 않는 구조는 무시해도된다는 점에 유의하세요. 미래의 자바스크립트는 어떤 것이 있는지 다뤄본 후 본격적으로 Typescript Deep Dive를 시작하도록 하겠습니다. 다음의 순..

cc.Class로 class 정의하기Cocos Creator에서는 Class를 만들 수 있는 cc.Class라는 유용한 API를 제공하고 있습니다. CCClass 정의하기cc.Class를 생성할 때 인자로 prototype 객체 (key-value로 필요한 파라미터들이 지정된)를 넘김으로서 class를 만들어냅니다.var Sprite = cc.Class({ name: "sprite" });위 코드는 class를 만들어서 Sprite 변수에 넣고 있습니다. 게다가 클래스 이름을 "sprite"로 지정까지 했죠. Class Name은 일반적으로 생략될 수 있습니다. (직렬화 (serialization)에 사용됩니다.) 초기화 (Instantiation)위에서 정의한 Sprite 변수는 Javascript c..

생명주기 Life cycle callback코코스 크리에어터는 component 스크립트를 위한 life cycle 콜백함수를 제공합니다. 유저가 아래 명시된 콜백함수를 정의만 해놓으면 수동적으로 호출할 필요없이 생명주기에 따라 자동으로 호출됩니다.현재, Creator에서 지원하는 생명주기 콜백함수:onLoadstartupdatelateUpdateonDestroyonEnableonDisableonLoadcomponent script가 초기화 되는 단계에서, creator는 onLoad 콜백을 실행합니다. onLoad 콜백은 component가 처음 실행될 때 트리거 되죠. (Scene이 로드되거나, node가 실행되었을 때) onLoad 단계는 scene에 있는 다른 노드나 노드에 관련된 resource..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 좋은 구조는 그 코드를 다시 배우거나, 유지하거나, 테스팅하거나, 고치거나, 확장하는 비용을 줄여준다.신입 개발자로 일한지 어언 1년이 되었지만 완벽한 객체지향을 구현해본 기억이 별로 없기 때문에 (바빠서라는 핑계도 있지만) 개발 도중 내가 좋은 객체지향 코드를 짜고 있는지 돌이켜보기 위해 이 글을 쓴다. 1. 전능한 클래스를 피하라, 의미있는 이름을 사용해라.2. 업데이트 중 전능한 클래스를 피하라, 의미있는 이름을 사용해라. 개발을 시작할 때 어떤 일들이 있는지 정하고 그 일을 할 수 있는 클래스들을 만든다. 그리고 그 클래스들이 무슨 일을 하는지 이름을 붙여준다. 그런데 이 클래스가 너무 많은 일을 하면 어떻게 이름이 붙게 될까? 아마도..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. Animation Clips, Animation Component 만들기1. Animation에 대하여2. Animation Clips3. Animation Curve4. Sprite Animation5. Time Curves6. Animation Events7. Scripting Animations Animation component 만들기우리는 각 노드마다 다른 컴포넌트를 붙일 수 있죠. (모르신다면 댓글에 달아주세요) 우리가 애니메이션이 필요한 노드가 있다면 무엇을 해야할까요? 바로 노드에 Animation Component를 다는 것입니다. 다음 2가지 방법으로 만들 수 있습니다.원하는 노드를 선택하거나 생성하세요. 노드의 Add compo..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 화려한 이펙트, 걷는 움직임, 배경의 변화 등 게임 개발에 애니메이션은 필수불가결합니다. Cocos Creator에서는 어떻게 Animation Clip을 만들고 Animation을 동작시키는지 배워보겠습니다. 1. Animation에 대하여2. Animation Clips3. Animation Curve4. Sprite Animation5. Time Curves6. Animation Events7. Scripting Animations Animation에 대하여 - Animation ComponentCocos Creator의 Animation도 예외없이 Node안에 들어가는 컴포넌트 입니다. - Animation Clip 이건 그냥 anim..

RichText component reference RichText component는 string을 다양한 스타일로 표현할 수 있게 해줍니다. 약간의 BBCode를 통해서 텍스트를 커스터마이징 할 수 있죠. Creator에서 제공하고 있는 태그는 다음과 같습니다. (color, size, outline, b, i, u, br, img) 기존 Label 컴포넌트로는 할 수 없었던 텍스트에 테두리(outline)을 만드는 것을 예제로 해보겠습니다. 1. Hierarchy 탭에 Create Empty Node를 만듭니다. 2. Add Componet - Add Renderer Component - RichText 3. 생성된 RichText의 String 프로퍼티에 BBCode를 넣어줍니다. 사용 예시는 아..