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

▶ [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] 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 이벤트를 감싸 넣고, 인용..

자바스크립트 - 프로토타입이란?(나를 포함하는) 초급 개발자의 경우, 알아야할 것들이 한 두개가 아니다보니, 개발에 바로 쓰여야할 중요한 개념이아니고서야(사실 모르면서 개발에 써본적이 매우 있다.) 그냥 못본척 지나쳐버리는 개념들이 굉장히 많다. 나에게 이 Prototype 개념역시 그 중에 하나이다. 이전까지 대-충 알아왔지만, 한번도 깊게 기술적인 내용을 들여다 본적은 없었기에, 이번 기회를 통해 제대로 정리해보고자 이렇게 글로 정리하고있다.* 그래서, 이 글에서 살펴볼 내용 : 자바스크립트의 '프로토타입' 개념 왜 프로토타입을 알아야 할까?프로토타입 관련 개념이 자바스크립트에서 OOP를 구현하는데 있어 기본 바탕이 되기때문이다. *OOP란, object-oriented programming의 약자로..

▶자바스크립트 :: Ajax ① 개념 및 활용방향 이 글에서는 자바스크립트 라이브러리중 jQuery와 함께 가장 많이 활용되고있는 Ajax에 대해서 살펴보려고한다. 짧게 요약해보면, Ajax는 "전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법"이라고 할 수 있다. 모든 내용을 하나의 글에 담기보다는 여러 글에 나누어 정리해보려고하는데, 이번 글은 그 중 첫 번째글이며, 여기에서는 개념과 활용, 그리고 가장 기본적으로 알아야할 기능의 동작방식에 대해서 살펴볼 것이다. Ajax란 무엇인가 Ajax는 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이다. 본래 Ajax는 비동기 요청을 보내는 데 필요한 기술, 즉 Asynchoronou..

▶AdobeMuse :: 텍스트 또는 이미지가 뿌옇게 보이는 현상 이글에서 살펴보고자하는 것은, 어도비 뮤즈에서 웹사이트 제작시 이미지 또는 텍스트사용시 뚜렷하게 나타나지 않고, 흐릿하게 화면에 표시되는 문제과 이에대한 해결방법을 정리해보고자 한다. 어도비뮤즈는 어느정도 수준의 웹사이트를 쉽고, 빠르게 만들 수 있는 좋은 툴이다. 특히 기존 어도비프로그램(Photoshop, illustrator등)에 익숙한 사람이라면 빠르게 적응하여 활용할 수 있다는점이 큰 매력이라고 할 수 있다. 그러나, 어도비뮤즈가 시작된지 꽤 되었음에도(뮤즈는 11년8월에 첫 베타버전이나왔다.) 활용성은 다른 프로그램과 비교해보았을때 만족스럽지 않은 수준이다. 어도비뮤즈에서 시스템폰트 적용시, 텍스트 또는 이미지가 뿌옇게(선명하지..