의속성 주입(Dependency Injection)

• 참조 사이트 … Dependecy Injection in Angular

의속성 주입(Dependency Injection)은 Angular에서 가장 강력한 기능 중에 하나 입니다.

Angular 1.x 에서의 의존주입은 몇가지 제한 사항이 있었습니다.

내부캐시(Internal cache) : 종손성은 싱글톤 입니다. 라이프 사이클당 한번만 생성
네임스페이스 출동(Namespace collision) : 오직 한가지 유형만을 가질 수 있습니다.
단단한 결합(Tightly coupled) : Angular 1.x 프레임워크에 내장되어 있습니다.

의존성 삽입을 설명하기 위해 다음 예제를 사용합니다.
차를 만드는 클래스를 생성하겠습니다.
일반적인 방법으로 아래와 같습니다.

class Car {
  constructor() {
    this.engine = new Engine();
    this.tyres = Tyres.getInstance();
  }
}

이 방법은 괜찮습니다. 하지만, 우리는 엔진 생성자와 싱글 톤 타이어에서 엔진을 얻을 수 있습니다.
만약 우리가 MockEngine 을 생성자로 대체해서 코드를 테스트해야 한다면 새로운 코드를 작성해야 합니다.
테스트 할 수 잇는 코드를 만들면 우연히 재사용 가능한 코드를 빌드하게 됩니다. 이 코드르 더 재사용 가능하게 만드는 한가지 방법은 TypeScript 생성자를 사용하여 형식과 값을 전달하는 것입니다.
다음은 그 예입니다.

class Car {
  constructor(engine, tires) {
    this.engine = engine;
    this.tyres = tyres;
  }
}

우리는 생성자로부터 의존성 생성을 제거하고 모든 필요한 종속성을 기대학 위해 생성자 함수를 확장했습니다. 이제 코드의 구현을 하드 코딩하지 않았습니다.
우리는 생성자에 옮겼습니다.
새차를 만드려면 다음과 같이 실행하면 됩니다.

var car = new Car(
  new Engine(),
  new Tyres()
);

코드를 테스트 할 필요가 있다면 모의 의존성을 보낼 수 있습니다. 예를 들면 다음과 같습니다.

var car = new Car(
  new MockEngine(),
  new MockTyres()
);

이제, 이것이 의존성 주입입니다.
Angular2 에서의 의존성 주입은 다음과 같이 구성이 됩니다.

인젝터(Injector) : API 를 노출하는 객체입니다.
공급자(Provider) : 인젝터에게 종속성의 인스턴스를 만드는 방법을 알려줍니다.
종속성(Dependency) : 객체를 생성해야 하는 유형

Angular2 에서는 동일한 객체를 만드려면 다음과 같이 정의합니다.

import { Injector } from 'angular2/core';

var injector = Injector.resolveAndCreate([
  Car,
  Engine,
  Tyres
]);

var car = injector.get(Car);

Angular2 에서 import하는 Injector는 Injector.resolveAndCreate()를 생성하는데 도움을 주는 API 를 확장하는 팩토리 함수이며 이는 제공자의 목록을 가져옵니다.

TypeScript 에서는 다음과 같이 Car 클래스를 정의합니다.

class Car {
  constructor(engine: Engine, tires: Tires, doors: Doors) {
    ...
  }
}

이 방법으로 의존성 주입을 생성함으로 이름 충돌 문제를 제거 할 수 있습니다.이 구조화 된 형식은 Angular 1.x 의 모든 문제를 제거 합니다.

메타데이터, 데이터 바인딩, 서비스

메타데이터 클래스를 처리하는 방법을 Angular에게 알려줍니다. app.component.ts파일에서 클래스를 만들었습니다.
데코레이터(Decorator)는 함수(function)이며, 데코레이터는 무엇을 할지 클래스에 알려줍니다.

@Component({
  selector: 'my-component',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective]
})
export class MyComponent {
    public name: String;
    public today: Date;

    constructor() {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();       
    }
    sayMyName() {
        alert (this.name);
    }
}

여기서 @Component는 데코레이터 입니다. 이 함수에서는 클래스를 구성하는 매개변수를 전달합니다. 데코레이터에 전달하는 파라미터들은 다음과 같습니다.

selector : Angular 에서 바인딩할수 있는 CSS 선택
templateUrl : 템플릿 파일의 위치
directives : 템플릿에 바인딩 할 수 있는 디렉티브 배열
providers : 서비스를 의해 의존관계 주입자들(dependency injection providers)의 배열

