전체 글 312

▶[Angular Guide] 2. Architecture - (1) modules

▶[Angular Guide] 2. Architecture - (1) modules이 문서는 Angular.io에서 제공하는 DOC중, Guide - Architecture 부분에 대해 차근차근 정리하며 이해하고자 작성하였습니다. 글의 내용중 정확하지 않은 표현이나, 오류가 있다면, 댓글 또는 방명록을 통해 의견을 남겨주세요. MoudulesAngularApplication은 modular이며, 이 Angular는 자체적으로 NgModules 또는 Angular Module이라는 이름의 모듈시스템(Module System)을 가지고있다. 모듈(Module)의 사전적 정의 하나로 일괄되어 다른 프로그램으로도 재이용(reusable)할 수 있는 형으로 되어있는 것을 말하며, 복수의 모듈을 취급하기 쉽도록 하..

AngularJS/AngularJS 2016.09.20

▶[Angular Guide] 4. User Input

▶[Angular Guide] 4. User Input 우리는 사용자들이 링크를 클릭 하거나, 버튼을 누를때, 또는 텍스트를 입력할 때. 이 것에 대해 알고싶다. 이러한 사용자의 작업은 모두 DOM 이벤트를 발생시킨다. 이번 챕터에서는 Angular의 이벤트 바인딩 구문을 사용하여 해당 이벤트에 바인딩하는 방법에 대해 정리하고자한다. [Angular2 Basic - User Input LIVE EXAMPLE] User input event에 바인딩하기 Binding to user input events우리는 종류에 관계없이, 모든 DOM event에 대한 응답을 위해 Angular의 event binding을 사용할 수 있다. 구문(Syntax)은 간단하다. - 괄호안에 DOM 이벤트를 감싸 넣고, 인용..

AngularJS/AngularJS 2016.09.16

▶ Angular2 기본개념 : EventEmitter를 활용한 버튼토글이벤트(Button Toggle Event) 예제

