ES6 module 시스템이 등장하며 Typescript Namespace 가 현격히 줄어들었지면 Typescript가  ES6 module 등장전에 어떻게 Typescript 코드 재사용을 이루었는지 이해하기 위해 알아보았다.

사용법

먼저 아래와 같은 폴더구조를 가진다고 하자. 

- base-component.ts

- input-component.ts

- utils.ts

base-component.ts 코드

namespace App {
	export abstract class Component { }
}

utils.ts 코드

namespace CommonUtils {
	export class StringUtils { }
}

위의 코드를 보면 Component 클래스는 같은 네임스페이스안에 Util 클래스는 다른 네임스페이스 안에 설정된것을 볼수 있다.

* 참고로 같은 Namespace에 선언되어있더라도 다른파일에서 사용하기 위해서는 내보내는 변수, 클래스, 함수등에 export 키워드를 붙여줘야한다

input-component.ts 코드

/// <reference path="base-component.ts" />
/// <reference path="utils.ts" />

namespace App {

   // 같은 네임스페이스내에 선언된 클래스 사용
   class InputComponent extends Component { }
   
   // 다른 내임스페이스에 선언된 클래스 사용
   CommonUtils.StringUtils.method();
}

사용법은 간단한데 /// <reference path="모듈위치.ts" />

이렇게만 하고 Typescript 기본설정으로 하면 파일들이 제각기 따로 생성되기때문에 각각의 파일들을 따로 불러오지 않는 이상 브라우저에서는 사용할수 없다. 그런 경우애 편의를 위해 한파일로 된 파일을 생성할수 있는데 tsconfig.json 에 outFile 옵션을 활성화 한다. outFile 옵션은 amd 혹은 system 모듈일 경우에만 선택가능하니 용도에 맞게 선택한다

{
    "outFile": "./dist/bundle.js",
    "module": "amd"
}

그리고 HTML 파일에서는 아래 한파일만 불러오면 된다

<script src="dist/bundle.js"></script>

Namespace 의 단점

1. 의존성들이 불러오지 않더라도 오류 메세지를 발생시키지 않고 정상적으로 Javascript 로 Transpile 하는 경우가 생긴다. 이점은 규모가 큰 프론트 엔드 프로젝트가 될수록 치명적 단점으로 작용한다. 

그렇다면 Namespace 와 Modules 중에 어떤것을 선택해서 선택해야 될까? 이점은 Typescript 팀에서 명확히 가이드 라인을 제시해주었는데 아래 공식문서에 따르면 모던 코드들에 대해 ES Module 을 사용할 것을 권장하고 있다.

It is also worth noting that, for Node.js applications, modules are the default and we recommended modules over namespaces in modern code.

ES5.1

var myobj = (function () {

    // private members

    var name = "my, oh my";

    // implement the public part

    return {

        getName: function () {

            return name;

        }

    };

}());

myobj.getName(); // "my, oh my"



메모리 아끼는법 

function Gadget() {

    // private member

    var name = 'iPod';

    // public function

    this.getName = function () {

        return name;

    };

}

Gadget.prototype = (function () {

    // private member

    var browser = "Mobile Webkit";

    // public prototype members

    return {

        getBrowser: function () {

            return browser;

        }

    };

}());

ES6 

class Gadget {

var name = 'iPod'

getName() {

return name; 

}



static getBrowser() {

  var browser = "Mobile Webkit";

  return browser;

  }

}

ES2021+

class Gadget {

  #name = 'iPod'

  getName() {

  return name; 

  }
}

참조: 

http://www.2ality.com/2016/01/private-data-classes.html

화면 영역에서 클릭한 영역마다 HTML 엘리멘트가 겹칠경우 겹치 영역에 따라 다른 이벤트를 처리하기 위해서는 이벤트 구분이 필요하다.

픽셀단위로 영역을 짜르는 경우는 해상도가 디바이스마다 다른 요즘환경에서는 사용하기 어려운 방법이기 때문에 

다른방법으로 영역을 잡는 방법이 있지 않을까 해서 자바스크립트 레퍼런스를 뒤지던중 아래와 같은 방법으로 처리하게되었다.

$("selector").click(function(evt) {
    var target = evt.originalEvent.target;
    if (target.nodeName == "CANVAS") {
        // 클릭한 영역이 캔버스일 경우 처리 
    } else if (target.nodeName == "DIV") {
        // 클릭한 영역이 DIV일 경우 처리
    }
});

기존 클릭 영역을 동적으로 계산하는 방식은 정확도가 매우 부정확했지만 이와 같은 방법으로 

다른 구준자를 넣어 동일한 엘리먼트들에 대해서도 다른 방식으로 처리하는 방식으로 응용할수 있지 않을까 생가한다 .

프로젝트를 제작하며 사용하는 유용한 자바스크립트 라이브러리 모음 (2016-11-13 업데이트) 

Tabular: 테이블 표출

- 홈페이지: http://olifolkerd.github.io/tabulator/

- 사용법:https://www.sitepoint.com/dynamic-tables-json/

Kendo UI: 종합 UI  

- 홈페이지: http://www.telerik.com/kendo-ui

Flowchart.js: Flowchart 라이브러리

http://flowchart.js.org/

Fullcalendar

https://fullcalendar.io/

