시각화를 배우고 정리합니다

NPM : package.json 파일 생성하기 package.json 파일을 만드는 방법은 간단하다. 터미널에 npm init을 입력하면된다. npm init 그러면 npm은 몇가지 이에대한 질문은 하게되어있다. 영어 질문은 언제나 당황스럽기마련이다. 다행스럽게도 기본 답변이 함께 제공된다. 특별한 내용이 없다면, 엔터키를 누름으로써 각 질문에 대한 답을 해나갈 수 있다. npm init을 실행하면 위 사진과같은 형태로 몇가지 질문이 나온다. (여기서 name이 'eg1'이라고 나온 이유는, npm init을 실행한 현재 폴더이름이 eg1이기 때문이다. 어느폴더에서 실행하는지에 따라 이름은 달라진다.) name : 이 프로젝트의 이름version : 현재 생성하는 npm 파일의 버전. 이전에 따로 배포..

간단 상식 : Terminal 에서 vscode 실행하기"어떻게 하는거지??" 하면서 늘 그냥 지나갔던 부분인데, 너무~ 간단해서 공유해 두려고 한다. 이 글의 정보는 [Running VS Code on Mac] 글에서 얻었다. 방법은 간단하다! 터미널에서 작업 중 특정 위치에서 VS Code 를 열고 싶다면, code . 를 입력하면 된다. code 만 입력하면 그냥 VS Code 프로그램이 실행된다(경로 상관없이). 나도 이런 것들을 옆에서 하는 걸 보고 해봤었는데 안됐다. 이런 메시지를 돌려주면서 말이다. command not found: code 이런 상황이라면 이렇게 하면 된다. 1. VS Code 를 실행한다.2. 명령팔레트를 실행한다.3. Shell Command 입력 후 실행한다. 아마 이..

RxJS - Subject 사용하기 이 글은 xgrommx.github.io의 글을 학습하며 정리한 글입니다. 내용에 문제가 있거나 개선가능한 부분이 있다면 언제든지 연락주세요. Subject class 는 Observable과 Observer를 모두 상속받는다. 즉, Observable이면서 Observer 라는 말이다.Observable에 여러 operator가 있는 것 처럼, Subject에도 여러 operator가 있다. (map, filter, reduce 등).우리는 Subject를 사용하여 모든 observer를 subscribe 할 수 있고, 그 다음 subscribe를 backend data source에 subject할 수 있다. 이러한 방식으로, Subject는 subscriber g..

[Angular2 notebook] property binding이 문서는 ng2에 대한 내용을 다루고 있지만, 전체적으로 디테일하게 다룬다기보다는, ng2의 개념들을 이해해나가면서 조각조각 관련 개념들을 정리하는 데 목적을 둡니다. 따라서, 이 카테고리의 글들은 전체적으로 완결적이지 않을 수 있고, 글의 순서에따라 내용이 이어지지 않을 수 있음을 먼저 알려드립니다. 여기서 다룰 내용은 angular.io(공식홈페이지)의 tutorial에 등작하는 property binding에 대한 내용이다. 개괄적인 내용 여기서는 heroes라는 array안에 들어있는 hero객체를 *ngFor 라는 ng2의 template syntax를 활용해리스트를 만든다.만들어진 요소들을 사용자가 마우스로 클릭하면, 클릭한 요..

▶[Makers] Open Street Map 그리기요즘 틈틈히 시간을 내어 OSM(Open Street Map)을 그리고 있다. 예전에 베를린에 갔을 때 외국인 친구가 '너네 나라보다 북한이 더 그려진게 많다'라는 이야기를 듣고 진짜 깜짝놀랐었다. (실제로 그렇다.) 우리나라에도 오픈스트리트맵퍼가 있어서, 종로나 강남쪽은 꽤 건물들의 형태가 보이긴한다. 아래 사진은 서촌 지역의 모습인데, 꽤 많은 건물들이 지도에 그려져있는 것을 확인할 수 있다. 사실 우리는 네이버, 다음, 구글 지도를 평소에 봤기때문에 위 사진 속 서촌 지역 처럼 빼곡히 건물이 그려진 것이 오히려 자연스럽게 느껴지고 그 외지역은 뭔가 텅텅 비어있는 느낌이 들 정도다. 그러나 사실 솔직히 말하자면, 이 영역의 지도 역시 뭔가 어떤 서비..