데이터 바인딩 방법

데이터바인딩을 사용하면 템플릿의 데이터 구성요소에 바인딩 할 수 있습니다. 데이터 바인딩 형식에는 다음 네가지가 있습니다.

1. DOM에 다가
2. DOM에서 직접
3. 1,2 번 둘다
4. 속성 및 이벤트 바인딩을 사용하여 속성과 이벤트 바인딩을 결합한 양방향 데이터 바인딩 ngModel

단방향 바인딩

다음 코드를 한번 봅시다

<h1>{{today | date:"fullDate"}}</h1>

<div>
    <button (click)="sayMyName()" myHighlight>Do Something Special</button>
</div>

app.component.html파일 안에서 {{today}}는 app.component.ts 파일의 today 프로퍼티를 단방향 바인딩을 통해 바인딩하고 있습니다. sayMyName() 함수는 click 이벤트 핸들러에 바인딩 됩니다.

양방향 바인딩

양방향 바인딩을 시연하려면 app.component.html 파일에 <div> 태그를 포함하도록 변경하세요.

<div>
    <input [(ngModel)]="task">
</div>
<div>
    {{task}}
</div>

app.component.ts 파일에서는 아래와 같이 비슷하게 변경해 줍니다.

export class MyComponent {
    public name: String;
    public today: Date;
    public task: string;

    constructor() {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();
        this.task = '';
    }
    sayMyName() {
        alert (this.name);
    }
}

여기서는 task 프로퍼티에 바인딩했습니다. 사용자가 입력 할 때 입력 내용이 페이지에 나타납니다.

서비스 만들기

Angular2의 서비스는 정의 된 함수가 있는 클래스를 말합니다.무엇이든 서비스가 될 수 있습니다.
JS 파일에 저장된 작업 목록을 읽는 서비스를 작성해 보겠습니다.

/app폴더에 task.service.ts라는 파일을 만들고 다음 파일 추가해 보겠습니다.

import {Injectable} from 'angular2/core';

@Injectable()

export class TaskService {
}

Angular Injectable함수를 포함하고 이 함수를 @Injectable() 데코레이터에 적용했습니다.
TypeScript는 @Injectable 데코레이터를 보고 Angular가 이 서비스에 다른 종속성 주입을 하는데 필요한 메타 데이터를 방출합니다.

작업을 위한 모델을 만들어 보겠습니다.
/app폴더에 tasks.ts라는 새 파일을 만듭니다. 이 파일에서 우리는 다음과 같이 작업을 위한 모델을 생성할 것입니다.

export class Task {
  id: number;
  name: string;
}

JavaScript 배열을 사용하여 새 파일을 만듭니다. 이 파일은 sample.tasks.ts로 다음 내용을 추가 합니다.

import {Task} from './tasks';
export var TASKS: Task[] = [
    {"id": 11, "name": "Buy Bread"},
    {"id": 12, "name": "Buy Milk"},
    {"id": 13, "name": "Buy Soap"}
];

모델을 이 파일에 포함시켰고 이 모델을 가진 배열을 ㅁ나들었습니다. 이 배열은 다음과 같이 TASKS로 내보내집니다.

task.service.ts파일에서 우리는 이 클래스를 포함하고 GET 메소드를 생성할 것입니다. 서비스 파일의 내용을 다음 코드로 바꿉니다.

import {TASKS} from './sample.tasks';
import {Injectable} from 'angular2/core';

@Injectable()

export class TaskService {
  getTasks() {
    return TASKS;
  }
}

모델로 서비스와 데이터를 생성했습니다. 이제 템플릿과 구성 요소를 수정해야 합니다. app.component.ts 파일을 다음과 일치하도록 수정하세요.

import {Component} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {TaskService} from './task.service';
import {Task} from './tasks';

@Component({
  selector: 'my-component',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective],
  providers: [TaskService]

})
export class MyComponent {
    public name: String;
    public today: Date;
    public task: String;
    public taskList: Task[];



    constructor(private _taskService: TaskService) {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();       
        this.task = '';
        this.taskList = this._taskService.getTasks();

    }
    sayMyName() {
        alert (this.name);
    }
}

service 와 tasks 를 포함 시켰습니다.

import {TaskService} from './task.service';
import {Task} from './tasks';

service 를 가능하게 하려면 공급자가 가능해야 합니다. 그래서 @Component 데코레이터에 다음 코드를 넣었습니다.

providers: [TaskService]

