불로

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}} 결과적으로 템플릿이 변경되어도 컴포넌트 클..

Angular Tutorial 아래 튜토리얼은 4~8 Displaying a List Master/Detail Components Services Master/Detail Components Services Routing HTTP Displaying a List Heroes의 리스트를 보여주고, hero 선택 및 hero의 details까지! Create mock Heroes 실제로는 remote data server로 부터 데이터를 가져와야 하지만, mock heroes를 만들어서 서버에서 동작하듯 mock-heroes.ts를 src/app/ 폴더에 생성 Displaying heroes HeroesComponents에 보여주기 위해서 위에서 생성한 mock-heroes를 import 그런다음 heroe..

Angular Tutorial 아래 튜토리얼은 1~3 Introduction The Application Shell The Hero Editor Introduction Tour of Heroes 위 튜토리얼은 Angular의 fundamentals를 커버 할 수 있음 튜토리얼 구성 Use built-in Angular directives to show and hide elements and display lists of hero data. Create Angular components to display hero details and show an array of heroes. Use one-way data binding for read-only data. Add editable fields to upd..

파이썬 쥬피터(juypter) 한글 깨짐 현상 파이썬에서 주로 사용하는 jupyter notebook에서 한글을 설정 안하면 깨진다. 'ㅁㅁㅁㅁ'로 표시 되기 때문에 한글을 설치하고, 세팅하는 작업이 필요하다 Centos에 한글 나눔 글씨체 설치 ``` $ cd /usr/share/fonts/ $ wget http://cdn.naver.com/naver/NanumFont/fontfiles/NanumFontTTFALL.zip $ unzip NanumFontTTFALL.zip -d NanumFont $ rm -f NanumFontTTFALL.zip ``` [참고] 2017.02.20 - Centos 나눔글씨체 설치하는 방법 http://zetawiki.com/wiki/%EB%A6%AC%EB%88%85%EC%..

Python에서 DataFrame을 임시 데이터를 저장하는 방법 pandas를 사용하면서, 중간 데이터를 저장하거나 최종 데이터를 저장을 해야할 때가 있다. 이때 csv로 저장하고, 불러오는 방법을 설명한다. DataFrame을 CSV파일로 저장하기 DataFrame을 CSV로 저장하는 방법은 매우 간단하다. dataframe의 object에서 to_csv의 메소드를 이용하면 된다. datafram.to_csv('result.csv') CSV파일 DataFrame으로 불러오기 csv의 파일을 DataFrame으로 불러오기 위해서는 아래와 같이 실행하면 된다. 이때, 데이터의 크기가 너무 커서 어떤 조건을 만족하는 데이터만을 불러오고 싶으면 iterator=True를 통해서 iteration을 돌려서 가져..

파이썬에서 gzip파일을 읽는 방법 2가지 성능 비교 gzip 파일 확인 gzip의 파일을 읽으려면 shell에서는 zcat을 이용하면 쉽게 데이터를 확인이 가능하다. $ zcat * | head -100 $ zcat * | wc -l 아래 소스코드는 zcat과 pipeline을 이용해 읽는 방식과, gzip.open을 이용해 gzip의 파일을 읽는 속도를 비교한 코드이다. 코드 [참고] * https://codebright.wordpress.com/2011/03/25/139/