▶ [Angular2 Tutorial] 5. Service이번 글에서는 Angular.io 에서 제공하는 TUTORIAL 중 다섯 번째인 'Service'에 대한 내용을 정리해보고자 한다. Service여러 Component는 hero 데이터에 대한 Access를 필요로 한다. 그러나, 우리는 계속 같은 코드를 복사&붙여넣기를 하고 싶지 않다. 같은 코드를 복붙하는 대신에, 우리는 하나의 재사용가능한 Data Service 를 생성하고, 필요한 구성에 맞게 주입(Inject)하는 방법에 대해 이해할 필요가 있다. Refactoring Data Access는 서비스를 분리 유지하여 component가 view를 supporting 하는 데 초점을 맞출 수 있도록 했다. 이것은 또한 component와 mo..

▶[Angular2 COOKBOOK] @Injectable이번 글에서는 Angular를 하다보면 쉽게 마주치게되는 @Injectable 이라는 Decorator에 대해서 입문자의 관점에서 정리해보고자한다. @Injectable 이란? Angular에는 여러가지 Decorator가 있다.(@Component, @Input ...등등등.) @Injectable도 이 중 하나이다. 그런데 개인적으로는 (왜인지는 모르겠지만) 이 @Injectable 이라는 Decorator가 다른 Decorator보다 더 뭔가 두려운(?)느낌이든다. 발음도 뭔가 "인젝ㅌ..." 그래서 Angular API 에서 @Injectable를 쳤더니, 이것에 대한 친절한 한국어 Document가 나왔다!!! 라고 말하고 싶지만, Dep..

▶[Angular Guide] 2. Architecture - (3) Template우리는 template 를 활용하여 Component의 view를 정의할 수 있다. template 는 우리가 알고있는 HTML의 형태와 같고, Angular에게 어떻게 component를 렌더링할 지에 대해 알려주는 역할을 한다. Template는 기본적으로 HTML 처럼 보인다. 물론 맞다. 그런데 몇가지 다른점이 있다. 다음 코드를 살펴보자. app/hero-list.component.html Hero List Pick a hero from the list {{hero.name}} 비록 이 template 가 전형적인 HTML 요소를 사용하고 있지만, (예를들어 나 등) 이 외에 약간 다른부분을 어렵지 않게 찾을 수..

▶[Angular Guide] 2. Architecture - (2) Component 이 글에서는 [Angular Guide] Architecture 의 여덟 항목 중 Component에 대한 내용을 정리하고자 한다. Component Component는 'view'라고 불리는 화면 중 일부분을 컨트롤하는 역할을 한다. 예를들어, 다음과 같은 view 들이 component에 의해 컨트롤되는 것들이다.The app root with the navigation links.The list of heroes.The hero editor. 사용자가 화면을 통해서 보게될 'view' 영역을 컨트롤하는 것이 Component 라고 했을때. 사실, Application에서의 Component의 기능과 역할은 아래의..

▶[Angular Guide] 2. ArchitectureAngular2는 HTML또는 Javascript, 기타 다른 언어들(Dart, TypeScript)안에서, Client Application 을 구축하기위한 framework이며, Angular2 Syntax로 작성된 것들은 Javascript로 컴파일된다. Angular2 프레임워크에는 여러 library가 포함되어있는데, 이중에는 core library도 있고, optional한 library도 있다. 결국, 우리가 Angular2로 해야할(할수 있는) 것이라면우리는 Angularized markup 규칙에 따라, HTML 템플릿을 구성함으로써, 최종적으로 Angular Application을 만들 수 있다. Component class를 작..