Webpack 을 사용하면서 개인적으로 자주 사용하게 되는 플러그인 목록 정리

1. CommonsChunkPlugin (https://github.com/webpack/docs/wiki/optimization) 

멀티페이지 어플리케이션의 경우 공통적으로 사용 되는 모듈들을 추적하여 따로 넣는 경우

참고:

1. 웹팩 플러그인 리스트: https://github.com/webpack/docs/wiki/list-of-plugins

1. 

stylesheets/

|

|-- modules/              # Common modules

|   |-- _all.scss         # Include to get all modules

|   |-- _utility.scss     # Module name

|   |-- _colors.scss      # Etc...

|   ...

|

|-- partials/             # Partials

|   |-- _base.sass        # imports for all mixins + global project variables

|   |-- _buttons.scss     # buttons

|   |-- _figures.scss     # figures

|   |-- _grids.scss       # grids

|   |-- _typography.scss  # typography

|   |-- _reset.scss       # reset

|   ...

|

|-- vendor/               # CSS or Sass from other projects

|   |-- _colorpicker.scss

|   |-- _jquery.ui.core.scss

|   ...

|

`-- main.scss            # primary Sass file

참고:

http://thesassway.com/beginner/how-to-structure-a-sass-project

2. 

얼마전에 Typescript 2.0이 발표되었고 가장 큰 변화점이라고 하면 기존 typings 멸령어 대신에 아래와 같이 간편화가 되었다는 것이다.

이제 typings 로 하던 불편함을 npm 에서 바로 실행할수 있게되었다. 

기존이 아래와 같은 방식으로 설치했다면

typings install dt~mocha --global --save

이제 아래와 같은 식으로 설치 가능하다. 

npm install --save-dev @types/lodash

타입스크립트는 처음 설정이 까다롭지만 처음부터 타입스크립트로 개발하다보며 유지보수에 놀라운 효율을 발견하게 될것이다

전세계를 타겟팅으로 하는 프로그램을 개발하다보면 각각의 지역별로 시간차이를 이용해서 로직을 작성할때가 있습니다.

그때 기준으로 사용되는 GMT 또는 UTC 를 브라우저 상에서 구하는 방법입니다. 

GMT 와 UTC 는 정확히는 다르지만 표현하는 시간대는 같다고 보시면 됩니다. 

Browser 상에서 new Date() 를 치면 GMT를 기준으로 시간대가 표시되는데 문자를 추출할수 있습니다. 

1. GMT 오프셋 구하기 

var offset = new Date().getTimezoneOffset();
console.log(offset);

출력: -540

시간 구하기 

offset / 60 

출력: -9

2. 현재 GMT 구하기

new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1]

기존 JavaScript 코드베이스를 TypeScript로 통합하기

기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.

TypeScript 설정 추가

tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.

{
  "compilerOptions": {
    "allowJs": true,  // JavaScript 파일을 포함
    "checkJs": false  // JavaScript 파일의 타입 검사 비활성화
  }
}

주요 효과

• allowJs: TypeScript 프로젝트에 JavaScript 파일을 포함할 수 있습니다.
• checkJs: JavaScript 파일에 대해 타입 검사를 하지 않습니다.

기존 모듈의 사용

만약 a.js 파일이 아래와 같이 정의되어 있다면:

a.js

function hey() {
    console.log("hey");
}
export { hey };

이를 TypeScript에서 사용하는 방법은 다음과 같습니다.

main.ts

1. ES 모듈 방식

import * as moduleA from './a'; // 또는 명시적으로 상대 경로 작성
moduleA.hey();

2. CommonJS 스타일

const moduleA = require('./a');
moduleA.hey();

더 TypeScript스러운 방법으로 사용하기

1. .d.ts 파일로 타입 정의 추가

JavaScript 모듈의 타입을 정의하면 TypeScript 코드에서 안전하게 사용할 수 있습니다.

a.d.ts

declare module './a' {
    export function hey(): void;
}

이렇게 하면 TypeScript는 a.js를 사용할 때 타입 정보를 제공합니다.

2. 타입 정의가 포함된 라이브러리 사용

써드파티 JavaScript 라이브러리를 사용할 때는 이미 제공된 타입 정의를 활용할 수 있습니다. 타입 정의는 @types/ 패키지를 통해 설치 가능합니다.

npm install --save-dev @types/library-name

이후 TypeScript에서 바로 타입 정보를 활용할 수 있습니다.

3. ES 모듈로 변환

기존 JavaScript 코드를 TypeScript와 자연스럽게 동작하도록 리팩토링할 수도 있습니다.

기존 JavaScript (a.js)

export function hey() {
    console.log("hey");
}

TypeScript에서 사용 (main.ts)

import { hey } from './a';
hey();

추가 참고 자료

1. 공식 TypeScript 문서 - JavaScript 파일 포함하기
2. TypeScript에서 JavaScript 모듈 사용하기
3. TypeScript 공식 문서 - Declaration Files

마무리

위 방법들을 활용하면 기존 JavaScript 코드베이스를 TypeScript로 점진적으로 통합할 수 있습니다.
다음 단계로는:

1. 타입 정의를 작성하거나
2. @types 패키지를 활용해 써드파티 라이브러리를 더 TypeScript스럽게 사용할 수 있습니다.