service 가 컴포넌트에 노출이 됩니다. taskList를 포함할 배열을 생성하고 Task 유형으로 만듭니다.

export class MyComponent {
    public name: String;
    public today: Date;
    public task: String;
    public taskList: Task[];

    constructor(private _taskService: TaskService) {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();       
        this.task = '';
        this.taskList = this._taskService.getTasks();

    }
    sayMyName() {
        alert (this.name);
    }
}

생성자에 service에 연결하여 개인 변수에 할당하는 정의가 포함되어 있습니다. 밑줄은 데이터가 외부로 전달되고 있음을 빠르게 확인 할 수 있도록 하기위해 사용됩니다.
this._taskSerivce.getTasks()메소드를 사용하면 서비스 파일에 작업을 가져올 수 있습니다.

app.component.html파일에 다음을추가합니다.

<div>
    <ul>
        <li *ngFor="#item of taskList">{{item.name}}</li>
    </ul>
</div>

*ngFor 다이렉티브를 사용하면 taskList배열을 신속하게 반복할 수 있습니다.

Angular2 컴포넌트, 디렉티브, 템플릿

이전 코드를 복제하기

Angular2 시작하기에서 Hello World 를 완료했습니다.

이전의 코드를 확장해서 구성요소, 모듈, 템플릿 작업을 해보도록 하겠습니다.

ng2-todolist 폴더를 만들고, 기존에 있던 코드들을 복사합니다.

 # cp -R ng2-helloworld ng2-todolist

package.json파일안에 "name"을 변경합니다.

"name": "ng2-todolist", 

index.html파일안에 title을 변경합니다.

<title>Angular 2 - My Todo List</title>

컴포넌트의 재사용

컴퐤넌트는 페이지에서 다른 요소를 만들고 정의하는 방법입니다. Angular 1에서는 디렉티브, 컨트롤러를 사용하여 컴포넌트 안에서 디렉티브을 찾도록 기능을 구현해야 했습니다.

app/app.component.ts파일을 수정해 보겠습니다.

import {Component} from 'angular2/core'

@Component({
  selector: 'my-component',
  template: '<div><button (click)="sayMyName()">Do Something Special</button></div>'
})
export class MyComponent {
    public name: String;
    constructor() {
        this.name = 'Angular 2 Rocks !';
    }
    sayMyName() {
        alert (this.name);
    }
}

class AppComponent 이름을 MyComponent 로 변경 하였기 때문에 index.html,main.ts 파일안의 내용을 변경해야 합니다.

<my-component>Loading...</my-component>

main.ts 파일 안에 다음으로 수정합니다.

import {bootstrap}    from 'angular2/platform/browser'
import {MyComponent} from './app.component'

bootstrap(MyComponent)

서버를 실행 시켜 봅니다. 버튼과 버튼을 눌렀을 경우에 경고창이 나오는 것을 확인할 수 있을것입니다.

 # npm start

디렉티브 사용하기

app폴더에 highlight.directive.ts파일을 만들고 다음 내용을 추가 합니다.

import {Directive, ElementRef} from 'angular2/core';
@Directive({
    selector: '[myHighLight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'orange';
    }
}

Directive : @directive 데코레이터를 위해 사용
ElementRef : DOM element 에 엑세스 할 수 있도록 허용합니다.

highlight.directive.ts파일을 다음과 같이 변경합니다.

