타입스크립트 (TypeScript) 기초강좌 소개TypeScript는 자바스크립트를 개발자가 원하는 방향으로 사용할 수 있게 도와줍니다. 타입스크립트는 자바스크립트 슈퍼셋 언어입니다. 어떠한 브라우저, 호스트, OS, 오픈소스에서도 사용이 가능합니다. 몇가지 특징에 대해 알아보도록 하겠습니다. 1) Node.js 패키지를 통하여 타입스크립트 컴파일러를 설치할 수 있습니다. 2) 비쥬얼 스튜디오 2013을 비롯하여, 웹스톰, 아톰, 서브라임 텍스트, 이클립스등에서 에디터가 가능합니다. 3) 깃허브에서 개발되고 있는 오픈소스입니다. 시작하기타입스크립트를 설치하기 위해서는 두 가지 방법이 있습니다. NPM(Node.js package manager)를 사용. 또는, 비.......

자바스크립트 프레임워크_Angular 2 in Plain JavaScript(포스팅 내용은 Dave Ceddia의 포스팅과 Angular 2 공식사이트의 내용을 참조하였습니다.) Angular 1을 배우기 위해서 개발자들은 많은 시간을 쏟아 부었습니다. (Controllers, services, directives, filters) 그리고 마침내 모든것을 이해하기 시작하였습니다. 하지만 이제 Angular 2가 나왔으며, 많은 사람들이 "Angular 2는 완전히 다른 언어라고" 말을 하였습니다. 많은 것들이 사라지고 새롭게 추가되었습니다. 즉, Angular 2를 공부한다는 것은 Angular 1을 다시 공부하는 거와 같아 보입니다. 하지만, 너무 걱정 하지 마세요. 이번 포스팅에서는 plain old 자바스크립트로 "hello .......

자바스크립트 프레임워크_AngularJS 기본개념 강좌 Angular 1 이번 앵귤러JS 포스팅은 기본개념에 대한 설명을 위주로 작성하려고 합니다. 내용 출처는 기본적으로 w3schools의 튜토리얼 내용을 기반으로 하였습니다. 우선, ng-directives에 대해 알아보도록 하겠습니다. angularJS는 지시자를 통해 데이터와 HTML이 서로 상호연결되어 있습니다. 이를 도와주는 것이 바로 프리픽스 ng를 시작으로 한 ng-app, ng-model, ng-bind 등이 있습니다. ng-app은 앵귤러JS 어플리케이션을 명시하고, ng-model은 input, select, textarea의 뷰와 데이터를 연결합니다. ng-bind는 expression인 {{}}와 같은 기능으로 데이터와 HTML 뷰를 연결합니다. 아래는.......

자바스크립트 강좌_use strict 모드 Strict 모드 (자바스크립트)strict모드는 코드에 더 나은 오류 검사를 적용하는 방법 입니다. strict 모드를 사용하면, 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 객체에 속성을 추가 할 수 없습니다. 이 모드는 IE10이전의 버전에서는 지원되지 않습니다 (파이어폭스 4, 크롬 13, 사파리 5.1, 오페라 12). 함수 밖에 선언할 경우 모든것에 적용되며 함수 내부에 선언시 함수에만 적용됩니다. (출처: MSDN) 자바스크립트 1.8.5 (ECMAScript 버전 5)에 처음 소개되었습니다. strict모드의 주된 목적은 옛날 버전에서 잘못 사용되었던 오류를 바로잡아 코드의 성능.......

자바스크립트 데이터 바인딩_Data Binding 웹페이지에서 최신 정보를 실시간으로 업데이트 하는 것은 매우 중요합니다. 프론트엔드 개발에서도 마크업으로 만들어 놓은 HTML 구조에 데이터를 바인딩 시켜 실시간으로 전송을 합니다. Ajax를 통해 불러온 데이터를 각각의 리스트에 뿌려주는 방법과 이를 자바스크립트를 이용하여 손쉽게 구현한 것이 Ember.js, AngularJS, 그리고 KnockoutJS 와 같은 프레임워크입니다. 일반적으로 데이터 관찰이란 뜻은 다음과 같습니다.-자바스크립트 객체 전환-프로퍼티값의 추가, 전환, 삭제-배열안에서 유입 유출되는 요소들-객체의 프로토타입 전환 예로, AngularJS를 통한 데이터 바인딩 방법은 아래와 같.......

자바스크립트 강좌_ MVC 패턴 MVC 패턴의 간단한 정의에 대해 알아보도록 하겠습니다. 일반적으로, Model은 어플리케이션 데이타 저장 모델입니다. View는 Model을 적합한 프레젠테이션으로 랜더링합니다. Controller는 Model을 업데이트 합니다. 좀 더 자세히 알아보도록 하겠습니다. 다음 내용은 블로그 coderifleman을 참고하였습니다. 모델모델은 도메인 레이어의 또 다른 이름입니다. 도메인 로직은 천연 데이터에 의미를 부여합니다. (e.g., 사용자 생일, 합계, 새금, 배송비 계산 등) 이러한 모델은 사용자 인터페이스(컨트롤러, 뷰)와 관계를 맺지 않습니다. 데이터가 변경되면 자신의 상태가 변경되었음을 옵저버로 통지하고 뷰는 모델.......

자바스크립트_JSON 파일 불러오기 JSON (JavaScript Object Notation) 파일의 정보를 가져오기 위해서제이쿼리의 $.getJSON() 메소드를 사용할 수 있습니다. 하지만 이번 포스팅에서는 순수 자바스크립트 코드로 JSON의 데이터를 객체로 담아보도록 하겠습니다.우선 기본적으로 콜백함수를 기반으로한 2가지 함수가 필요합니다. function init() {loadJSON(function(response) {var actual_JSON = JSON.parse(response);});} function loadJSON(callback) { var xobj = new XMLHttpRequest();xobj.overrideMimeType("application/json");xobj.open('GET', 'data.json', true);xobj.onreadystatechange = function () {if (xobj.readyState == 4 &.......

프론트엔드 웹개발자 도구_걸프(Gulp) 프론트 웹 개발을 하면서 필요한 개발도구를 정리하였습니다.출처는 슬라이드쇼 입니다. -의존성 관리를 위한 도구-웹서버 실행-코드품질관리-전처리보어 : http://bower.io/브라우저파이 :http://browserify.org/ 그런트JS : http://gruntjs.com/걸프JS : http://gulpjs.com/ JS힌트 : http://jshint.com/플로우타입 : http://flowtype.org/리세스 : http://twitter.github.io/recess/ 사스 : http://sass-lang.com/레스 :http://lesscss.org/ 다음은 그런트를 대신할 걸프(Gulp)에 대해 간단히 알아보도록 하겠습니다.우선 그런트와 비교해 걸프의 가장 큰 장점은 속도입니다.이러한 속도향상이 돋보이는.......