2018/01

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 이전 포스팅에서 다뤘던 ScrollView와 Layout을 이용해 간단한 ListView를 구현해보도록 하겠습니다. ListView는 Content에 ListItem을 넣어 스크롤링하며 볼 수 있는 기능을 제공하는 UI의 일종이라고 생각하시면 됩니다. 1. 구현하기2. Layout 사용하기 구현하기코드는 간단합니다. scrollView의 content에 자식으로 추가한 후 content의 크기를 추가된만큼 늘려주는 것이죠. view보다 content가 커지면 스크롤이 가능해지기 때문입니다.cc.Class({ extends: cc.Component, properties: { items : [], // ListItem을 관리하는 배열 scroll..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 UI를 구성하다보면 Container 기능을 하는 UI를 쓸 때가 있습니다. 예를 들어서 리스트뷰나 그리드뷰가 있겠죠. Container에 Content를 넣을 때 자동 정렬이 된다면 얼마나 편할까요? Content 별로 margin을 줄 수 있다면? 이에 대한 니즈를 Creator에서는 Layout 컴포넌트를 통해 해결해줍니다. 1. Layout Component2. Property3. 사용 예시 Layout Component Layout 컴포넌트는 Node Library 에서 Layout을 선택하거나 addComponent을 통해서 추가할 수 있습니다. Property로는 Layout Type과 Resize Mode가 있습니다.add Co..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 Cocos Creator에서의 ScrollView 사용법에 대해서 공부해보도록 하겠습니다. ScrollView ScrollView는 스크롤 기능을 가지고 있는 Container 입니다. Container는 뭔가를 담을 수 있는 용기의 뜻을 가지고 있습니다. 즉 ScrollView를 사용하면 제한된 범위에 그 범위보다 큰 컨텐츠를 담고 그것을 스크롤을 통해서 볼 수 있도록 해줍니다. 일반적으로 ScrollView는 Mask 컴포넌트와 ScrollBar 컴포넌트가 함께 사용되어집니다. 스크롤 뷰를 적용하지 않은 원본 이미지 스크롤 뷰를 적용한 이미지 스크롤 뷰 컴포넌트 ScrollView 사용법Creator에서의 ScrollView 사용법은 매우..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 AJAX에 대해서 공부하던 중 StackOverFlow AJAX의 기본을 이해하기 좋은 질문이 있어서 번역합니다. Q. 비동기식 XMLHttpRequest에서 어떻게 결과를 얻을까요? 다음과 같은 코드가 있습니다. ajax 요청에 대한 결과를 담고 result를 리턴하는데 왜 undefined가 나올까요?function foo() { var result; $.ajax({ url: '...', success: function(response) { result = response; // return response; //

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. Module _decorator 이해하기Cocos Creator는 타입스크립트 Decorator를 'cc._decorator'를 통해서 접근할 수 있습니다. Cocos Creator는 Typescript 언어를 기반으로 하고 있기 때문에, Typescript의 Decorator 작동 방식으로 이해하시면 됩니다. 즉 Decorate Func를 통해서 클래스, 메소드, 프로퍼티 그리고 파라미터를 꾸며주는 기능입니다.Methodsccclass ( [name ] )기존 ES6 Class를 CCClass를 통해서 선언할 수 있습니다. 더 자세한 사항은 Class를 봐주세요. nametypedescriptionname optionalStringThe clas..

이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 모든 데코레이터는 그냥 Function이고 그냥 Function의 이름을 가져다 불러 쓰면 됩니다. 1. Class Decorator2. MethodDecorator3. Property Decorator4. Parameter Decorator Class Decoratorfunction hello(constructorFn: Function) { console.log(constructorFn);} @helloclass Person { } 1. 딱히 클래스 인스턴스를 만들지 않아도 접근 가능하다.2. 인자로 constructor Function을 가져가는데(class Decorator의 signature이므로 무조건 넣기) Person의 const..

이 글은 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:..