import {Directive, ElementRef} from 'angular2/core';
@Directive({
    selector: '[myHighlight]',
     host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class HighlightDirective {
    private _el:HTMLElement;
    constructor(el: ElementRef) { this._el = el.nativeElement; }
    onMouseEnter() { this._highlight("yellow"); }
    onMouseLeave() { this._highlight(null); }
    private _highlight(color: string) {
        this._el.style.backgroundColor = color;
    }
}

host : MouseEnter, MouseLeave에서 CSS 변경을 수행하기 위해 호출할 두가지 메소드가 포함되어 있습니다.

템플릿의 위력

Angular는 템플릿을 사용해서 컴포넌트 안에서 클라이언트가 보는 것을 관리합니다. 템플릿에는 보여지기 위한 HTML 코드가 포함되어 있습니다. <script> 태그는 제외 한 대부분 모든 HTML 태그들을 템플릿에서 사용할 수 있습니다.
<html>,<body>,<base>와 같은 태그들을 사용할수는 있지만 실제로 템플릿에는 실제로 적용되지 않고 무시됩니다.
컴포넌트에 템플릿을 추가 하려면 템플릿 테그를 제거하고 templateUrl이라는 테그를 사용합니다.

templateUrl : 템플릿의 경로를 말합니다.

import {Component} from 'angular2/core'
import {HighlightDirective} from './highlight.directive';

@Component({
  selector: 'my-component',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective]
})
export class MyComponent {
    public name: String;
    constructor() {
        this.name = 'Angular 2 Rocks !';
    }
    sayMyName() {
        alert (this.name);
    }
}

npm start를 사용하고 있다면 백그라운드에서 코드변경이 자동으로 브라우저에 적용되는 것을 확인할 수 있습니다.

간단히 날짜를 적용해 보겠습니다.
public today:Date 을 추가하고 new Date()를 추가해 봅니다.

app.component.ts부분을 아래와 같이 수정해 봅니다.

export class MyComponent {
    public name: String;
    public today: Date;

    constructor() {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();       
    }
    sayMyName() {
        alert (this.name);
    }
}

이제 app.component.html파일을 만들고 날짜가 표기 되도록 만들어 봅니다.

<h1>{{today | date:"fullDate"}}</h1>

| 표시

| 표시는 앵귤러1의 필터를 대체하는 파이프입니다. 필터처럼 템플릿 출력 형식을 지정하는데 도움이 됩니다.

소니 블루투스 스피터 SRS-XB20

LDAC™

엑스페리아XZ 를 사용하고 있는데, 갤럭시6에서 사용할때는 몰랐는데 블루투스의 새로운 기술이 들어간 기기로 접속을 하면 다양한 메세지가 나온다.

APT-x 기능이 있는 이어폰도 위의 메세지와 비슷한 지원기기에 대한 정보를 보여 준다.

간단하게 표현하면 LDAC™은 하이 레졸루션 오디오를 전송하는 오디오 코딩 기술입니다.

LDAC™는 시장에 출시된 그 어떤 Bluetooth® 호환 코딩 기술과 비교할 수 없습니다. 이 기술은 최대 전송 속도 990kbps로 전송하는 월등한 음질로 하이 레졸루션 오디오 음악을 즐길 수 있도록 지원합니다. 이는 전송 속도가 328kbps에 불과한 SBC(Low Complexity Subband Coding) 등 기존의 Bluetooth® 호환 오디오 기술 대비 거의 세 배에 달하는 데이터를 의미합니다.

이 기술은 무선 환경에 따라 다양한 전송 속도를 지원하여 음악 애호가가 원하며 아티스트가 들려주고자 했던 향상된 청취 환경을 제공합니다.

후기

이번에 AUX 케이블을 사용하면 음질이 더 좋다는 사실을 알게되었다. 블루투스의 음질의 한계가 있다는 사실.

블루투스 2.0 은 데이터 전송량이 3Mbps 밖에 안되기 때문에 실질적 음질을 전송할 수 없다고 한다. 그래서 기존의 블루투스는 FM 라디오의 음질수준 밖에 들을 수 없다고 한다.
예전에는 이 사실에 대해서 무시하고 그냥 들었는데, AUX를 연결하고 난 후에는 그럴수도 있겠다 생각이 들었다. 비교해보고 직접 해 보시기 바란다. 본인같은 막귀도 알수 있을 정도였다.

• 비트가 있는 음악을 즐겁게 듣기 좋은 음질.
• 캠핑갈때 편하게 들고가기 좋은 음질

boss sountlink3 를 사용하고 있는 입장에서 부드러운 베이스를 보여주지는 못하는 것 같다. 나에게는 조금 귀가 아픈 베이스를 제공하는 것 같다.

어쨰 계륵같은 물건이 되었다.

Angular2 를 준비하기

Angular 2 와 Angular 1.x 차이

JavaScript를 기반으로하는 스크립트 언어.

Angular 1.x에 대한 지식이 필요하지 않지만 JavaScript, Node.js 및 npm에 대한 지식이 필요합니다.

Angular 2 는 TypeScript 와 ECMA6 를 포함하고 있습니다.

기존에는 Angular 1.x 를 공부하면 됐지만, 이제는 typescript에 대해서 공부를 해야합니다. 또다른 자바스크립트를 공부하는 느낌입니다.
자나깨나 여러가지 언어를 혼합해서 사용하고 있는데, 이제는 점점 더 정리가 안되고 있습니다.

TypeScript는 JavaScript 확장을 돕기 위해 마이크로소프트에서 개발한 무료 오픈 소스 언어입니다. 고급 자동완성, 탐색 및 리팩터링을 제공합니다. 자세한 내용은 https://www.typescriptlang.org/ 에서 확인 할수 있습니다.

ECMA6는 클래스 및 모듈을 사용할 수있게 해주는 JavaScript 의 표준입니다. http://es6-features.org/ 를 참조하면 됩니다.

개발툴

Microsoft 의 Visual Studio Code 을 추천합니다.

기본적으로 마소에서 만들었기 때문에 TypeScript 언어를 잘 지원하고 있습니다. 개인적으로 Atom.io보다 최적화가 잘되어 있다고 생각합니다.
Atom 은 참여하는 사람들이 많아서 다양한 기능들을 찾을 수 있지만, 어수선합니다. 처음에는 Atom 으로 시작을 했지만, 지금은 Visual Code 에 정착해서 사용하고 있습니다.

폴더세팅

응용 프로그램을 시작하고 실행하기 위한 준비가 되었습니다.

package

package.json을 만들어서 npm 세팅을 하면 되지만, 다음과 같이 하면 기본세팅으로 자동설정이 됩니다.

# npm init --yes

그리고 아래 들어있는 내용은 아래와 같은 내용입니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

새로운 파일 tsconfig.json을 만듭니다.

# touch tsconfig.json

안에 내용을 다른과 같이 작성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

이 파일 대부분은 TypeScript 응용 프로그램의 기본 구성입니다. tsconfig.json파일을 처리하는 방법에 대해서 컴파일러에 알져주는 역할을 합니다.
noImplicitAny 변수는 컴파일러에게 변수 선언을 처리하는 방법을 알려줍니다. false로 설정을하면 기본 유형을 any로 설정할 수 있으므로 Angular 2 를 좀 더 쉽게 학습할 수 있습니다.

tsconfig.json에 대한 문서

새로운 파일 typings.json을 만들고 다음 내용을 추가 합니다.

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

새로운 파일 package.json파일을 만들고 아래 내용을 추가합니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

tsc : 타입스크립트 컴파일러
lite : 실시간으로 파일변경을 감지해서 브라우저에 반영. 앵귤러 앱을 시작하기 위한 위한 파일 서버
typings : typings 툴을 시작
postinstall : npm 설치후에 타이핑 설치 method 실행

여기서 npm install 명령을 실행하셔야 문제가 없습니다.

 # npm install

npm manager 는 진리입니다. 그런데, 최근에는 비슷한 소스 이름으로 올려서 개인정보를 훔쳐가는 일이 발생했다고 하는데, npm install명령을 사용할때 소스 이름을 잘 파악해서 사용해야 되겠습니다.

이제 /app라는 하위폴더를 만들고 다음을 실행합니다.

 # mkdir app
 # cd app

컴포넌트(component) 파일 app.component.ts파일을 생성하고, 아래와 같은 내용을 입력합니다.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Hello World !</h1>'
})
export class AppComponent { }