EventEmitter의 기본개념 및 간단예제이번 글에서는 Angular2의 기본 개념중, 'EventEmitter'에 대해서 간단히 정리해보고자한다. EventEmitter의 기본개념EventEmitter 는 Angular2에서 directives와 custom event를 emit하는 component에서 사용된다. 여기서 emit이라는 단어의 사전적정의를 살펴보면 '발산, 방출하다.'이다. 이를 '호출하다'라고 이해하면 혼란스럽기 때문에, 이벤트 호출과는 다른 개념이라는 것을 먼저 알아두면 좋다. Class OverView EventEmitter의 기본적인 구성은 다음과 같다. class EventEmitter { constructor(isAsync?: boolean) emit(value?: T) ..

AngularJS/AngularJS 2016.09.10

▶ [Angular2 Tutorial] 4. Multiple Component

▶ [Angular2 Tutorial] 4. Multiple Component이 글에서는 angular2 공식페이지의 튜토리얼 중 Multiple Components 에 대한 내용을 정리해보려고한다. 이것은 앞서 정리했던 튜토리얼 3 - Master/detail 에 이어서 진행된다. 이 글의 작업 환경 및 이전까지의 코드에 대한 설명이 궁금하다면, AngularJS2 - Tutorial 페이지를 참고하는 것을 추천한다. (튜토리얼3. Master/Detail에 이어) 우리의 app은 발전하고 있다. 본격적으로 내용을 살피기에앞서 다음과 같은 디렉토리 구조를 확인하고, 지금현재 이와 다른 경우라면 이전 글에서 예시내용과 다른 부분에 대해서 다시 탐색해보도록한다. [ 사진 : angular2 공식홈페이지, ..

AngularJS/AngularJS 2016.09.10

▶ICT노트 :: 맥북과 모니터를 연결하는 HDMI 어댑터의 세계

▶ICT노트 :: 맥북과 모니터를 연결하는 HDMI 어댑터의 세계왠만큼 컴퓨터에 관심을 갖지 않고서는 이런 HDMI, VGA, DVI등과같은 용어에 부딪히면, 멘붕의 나락에빠져 구글에서 넋이나간채 헤매게 된다. 따라서 이 글에서는 맥북프로와 모니터를 연결할 때 사용되는 HDMI 관련내용을 정리해보려고한다. 하고싶은 것 : 맥북과 모니터를 연결해서 듀얼모니터를 사용하고 싶다.처음 생각한 방법은 맥북과 모니터를 HDMI로 연결하는 것. 노트북 또는 데스크탑 PC과 모니터를 연결해본 경험이 있는 사람이라면 가장 기본적으로 HDMI를 떠올릴 것이다. 나 역시도 그랬고, 아주 단순한 생각으로 접근했다. 1. 맥북에 HDMI 단자가 있는지 확인 2. 모니터에 HDMI 단자가 있는지 확인 3. HDMI 케이블 구입 ..

아카이브/ICT 2016.09.08

Javascript ▶ Gulp 설치하기

Javascript ▶ Gulp 설치하기이번 글에서는 (대부분의 경우 아주 간단하지만), 경우에 따라서는 엄청 애를 먹는ㅜㅜ 이 'Gulp'를 설치하는 방법에 대해 정리해보려고 한다. 1. install gulp globally만약 이전에 gulp를 global로 설치한 적이 있다면, 다음 코드로 삭제 후 진행한다. 이는 오래된 버전과 충돌하는 것을 막기 위함이다. npm rm --global gulp 2. 프로젝트 경로로 초기화 npm init 3. gulp를 설치한다 : in your project devDependency npm install --save-dev gulp 4. gulpflle.js를 프로젝트의 root 단계에 생성한다. var gulp = require('gulp'); gulp.ta..

WEB/Java Script 2016.08.07

▶angualrJS - ngFor 개념 뽀개기

▶angualrJS - ngFor 개념 뽀개기 이번에 살펴보려고하는 것은 angualr의 ngFor 개념이다. 대충이해하고서쓰려니 잘 안되기도하고, 금새까먹는다. *이 글은 기본적인 내용으로 시작해서 조금씩 더 내용을 추가하는 방식으로 만들어집니다. 많이 도와주세요 :) app.coponent.ts의 component부분의 코드이다. @Component({ selector: 'my-app', template: ` {{title}} Member {{hero}} ` }) 위 코드에서 주의깊게 볼 것은 'template'내의 태그 속 *ngfor영역이다. 이는 다양하게 쓸 수 있다. @Component({ selector: 'my-app', template: ` {{title}} Member {{hero}} ..

AngularJS/AngularJS 2016.07.26

▶ AngularJS 2.0 :: 처음부터 시작하기 :: 1. 전체적인 구조 및 개념

▶ AngularJS 2.0 :: 처음부터 시작하기 :: 1. 전체적인 구조 및 개념이 글에서는 AngularJS 2.0에 대한 개념에 대하여, 부족하지만 하나하나 세부적으로 살펴보려고한다. 이 글은 다음과 같이 구성되어 있다. AngularJS 2.0 전체적인 기술 개념 1. AngularJS란 무엇인가 2. 왜 AngularJS 인가 3. 왜 AngularJS 2 인가 4. AngularJS 2의 구조 4-2. (1) Component의 사전적 정의 4-2. (2) Angular JS 에서의 Component란? 1. AngularJS란 무엇인가서점에 책도 깔리고, 여기저기서 AngularJS 개발자를 찾는다. 도대체 AngularJS가 뭘까. - 기본적으로 AngularJS 2 는 자바스크립트 Fr..

AngularJS/AngularJS 2016.07.18

▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 2. bezierPoint()

▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 2. bezierPoint() 이번 글 역시 지난 글에이어 베지어 곡선에 대한 내용을 정리해 볼 것이다. 지난 글에서 Bezier 곡선에 대한 기본적인 내용 및 p5.js에서의 베지어 관련 기본함수인 bezier()에 대한 내용을 정리했고, 이번 글에서는 bezierPoint()에 대한 내용을 다룰 것이다. 지난글 ▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 - 1. 기본내용 및 bezier() 이해 bezierPoint() 함수 지난 시간과 동일하게, 우선 최소한의 예제코드와 - 그를 통해 구현되는 형태를 나란히 놓고 살펴보자. See the Pen p5.js bezierPoint() - examp..

시각화/p5.js 2016.07.13

▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기

▶ [p5.js] 기초 :: 베지어(Bezier) 활용하기 - 1. 기본 개념 및 bezier()함수 이번 글에서는 P5.js 에서 Bezier Curve 를 활용하는 방법에 대해 정리해 보려고 한다. 시작 이 '베지어'라는 개념은 (나를 포함하여) 꽤- 많은 사람들을 긴장하게 만드는, 뭔가 묘한 매력이 있다. 잘 사용하면 그만큼 아름다운 무언가를 만들어 낼 수 있지만, 그 '잘 사용한다'라는 개념까지 이르기가 너무 어렵다. 즉, 진입장벽이 꽤 높다는 말이다. 미리 말하지만, 이 글에서 진입장벽의 높이를 보일 생각은 없다. 나도 알아가는 사람 중 한 명이기 때문이다. 글 도입부에 이렇게 '베지어 곡선'의 위대한 진입장벽에 대해 이야기하는 이유는 간단하다. '조금 어려운 단어와 개념들이 등장하더라도 당황하..

시각화/p5.js 2016.07.13