풀스택 개발자를 위한 MEAN 스택 (mongoDB, express, angularJS, nodeJS) 풀스택 개발자가로 가장 손쉽게 단일 어플리케이션을 구현하는 방법이 바로 MEAN 스택을 이용하는 것입니다. MEAN 스택은 mongoDB, express, AngularJS, nodeJS의 묶음을 말합니다. 이를 사용하면, 복잡한 어플리케이션을 자바스크립트 한 언어로 개발이 가능합니다. 비동기 기반의 개발 스택이며 OS상관없이 구동이 가능합니다. 특히, JSON 객체를 DB, 서버, 클라이언트에서 동일하게 사용이 가능합니다. 이번 포스팅을 통해 좀 더 자세히 알아보도록 하겠습니다. 1. 몽고DB(mongoDB)몽고DB는 JSON 문서 기반의 NoSQL 데이터 베이스 입며, 스키마가 없는 JSON형태로 저장.......

자바스크립트(JavaScript) ES6 환경설정 ES6 환경구축2015년을 기준으로 자바스크립트의 현 상태는 브라우저 대상으로 Edge(72%), FireFox(68%), 서버는 io.js(43%), Node(23%), 컴파일러는 Babel(76%), Traceur(60%)의 점유율을 보여주고 있습니다. 우선 에디터 사용시 웹스톰에서 환경설정으로 들어가서 자바스크립트 언어&프레임워크에서 ECMAScript6를 선택하시면 됩니다. 컴파일러 선택은 Babel과 Traceur이 있습니다. Traceur는 구글에서 제공하며 CDN을 통해서도 사용할 수 있습니다. Traceur는 런타임이 요구되지만, Babel은 옵션인 폴리필(polyfills)이 있습니다. 폴리필이란 크로스브라우징을 위해 모든 브라우저를 동일한 환경에.......

Angular 2를 이용한 Todo 리스트 제작(포스팅 참고 사이트: http://blog.scottlogic.com/2015/12/07/angular-2.html)"Building a Todo List Application with Angular 2,.0" by Collin Eberhardt 이 포스팅은 잘 알려진 TodoMVC project의 소스를 기반으로 제작되었습니다. 특별히, 이번 포스팅에 사용된 예제는 깃허브를 통해 다운받을 수 있습니다. 깃허브에서 관련 자료를 다운 받으셨다면 프로젝트를 실행하도록 하겠습니다. 이 프로젝트 안에는 Angular 2 seed project가 담겨 있습니다. 이 프로젝트를 통하여 기존 타입스크립트로 작성된 파일들을 자바스크립트로 변환하여 사용할 수 있습니다. 실행방법은 깃허브에 자세히 설명되어 있습.......

타입스크립트 (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를 통한 데이터 바인딩 방법은 아래와 같.......