이파일은 컴포넌트의 루트 컴포넌트(root component) 파일입니다.
이 파일 안에는 angular2/core 모듈을 가져오는 import와 메타 데이터 객체를 가져오는 @Component데코레이터가 있습니다.
export class Appcomponent{}은 메인 어플리케이션을 가져오기 위해서 사용하는 빈 클래스 입니다.

이제 Angular가 방금 생성 한 구성 요소 파일을 로드 할 수 있도록 파일을 만들어야 합니다.

main.ts라는 파일을 만들고, 파일이 /app폴더에 있는 것을 확인하고 다음 코드들을 입력합니다.

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent)

bootstrap : 사용하기로 결정한 플랫폼을 기반으로해서 컴포넌트 로딩을 처리합니다.

다시 package.json 이 있는 폴더로 돌아옵니다.

index.html파일을 만들고 다음 코드를 입력합니다.

<html>
  <head>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

지금까지 아래와 같은 폴더 구성을 갖고 있을겁니다.

다음을 실행해서 제대로 되었는지 확인해 봅닌다.
문제가 없다면 다음과 같은 화면이 나오는 것을 확인 할 수 있습니다.

방수방진에 대해서

물놀이하는 아이 촬영을 위해 엑스페리아를 구매했습니다. 그런데 이게 어느정도 방수방진을 지원하는지 알수가 없는데, 소니 엑스페리아 홈페이지에 친절하게 설명이 되어있습니다.

그래서, 개인 저장용 하나 정리해 놓습니다.

IP 등급

