불로

Tmux에서 동시에 여러 Pane에 동일한 값을 입력하는 방법 동일한 서버에 동일한 작업을 반복해서 진행해야 할 때가 있다. 이럴때 사용하면 좋은게 tmux에 있는 synchronize의 기능이다. 각각의 pane을 키고 sync를 on/off 하면서 작업을 하면 반복잡업을 피할 수 있다. :setw synchronize-panes :setw synchronize-panes off 참고 https://sanctum.geek.nz/arabesque/sync-tmux-panes/

Vi(Vim)에서 Syntax Highlighting 변경하기 다양한 color scheme을 적용해보자. Vim의 color scheme에 대해서 알아보고, 설치 및 적용 방법에 대해서 설명한다. color scheme 확인 및 설치 이미 설치되어 있는 기본 color scheme 확인 Plugin을 통해 설치가 가능한 color scheme 설치 적용하기 다양하게 제공되는 color scheme에 대해 알아보고, color scheme을 적용하는 방법에 대해서 설명한다. 다양한 color schme이 적용된 화면을 확인 가능하다. http://vimcolors.com/ 다양하게 제공되는 Color Scheme VIM에서 기본으로 제공하는 Color Scheme $ ls /usr/share/vim/vi..

템플릿과 템플릿 문법 (Template) 템플릿 (Template) 란? 템플릿은 HTML과 Angular 고유의 템플릿 문법을 사용하여 UI의 초사 단위인 컴포넌트의 뷰를 정의 동적으로 변하는 데이터는 컴포넌트 클래스가 관리하며 템플릿 문법의 데이터 바인딩에 의해 정적 HTML에 포함 뷰 생성과정 Component class에서 데이터 바인딩을 통해 데이터와 템플릿이 합쳐져 compile을 통해 최종적인 view를 생성 Angular는 템플릿과 컴포넌트 클래스로 뷰와 모델(데이터와 비즈니스 로직)을 분리한다. Angular는 컴포넌트 기반 개발 (CBD, Component Based Development) 프레임워크 MVC와 MVVM패턴과 일치하지 않지만 템플릿은 뷰(View)를 나타내고 컴포넌트 클래..

템플릿 참조 변수와 세이프 내비게이션 연산자 (Template reference variable & Safe navigation operator) 템플릿 참조 변수 (Template reference variable) DOM요소에 대한 참조를 담고 있는 변수 템플릿 요소 내에서 해시 기호(#)를 변수명 앞에 추가하여 템플릿 참조변수 선언 템플릿 내에서만 유효하며 컴포넌트 클래스에 어떠한 side effect도 주지 않는다. 이벤트 바인딩을 통해 컴포넌트 클래스로 전달할 수는 있다. 사용예로는 이메일 주소 validation check html .... 세이프 내비게이션 연산 (Safe navigation operator) 세이프 내비게이션 연산 ?는 컴포넌트 클래스의 프로퍼티의 값이 null 또는 und..

Angular Basic Angular 소개 Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스킓트 프레임워크 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분 기능을 갖추고 있다. TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경 Angular VS AngularJS Angular는 정적 타이핑 ECMAScript6 스펙을 충족시키기 위해 TypeScript로 재작성 Controller와 $scope 기반 개발 --> 컴포넌트 기반 개발(CBD, Component Based Development)로 전환 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM ..

빌트인 드렉티브 빌트인 디렉티브(Built-in directive)란? DOM의 모든것을 관리하기 위한 지 HTML요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시를 전달 컴포넌트의 복잡도를 낮추고 가독성을 향상 디렉티브 3가지 유형 컴포넌트 디렉티브 (Component Directives) 컴포넌트의 템플리 표시하기 위한 디렉티브 @Component 데코레이터의 메타데이터 객체의 selector 프로퍼티 어트리뷰터 디렉티브 (Attribute Directives) HTML 요소의 어트리뷰트와 같이 사용하여 해당 요소의 모양이나 동작을 제어, ngClass, ngSylte 구조 디렉티브 (Structual Directives) DOM 요소를 반복 생성(ngFor), ..

서비스(Service)란? 화면을 구성하는 뷰를 생성하고 관리하는 역할 컴포너는트 내의 부가기능(로깅기능, 서버 통신 기능에 사용) 컴포넌트 외의 부가 기능이 변경되면 컴포넌트를 변경해야한다. (독립성x) 코드중복, 재사용성이 낮고, 복잡도는 높아진다. 서비스가 필요한 이유? 컴포넌트 관심사와 애플리케이션 전역 관심사를 분리하기 위해서 서비스 사용 서비스느 재사용이 가능하게 되어 일관된 앱 코드 작성이 가능 뷰를 구성하기 위해 데이터를 서버로 부터 취득 하는 행위를 컴포넌트에게 필요한 기능이지만 그 기능 자체가 컴포넌트의 주된 괌심사는 아니다. 위 데이터를 서버로 부터 취득하는 공통 관심사를 서비스로 분리한다면 구성 요소마다 자신의 관심사에 집중할 수 있음 결과적으로 재사용성은 높아지고 복잡도는 낮출 수..

No Module factory available for dependency type: ContextElementDependency 노드에서 모듈의 버전이 맞지 않으면 발생하는 문제인데, lazy loading을 통해서 문제를 해결할 수 있지만 그렇게 하면 더 복잡할 것 같아서 나는 간단 무식하게 해결 해결 방법 아래 처럼 문제를 해결하면 무식하지만 문제가 해결된다. npm uninstall --save-dev webpack sudo rm -R node_modules npm install [참고] https://github.com/angular/angular-cli/issues/6417

데이터 바인딩이란? 필요한 이유? 구조화된 웹앱은 뷰, 모델의 분리가 필요, 하지만 뷰와 모델은 유기적으로 동작이 필요 위 문제를 해결하기 위해 데이터 바인딩이 필요 데이터 바인딩은 뷰와 모델을 하나로 연결 템플릿 = View, 데이터 = Model 뷰와 컴포넌트 클래스의 데이터를 하나로 묶어 유기적 동작 기존 jQuery를 사용 뷰와 모델 간의 관계를 느슨하게 결합하기 어려운 구 구조 상 문제로 뷰가 변경되면 로직도 변경될 가능성이 매우 높음 Angular는 DOM에 직접 적느하지 않고, 템플릿과 컴포넌트 클래스의 상호 관계를 선언 (Declarative programming)으로 뷰와 모델 관계를 관리 컴포넌트 클래스와 템플릿 문법으로 기술 {{title}} 결과적으로 템플릿이 변경되어도 컴포넌트 클..

Overview of the Lightroom Interface 모듈 Library Develop Organizing Your Photos Library에서 새로운 external, subfolder, 숨기고 보여주기 Viewing and Selecting Images 더블 클릭 navigator FIT, FILL, 1:1. 1:3: (내가 선택도 가능) G키는 gridview thumbnails (customize 가능) e키 look view interface가 없이 하려면 full은 F키로 보면 됨 +, -를 통해 thumbnail의 크기를 변경 가능 Comparing, Rating, and Prioritizing Images group에서 best photos를 하기 위해서 rating flags..