타입스크립트의 모듈 시스템 이해하기모듈의 기본 개념과 중요성모듈은 독립적인 기능 단위로, 코드를 체계적으로 구성하는 핵심 요소입니다. 모듈 시스템을 사용함으로써 얻을 수 있는 주요 이점들은 다음과 같습니다:유지 보수성 향상코드 중복을 최소화하여 버그 발생 가능성 감소기능별로 분리된 코드로 수정이 용이전역 스코프 오염 방지각 파일이 독립적인 스코프를 가짐변수명 충돌 문제 해결재사용성 증가모듈을 여러 프로젝트에서 재사용 가능코드의 재사용성과 이식성 향상TypeScript의 두 가지 모듈 시스템1. 외부 모듈 (External Modules)ES6의 모듈 시스템을 기반으로 하며, import와 export 키워드를 사용합니다.// math.tsexport function add(x: number, y: num..

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..

화면 영역에서 클릭한 영역마다 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/ Fullcalendarhttps://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| ...||-..

얼마전에 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]+)/)..

Typescript 는 기본적으로 파일안에 범위안에 선언되어 있지 않은 함수나 변수들에 대해서 컴파일 오류를 발생하게된다. 브라우저관련으로 자바스크립트로 프로그래밍을 하다보면 간혹 전역으로 변수 혹은 함수를 공유할 경우가 생기는데기존 자바스크립트는 window 객체에 추가혹은 전역 범위에 함수나 혹은 변수를 추가하면 내부적으로 자동으로 window객체에 추가되어전역적으로 사용가능했으나 Typescript에서는 되지않았다. interface Window { MyNamespace: any; }window.MyNamespace = window.MyNamespace || {}; 참고:http://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-..

기존 JavaScript 코드베이스를 TypeScript로 통합하기기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.TypeScript 설정 추가tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.{ "compilerOptions": { "allowJs": true, // JavaScript 파일을 포함 "checkJs": false // JavaScript 파일의 타입 검사 비활성화 }}주요 효과allowJs: TypeScript 프로젝..