IP(Ingress Protection) 등급은 장치의 방진 및 방수 수준을 측정하는 국제 표준입니다. 두 자리 IP 등급의 첫 번째 숫자는 먼지를 포함한 고체에 대한 보호 수준을 나타내고, 두 번째 숫자는 장치의 방수 정도를 나타냅니다.

예

IP57

첫번째자리(5)

먼지로부터 보호하는 정도

두번째자리(7)

액체로부터 보호하는 정도

먼지에 대한 보호 정도

물에 대한 보호 정도

- 소니 엑스페리아 방수방진에 대한 페이지

A/S 문제

소니나 삼성에서 방수방진 기능을 지원한다고 하지만, 실제로 물이 들어옴으로 인한 A/S 는 어렵다는 평입니다.
소비자 과실로 몰고가는 것은 무지기수라고 합니다.
그래서, 소니는 방수방진 테스트를 끝내고 난 기기는 방수에 대한 지원 서비스를 제대로 받을 수 있다고 합니다.

복불복 기능입니다!

sgminer 에서 다른 GPU를 못 잡을 때

2개이상의 GPU 를 못잡을 떄

마이너를 작동에 있어서 GPU를 두개 꼽았는데 하나만 인식을 할 떄가 있씁니다. 이를 문제는 여러가지 이유 때문인데, 대게 아래와 같은 이유라고 생각 합니다.

• 내장 그래픽카드가 켜진 상태

sgminer 의 기본 옵션은 제일 처음 검색되는 그래픽카드를 인식하고 작동을 합니다.
만약 인텔 내장 그래픽칩을 사용하고 있다면, 그래픽 카드를 하나만 잡고 있을 겁니다.

# sgminer --ndevs

를 통해서 자신의 그래픽카드의 정보를 파악 할수 있습니다.

[10:39:09] ATI ADL Overdrive6 API found.
[10:39:09] Found 11 logical ADL adapters
[10:39:09] ADL index 0, id 1343002048 - BIOS partno.: 113-2E366FU-O53, version: 015.050.002.001, date: 2017/03/23 23:12
...
...
[10:39:09] Failed to ADL_Overdrive5_ODPerformanceLevels_Get
[10:39:09] 1 GPU devices max detected

저는 현재 RX 570 두개를 크로스로 끼고 사용하고 있습니다. 그런데 제일 밑단에 보면 기본 그래픽카드 옵션이 적용되는 카드를 확인할 수 있습니다.

[10:39:09] 1 GPU devices max detected

1개의 GPU만 확인이 되었습니다.
기본옵션을 사용해서 마이닝을 하면 CPU내장의 GPU를 사용하게 됩니다.

이제 아래와 같은 옵션을 사용해 봅니다.

# sgminer --gpu-platform 1 --ndevs

[10:42:37] CL Platform vendor: Advanced Micro Devices, Inc.
[10:42:37] CL Platform name: AMD Accelerated Parallel Processing
[10:42:37] CL Platform version: OpenCL 2.0 AMD-APP (2442.8)
[10:42:37] Platform devices: 2
[10:42:37]      0       Ellesmere
[10:42:37]      1       Ellesmere
[10:42:37] Number of ADL devices: 2
[10:42:38] ATI ADL Overdrive5 API found.
[10:42:38] ATI ADL Overdrive6 API found.
[10:42:38] Found 11 logical ADL adapters
...
...
ADL_Overdrive5_ODPerformanceLevels_Get
[10:42:38] 2 GPU devices max detected

역시 마지막 밑단을 보시면 아시겠지만, 변화가 있습니다.

[10:42:38] 2 GPU devices max detected

제가 원하는 모델을 찾았다는 말입니다.
이제 마이닝할때 --gpu-platform 1 옵션을 포함해서 작성해야 된다는 것을 아셨을 겁니다.

--gput-platform 0은 기본 내장 GPU 카드를 의미하는 것을 아셨을 겁니다.

엑스페리아 XZ 강화 필름 비교 (호후, 솔츠)

강화필름 구매하면서 만원날린 후기.

호후

엑스페리아를 새로 개통하면서 새로영입한 폰을 위해서 옷을 입혀주려고 하는데, 역시 필름보다는 강화 유리를 사용하는게 좋습니다.

지금까지 사용하는 많은 폰들의 액정을 구해줬으니까요.

일단 결론부터 말씀드립니다.

나는 이런 결과물을 원했지만, 기대했던 물건은 달랐다.

• 가격 : 3천원(2장)

결론 비추천

네이버 쇼핑를 통해서 구매했습니다.

