Tech/TypeScript2012. 10. 8. 18:54

Untitled.jpg


공식사이트 http://www.typescriptlang.org/


TypeScript를 소개합니다. TypeScript는 JavaScript 개발을 위한 언어로, Ruby에 익숙한 분들이 CoffeeScript를 사용하듯, JAVA나 C#에 익숙한 사람들이 사용하기에 익숙하도록 만들어진 언어가 TypeScript 같습니다.


1.jpg 


명령줄에 Node.js 패키지 매니저로 TypeScript 컴파일러를 설치할 수 있습니다.


2.jpg 


VS2012에 TypeScript 편집기 플럭그인을 설치할 수 있습니다.


3.jpg 


TypeScript는 CodePlex에서 개발하고 있습니다. TypeScript 컴파일러는 TypeScript로 구현되었으며, 모든 자바스크립트 호스트에서 사용할 수 있습니다. (* CodePlex 주소는 여기)



확장성
클래스, 모듈, 인터페이스들을 사용할 수 있도록 기능을 제공합니다.


자바스크립트로 시작해서 자바스크립트로 끝난다.
기존의 자바스크립트 코드를 사용할 수 있으며, 유명한 자바스크립트 라이브러리들을 내포하고 있습니다.
다른 자바스크립트 코드에서 호출하여 사용할 수 있습니다.

대규모의 응용프로그램을 위한 강력한 도구
유형(Type)은 TypeScript 개발자가 높은 생산성의 개발 도구와 방법을 사용할 수 있도록 합니다.



**TypeScript에 대한 자세한 문서는 여기**

Introduction
전자 메일, 지도, 문서 편집 및 협업 도구와 같은 웹 응용 프로그램들이 점점 일상 컴퓨터 사용의 중요한 부분이 되어가고 있습니다. 우리는 이러한 웹 응용프로그램과 같은 대형 자바스크립트 프로그램을 구축하고 유지하는 자바스크립트 프로그래밍 팀의 요구를 충족하기 위해 TypeScript를 설계하게 되었습니다. TypeScript는 프로그래밍 팀이 소프트웨어 구성 요소 사이의 인터페이스를 정의하고 기존의 자바스크립트 라이브러리의 동작을 파악하는데 도움이 됩니다. 또한 TypeScript는 자신의 코드를 동적으로 로딩 가능한 모듈로 구성함으로써, 네이밍 충돌을 줄일 수 있습니다. TypeScript의 type 시스템은 자바스크립트 개발자가 높은 생산성의 개발 도구와 방법들을 사용할 수 있도록 해줍니다. (정적 타입 검사, 심볼 기반의 네비게이션, 구문 완성, 코드 리팩토링)



**TypeScript 튜토리얼은 여기**

튜토리얼의 내용을 봤을 때, 눈에 띄는 사용법은
아래처럼 모듈의 파라미터에 type을 정의할 수 있다는 점과,

function greeter(person: string) {
    return "Hello, " + person;
}



클래스와 인터페이스 정의가 가능하다는 점입니다.

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);



그리고, VisualStudio 2012에서 TypeScript를 편집하는 경우, VisualStudio 에서 제공되는 편의기능들을 그대로 사용할 수 있습니다. (참조 검색이나 코드 리팩토링 등) 

Visual Studio picture


OOP 방식으로 자바스크립트 개발한다고 Base 라이브러리를 사용하거나 했었는데, TypeScript를 쓰면 원하던 OOP 개발을 더 편하게 할 수 있을 것 같네요. 상속이 지원되는지라거나 상세한 내용은 문서를 더 읽어보고 써봐야 알 것 같네요.

Posted by 알 수 없는 사용자
Tech/HTML52012. 6. 4. 15:14


Webkit Keyframes Animation 실컷 구현해놓고, 안드로이드에서 돌렸을 때,

심장이 철렁한 경험을 했었는데요;

Keyframe Animation에 translate과 scale 속성이 변경되도록 해두었는데, translate만 동작하더라고요.

지금 생각해도 벌렁벌렁한 일이었네요. 아이폰에서만 확인했다가 =ㅅ=) 예상치 못한 난관을 맞닥뜨렸을 때의 심정이란...


WebkitTransition은 동작하기 때문에 구현 방식을 변경해야하는 고민이 있었습니다만...

저를 구원하는 사이트를 찾을 수 있었습니다.


http://blog.webcreativepark.net/2012/02/12-141313.html


위의 사이트에 한 일본 개발자 분께서 친절하게 안드로이드에서 Webkit Keyframes Animation을 적용하는 방법을 상세히 적어주셨습니다. 안드로이드에서도 Scale Aniamtion이 된다는 사실을 알게 된 저는 굉장히 기뻐했었는데요. (부끄부끄) 샘플 코드를 분석해서 문제를 찾을 수 있었습니다.

구현한 내용에는 문제가 없었습니다. css 에 적은 한 줄을 제거해야하더군요.


'-webkit-backface-visibility: hidden;'

'backface-visibility: hidden;'


backface-visibility 속성을 설정해 둔 한 줄을 제거하니 Scale Animation이 동작합니다. (감동)


혹여, 저처럼 안드로이드에서 scale 애니메이션이 동작하지 않아서 당황스러운 분들이 있을까 공유합니다...

(너밖에 없어 퍽!)

Posted by 알 수 없는 사용자