가격은 강화유리중에 가장 저렴합니다.
강화유리는 소모품이라고 생각하기 때문에, 그리고 질이 그렇게 차이가 나이 않기 때문에 액정을 보호하는 용도면 된다 생각합니다.

그래서 저렴한 것이든 상관이 없었습니다.

그럼데 이번에 이걸 굼재한 이후로 조금 생각이 달라졌습니다.

적어도 화면이 나오는 부분 전체 정도는 가려줘야 하는게 아닌가 생각합니다.

다름 사진을 보면 얼마나 액정이 부족한지 알 수 있습니다.

액정 보다 상이하게 다른 사이즈

조금 더 가까이 찍은 사진

XZ 엣지 폰처럼 화면이 구부러지는것도 아닌데, 양쪽을 너무 비어버립니다. 판매사이트에 들어가면 아래와 같은 안내 문구를 적혀 있습니다.

다음은 호후 판매 사이트에서 구매시 주의사항입니다.

액정에 맞지 않은 것이 나올지 모르니 조심하시기 바랍니다.

일단, 판매자에게 문의를 해 놓은 상황이나 어떤답변이 올지는 대략 예상이 됩니다.

솔츠 Soultz

soultz extreame 필름

구성품 : 강화 유리 1장 + 클리닝 킷

• 가격 : 6천원(1장)

먼저 구매했던 호후필름에 비해서 단가가 4매나 비싼 필름입니다.

결론

이번에도 실패
호후 보다는 조금 더 감싸주지만, 부족합니다.

나는 전면부를 다 가려주는 것으로 생각하고 구매했는데, 전혀 그렇지 않다는 거 저와 같은 실수를 하시지 말라고 이렇게 억울해서 글을 적습니다.

정말 짜증나는 상황입니다.

호후 vs 솔츠

사진을 눌러서 보시면 아시겠지만, 호후보다 왕코딱지 하나 만큼 더 덮을 수 있습니다. 이 크기를 보고 사용해 볼 생각도 안 하고 바로 넣었습니다.

이렇게 만원이 공중 분해 되었습니다.

다음에는 2만원이 넘어가는 강화유리를 구매해야 할 듯 하네요.

진리의 스코코 인가?

도로명 주소를 한국GPS 로 받으려고 합니다.

구글 API 를 사용해서 좌표를 GPS 로 변경 할 수 있지만, 이렇게 하면, 몇몇 주소들은 undefined 되는 값이 나온다. 이 사실을 인지했을 때에는 이미 늦어버린 후였고. 어쩔수 없이 다른 방법을 통해서 GPS 좌표를 구해서 DB에 구해서 작업을 하려고 한다.

내가 개발자는 아니어서 개인적으로는 네이버나 다음 API 를 이용해서 GEOCODER를 통해서 해결하면 되는 일이겠다 생각하지만, 개발사입장에서는 그게 쉬운일이 아닌가 보다. (왜 어려운지 모르겠다.)

아무튼 google spreadsheet 로 도로명 주소를 gps 좌표로 보려고 합니다.

준비물

• 네이버 or 다음 개발자 등록
• 구글 계정

순서

(네이버 개발자)를 기준으로 작업을 하려고한다.

네이버 API 를 사용하기 위해서는 개발자 등록을 해야한다.

네이버에 애플리케이션 등록(API 이용신청)을 합니다.

Naver-Client-ID 획득

Naver-Client-Secret 획득

애플리케이션 정보는 보는 곳에서 위의 정보를 얻어올 수 있습니다.

스프레드시트를 불러서 스크립트 작성을 시작 합니다.

저는 주소를 좌표로 변환하는 API 를 사용해서 하려고 합니다.

JSON 를 사용해서 하려고 햇는데, google spreadsheet API 문서를 보니 jsonParse 기능이 이제 지원을 안한다는 문구가 있어서 부득이 XML을 사용했습니다.

function getXML(addr) {
  var point = {};
  var apiURL = 'https://openapi.naver.com/v1/map/geocode.xml?query='+addr;
  var option = {
    'method' : 'get',
    'headers' : {
      'X-Naver-Client-Id' : '네이버 클라이언트 아이디',
      'X-Naver-Client-Secret' : '네이버 시크릿'
    }
  };
  var xml = UrlFetchApp.fetch(apiURL,option).getContentText();
  var doc = XmlService.parse(xml);
  var root = doc.getRootElement();
  Logger.log(xml);

  var lng = root.getChild('items').getChild('item').getChild('point').getChild('x').getText();
  var lat = root.getChild('items').getChild('item').getChild('point').getChild('y').getText();

  point = { lng : lng, lat : lat};

  return point;
}

function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var cell = sheet.getActiveCell(); // active cell
  var addr = cell.getValue(); 
  Logger.log(addr);
  var point = getXML(addr);

  // 오른쪽 두개에 입력하기
  var cellright2 = cell.offset(0, 2);
  var cellright3 = cell.offset(0, 3);

  // 입력
  cellright2.setValue(point.lat);
  cellright3.setValue(point.lng);
}

네이버 클라이언트 아이디와 시크릿 코드를 코드에 삽입합니다.

주소를 입력해 둔 시트에 가서 커서를 올려둡니다.

스크립트 입력 페이지에서 스크립트를 실행합니다.

커서 오른쪽 두칸뒤애 좌표가 추가되는 것을 확인 할 수 있습니다.

조금편하게 사용하게 GUI 를 추가를 하고 잇는 중입니다만, 금방 때려칠 꺼 같은 귀찮음!

엑스페리아 XP vs XZ vs XZP

엑스페리아를 구매하려고 알아보는 중에 최근에 나온 세대를 정리해 놓은 곳을 찾을 수가 없어서 정리 합니다.

기본 사양

	엑스페리아 XP	엑스페리아 XZ	엑스페리아 XZ Performance
출시일	2016.07	2016.10	2017.06
무게	164그램	161 그램	191g
내장 저장 공간	32기가	32/64G	64GB
CPU	스냅드래곤820	스냅드래곤 820	스냅드래곤835
메모리 (RAM)	3GB	3GB	4GB
외장메모리	최대 256기가	최대 256기가	최대 256기가
후면 카메라	2300만화소	2300만화소	1900만화소
	1/2.3인치 센서	1/2.3인치 센서	Motion Eye G렌즈
	24MM 초점거리	24MM 초점거리	Predictive Hybrid
	위상차 AF	위상차 & 레이저 AF	LASER AF
	LED 프레시	5축 손떨림 보정기능	LED 플래시
전면카메라	1300만화소
디스플레이	5.0인치 디스플레이	5.2인치 고릴라글래스	5.46인치 고릴라글래스
	FHD IPS	FHD IPS	UHD
	1920*1080		3840 x 2160
	441PPI	424PPI	806 ppi
배터리	2700 일체형	2900 일체형	3230mAh 일체형
충전	퀵차지 2.0	Qualcomm® Quick Charge 3.0
연결방식	USB 2.0 일반 5PIN	USB C타입/ USB 2.0	USB 3.1 Gen 14 /USB Type-C™
안드로이드 버전	6.0.1 마시멜로우	6.0.1 마시멜로우	7.1 Nougat
방수	IP68 방수방진
지문인식 여부	가능

장점

• 명맥을 이어오는 IP68 방수방진
• 소니감성
• 희소성
• 저렴한 가격 (2017.07 현재 보조금 20만원으로 오름)
• 누가 업데이트

보조금 20만원이 올라서 기변으로 해도 32만원에 기계를 얻을 수 있습니다.
게다가 소니에서 사은품 주는게 좀 많이 줍니다. 블루투스 스피커가 잇었는데 지금은 사라졌습니다. 나올때까지 사는걸 보류해야 되겠습니다.

기존에 갤럭시 s6 를사용하고 있었는데, 그에 비교해서 소니의 단점을 뽑자면

아쉬운부분

IR Blaster

적외선 센서라고 리모콘기능을 대체할 수 있는 기능입니다만, 지원하지 않습니다. 가끔 리모콘 대신에 핸드폰을 통해서 사용하는게 편한데 아쉬운 부분입니다.

OIS(Optical image stabilization) 모듈

프리미엄 핸드폰 라인에는 어김없이 들어가 있는 기능.

손떨방이라는 기능으로 사진이나 영상촬영시 손떨림을 하드웨어적(물리적)으로 방지해 주는 기술입니다. 하지만, XP, XZ, XZP 모두 이 기능을 지원하지 않습니다.

대신, EIS 라는 프로그램적인 떨방기능을 갖고 있습니다.
물리적으로 반응하는 OIS 에 비해서 결과물의 확대했을때 화소가 떨어질수 있습니다.

소니를 구매하려고 했다가 이것만 생각하면 사고싶은 생각이 없어지는 아쉬운 부분

배터리타임

참조하시라고 배터리 타임비교표