niee의 잡다한 공간입니다.

08.Python Flask 외부에서 접속하기

Mon, 03 Aug 2020 01:45:00 +0000

Flask서버를 운영서버에 올린후 외부에서 접속하는 방법을 알아보자

외부 접속 하는방법

외부 접속 방법은 별거 없다. application.py의 app.run()안에 바인딩될 호스트 정보를 넣어주면 된다.

1. 기본 app.run()의경우 127.0.0.1로 실행되어 로컬에서의 접속만 가능하다.
2. 기본 app.run(host='0.0.0.0')의 경우 모든 호스트로 접속이 가능하다.

포트를 변경하고 싶을경우는 port 정보를 넣어준다

1. 기본 app.run()의경우 포트 5000으로 실행된다
2. 기본 app.run(host='0.0.0.0', port=9900)의 경우 9900번 포트로 실행된다.

python으로 해당파일 실행 하고 브라우저로 접속한다.

$ python application.py
  * Serving Flask app "application" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:9900/ (Press CTRL+C to quit)

외부에서 변경된 정보로 접속해본다
http://niee.kr:5000

01.Mac 터미널 scp 이용한 ftp파일 업로드/다운로드

Sun, 01 Mar 2020 02:20:00 +0000

맥북 사용중 ftp클라이언트 프로그램 설치없이 scp를 사용하여
파일 업로드 다운로드를 하는 방법을 알아본다.
클라이언트 사용하면 편하지만 터미널로 충분히 가능하고 뭔가 있어 보인다고 할까나...

맥 터미널로 ftp 파일 업/다운 로드 하기

맥 터미널 명령어중 scp를 이용하여 터미널로 ftp파일 업로드 다운로드가 가능하다
사용법은

//기본적인 파일 업로드
$ spc 업로드할파일명 ftp계정@호스트:올라갈경로

//ex)
$ spc test.txt niee@host.kr:/home/niee/folder

//기본 ftp포트가 아닌 다른 포트를 사용할 경우
$ spc -P 포트번호 test.txt niee@host.kr:/home/niee/folder

//기본적인 파일 다운로드
$ spc ftp계정@호스트:다운받을경로/파일명 다운받을폴더경로

//ex)
$ spc niee@host.kr:/home/niee/folder/test.txt /local

//기본 ftp포트가 아닌 다른 포트를 사용할 경우
$ spc -P 포트번호 niee@host.kr:/home/niee/folder/test.txt /local

//폴더를 업/다운로드 할경우는 -r옵션

//ex)폴더 다운로드
$ spc -r niee@host.kr:/home/niee/folder/ /local

//ex)폴더 
$ spc -r /local niee@host.kr:/home/niee/folder/

지시자 (Directive)

Tue, 09 May 2017 10:00:00 +0000

Angular2 스터디 발표 자료
지시자는 템플릿내에서 사용되는 구성요소의 모양이나 구조를 결정, 컴포넌트 지시자, 구조 지시자, 속성 지시자, 커스텀 지시자가 있음.
- 선언형 프로그래밍과 지시자
- 커스텀 지시자

1. 선언형 프로그래밍과 지시자

선언형 프로그래밍은 순서나 문제해결 과정을 다루기보다, 무엇을 나타내야 할지에 관심.
선언형 프로그래밍의 예로 HTML이 있음
HTML에서 중요한 것은 애플리케이션이 추구하는 목적에 부합하도록 엘리먼트를 배치했느냐
angular도 선언형 프로그래밍 방식으로 개발

1-1. 지시자의 장점

템플릿에 가독성을 부여 : 지시자에 의미있는 이름을 부여하여 컴포넌트가 어떻게 동작할지를 예측가능.
코드 복잡도를 낮춤 : P.280 참조

1-2. 지시자(Directives)의 종류

컴포넌트 지시자 : 컴포넌트 템플릿을 표시하기 위한 지시자.

@Component({
  selector : 'component-name'
})
export class ComponentClass{

}

구조 지시자 : Angular2에서 제공하는 내장 지시자이며 ng접두어가 붙어있음. 공식 사이트 참조

<span [ngSwitch]="조건"> <template [ngSwitchCase]="값"></template </span>

<ul *ngIf="show">

<li *ngFor="let i of list">

속성 지시자 : 네이티브 엘리먼트의 class, style 속성과 구분하기 위한 접두어로 ngClass, ngStyle 사용

<ul [ngClass]="className">

<li [ngStyle]="{'font-style':bold;}">

커스텀 지시자 : 사용자가 새롭게 추가할 수 있는 지시자.

2. 커스텀 지시자

컴포넌트와 별개의 파일에 정의.
네이밍 규칙은 파일명.directive.ts

2-1. 커스텀 지시자 샘플

//1. 커스텀 지시자 생성
import { Directive } from '@angular/core';

@Directive({
  selector : '[my-click]',
  host : { '(click)' : 'onClick()'}
})
export class MyClickDirective{
  onClick(){
    alert('Hello');
  }
}

//2. 커스텀 지시자 사용 컴포넌트 생성
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-directive',
  template: '<button my-click> onClick() </button>'
})
export class CustomDirectiveCmp {
  constructor() { }
}

//3. 모듈에 등록
import { CustomDirectiveCmp } from './custom-directive/custom-directive.component';
import { MyClickDirective } from './custom-directive/my-click.directive';

declarations: [
    CustomDirectiveCmp, MyClickDirective,
  ]

2-2. selector와 @Input, @Attribute 장식자

selector사용시 대괄호를 이용하면, 속성 바인딩을 이용한다.
대괄호를 이용하여 속성 바인딩이 적용되어 있으면 @Input 장식자로 값을 받아 들일수 있다. P.287참조
대괄호가 없는 일반 속성값을 받기위해선 @Attribute 장식자를 사용한다. P.288참조

2-3. 커스텀 지시자에 이벤트 추가

이벤트 추가는 host속성과 @HostListener 장식자를 이용한다.

//1. host속성
@Directive({
  host : {
    '(click)':'clickEvent()',
    '(mousemove)':'mousemoveEvent()'
  }
})

//2. @HostListener
import { HostListener } from '@angular/core'

@HostListener('click') clickEvent(){}
@HostListener('mousemove') mousemoveEvent(){}

2-4. ElementRef와 Renderer

Angular는 DOM에 바로 접근하는 것을 허용하지 않는다.
만약 DOM을 직접 제어하고 싶다면 ElementRef 모듈을 이용한다.
엘리먼트의 모양을 결정해야 하는것 같은 작업을 목적으로 한다면 Renderer를 이용한다.

예제소스

Spring Camp 2017 후기

Sun, 23 Apr 2017 03:20:00 +0000

2017 스프링 캠프 참여 및 요약
- keynote 정상혁
- Reactive Spring ( Spring 5 & Reactor ) 정윤진
- 이벤트 소싱 이론부 이규원
- Implementing EventSourcing & CQRS (구현부) 심천보
- Reactive Programming with RxJava 김인태
- 엔티티 히스토리를 편리하게 관리해주는 스프링 데이터 Envers 김영한

1. keynote

오픈소스 코드 기여 방법
발표 자료

2. Reactive Spring ( Spring 5 & Reactor )

스프링 5 : java9, http/2, Reactive
코드 베이스에 람다등이 추가되어 업그레이드시 주의(jdk 버전등)
jigsaw (새로운 모듈 시스템)?
undertow??
요청 당 하나의 쓰레드 생성, 쓰레드풀 문제 -> 로드 밸런스 적용(구식…) -> 클라우드 도입(어플리케이션 요청량에 따른 자동 스케일, 로드 밸런스와 별차이가 없다?) -> Reactive(느슨한 결합, 비동기로 전달되는 메세지)
Reactive Streams : 논-블럭킹 백프래셔, 비동기 스트림 프로세싱 표준
java9의 java.util.concurrent.Flow
RxJava
예제소스

3. 이벤트 소싱 이론부

spring camp에 마소직원이??
닷넷에서 먼저 시작
데이터 저장기법, 메세지가 중심이 아님
이벤트 소싱 프로세스 발표자료 6페이지
도메인에서 발생하는 사실(이벤트)들을 모두 기록
이벤트는 추가만 된다?(삭제,수정 x)
버전관리 시스템(git,svn등)
이벤트명은 과거형 동사, 이벤트는 검증의 대상이 아니다.
이벤트 소싱은 반드시 CQRS?와 조합해서 사용하자
가파른 학습, 유일성 상실
발표 자료
예제 소스 닷넷임

4. Implementing EventSourcing & CQRS (구현부)

어플리케이션의 모든 상태변화를 순서에 따라 이벤트로 저장한다.
전통적인 데이터 저장 방법은, 최신 정보만 저장되어 이력을 알수 없다(별도의 이력 테이블을 구성 하지만, 점점 복잡해진다).
최종 상태를 알기위해 매번 이벤트를 다시 리플레이 해야 함 -> 스냅샷으로 해결.
스냅샷 : 이벤트 저장 시점의 도메인 상태를 저장
스냅샷만으로 해결이 불가능함 -> CQRS 적용
CQRS : 명령과 조회의 책임분리
Command 모델은 상태변경이 안 되도록 한다.
Aggregate? 도 상태변경이 안되게 한다.
디버그가 용이하다?
쓰기 성능이 좋다?
익숙하지 않다.
단순 모델에 적합하지 않다.
도구 부족 & 성숙하지 않은 기술
MSA(Micro service archic)에 최적화
예제소스

5. Reactive Programming with RxJava

사이트
비동기, 람다, higher-order function
어렵다.

6. 엔티티 히스토리를 편리하게 관리해주는 스프링 데이터 Envers

스프링 데이터 Auditing : 누가 데이터를 언제 입력 변경했나 감시.
@Audited
@RevisionRepository
Spring envers Github

컴포넌트 스타일

Thu, 20 Apr 2017 13:00:00 +0000

Angular2 스터디 발표 자료
컴포넌트 스타일 지정 방법
- 쉐도우DOM선택자
- host
- host-context
- /deep/

1. 컴포넌트 스타일

@Component장식자 속성의 style에 스타일을 지정하면 컴포넌트 마다, 쉐도우 DOM에 독립적으로 스타일을 지정.
다른 컴포넌트에는 스타일에 영향을 주지 않음
쉐도우 DOM선택자의 종류

사용법	내용
:host	현재 컴포넌트의 쉐도우 DOM선택
:host-context	템플릿 외부 조건에 따라 현재 컴포넌트 선택
/deep/	자식컴포넌트에 속한 엘리먼트 선택

2. :host 선택자

현재 자신의 컴포넌트를 의미

:host{
  ....
}

부모 컴포넌트의 조건에 따라 자식 컴포넌트의 상태를 결정할 경우 클래스 부여 가능

:host(.active){
  ....
}

3. :host-context 선택자

부모 엘리먼트에 설정한 클래스 값에 따라 컴포넌트 내부에 특정 엘리먼트를 선택.

//부모
@Component({selector:'parent',template:'<child class="active"></child>'})

//자식
@Component({selector:'child',styles:[':host-context(.active)button{...}'])

4. /deep/ 선택자

부모 컴포넌트에서 정의한 스타일 정보를 하위 컴포넌트 내의 엘리먼트에 적용.

:host /deep/ div{
  ....
}

//부모
@Component({selector:'parent',styles:[':host /deep/ div.first{...}'])

//자식
@Component({selector:'child',template:'<div class="first"></div>')

P.121 참조
예제소스

자식 엘리먼트의 호출과 탐색

Thu, 20 Apr 2017 11:00:00 +0000

Angular2 스터디 발표 자료
자식 엘리먼트의 호출과 탐색 방법
- @ViewChild 장식자를 이용
- @ViewChildren 장식자를 이용
- @ContentChild 장식자를 이용
- @ContentChildren 장식자를 이용

1. `@ViewChild` 장식자를 이용한 엘리먼트 상태 얻기

템플릿에는 사용자가 정의한 지시자를 선언해 기능 구현이 가능.
지시자는 템플릿 내에 선언돼 있기 때문에, 화면이 초기화 후 DOM에 지시자 정보가 저장됨
@ViewChild 선언 방법

import {ViewChild} from '@angular/core';
@ViewChild(클래스명)변수명: 클래스명;

지시자의 DOM은 화면이 초기화되고 접근할 수 있기 때문에 아래와 같이 사용.

import {ViewChild} from '@angular/core';
@ViewChild(클래스명)
set selector(v:클래스명){
  setTimeout(()=>{.....},0);
}

P.107 참조
예제소스

2. `@ViewChildren` 장식자 이용

@ViewChild는 하나의 엘리먼트 상태를 취하지만, @ViewChildren는 여러 지시자를 한번에 탐색.
선언 방법

@ViewChildren('설명 레이블') 변수명:QueryList<참조변수 자료형>;

QueryList는 변경되지 않는 리스트형, ngFor를 이용해 반복문 사용 가능
P.110 참조
예제소스

3. `@ContentChild` 장식자 이용

다른 곳에서 자신의 태그 사이에 넣어준 요소는 @ContentChild 이다.
선언 방법

@ContentChild(클래스명)변수명:클래스명;

P.113 참조
예제소스

4. `@ContentChildren` 장식자 이용

여러개의 지시자 정보를 관리
선언 방법

@ContentChildren(클래스명)변수명:클래스명;

P.115 참조
예제소스

컴포넌트 상호 작용

Wed, 19 Apr 2017 12:00:00 +0000

Angular2 스터디 발표 자료
컴포넌트간 상호 작용방법을 학습
- 중첩 컴포넌트
- Input 장식자를 이용한 데이터 전달
- Inputs 속성을 이용한 데이터 전달
- EventEmitter를 이용한 데이터 전달

1. 중첩 컴포넌트

한개의 컴포넌트가 여러개의 컴포넌트를 포함하고 있으면 중첩 컴포넌트라 함
깊이에 따라 부모, 자식, 손자 … 이라 칭함

2. 중첩 컴포넌트 생성

손자컴포넌트 grandson.component.ts 생성
자식컴포넌트 child.component.ts 생성
부모컴포넌트 parent.component.ts 생성
모듈 등록
적용 및 확인

1. 손자 컴포넌트 생성
> /hello-ng2/src/app/grandson.component.ts

import { Component } from '@angular/core';

@Component({
  selector : 'nested-grandson',
  template : '<div>손자</div>',
  styles : ['div{border: 1px solid; width : 65%; height : 65%;}']
})
export class NestedGrandsonComponent{

}

2. 자식 컴포넌트 생성
> /hello-ng2/src/app/child.component.ts

import { Component } from '@angular/core';

@Component({
  selector : 'nested-child',
  template : '<div>자식<nested-grandson></nested-grandson></div>',
  styles : ['div{border :1px solid; width : 75%; height : 75%;}']
})
export class NestedChildComponent{

}

3. 부모 컴포넌트 생성
> /hello-ng2/src/app/parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector : 'nested-parent',
  template : '<div>부모<nested-child></nested-child></div>',
  styles : ['div{border: 1px solid; width : 85%; height : 85%;}']
})
export class NestedParentComponent{

}

4. 모듈 등록
> /hello-ng2/src/app/app.module.ts
...
import { NestedParentComponent } from './parent.component';
import { NestedChildComponent } from './Child.component';
import { NestedGrandsonComponent } from './grandson.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    NestedParentComponent,
    NestedChildComponent,
    NestedGrandsonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent,HelloComponent,NestedParentComponent]
  ...

5. 적용 및 확인
> ng serve
http://localhost:4200

3. Input 장식자를 이용한 값 받기

@Input() 장식자를 사용하기 위해선 core에 있는 Input을 임포트 해야함.
부모 컴포넌트에서 자식 컴포넌트에게 값을 보내면 자식 컴포넌트는 @Input() 장식자를 이용하여 값을 받음.
@Input() 장식자는 외부에서 값을 받아올때 사용.
부모 컴포넌트에서 자식 컴포넌트에 값을 전달 할 때는 [자식 컴포넌트에 정의된 변수명]=’전달할 값이 저장된 변수 명’ 의 형식으로 사용

4. Input 장식자 실습

자식 컴포넌트 data-child.component.ts 생성 및 @Input 장식자를 이용하여 값을 받도록 class확장
부모 컴포넌트data-parent.component.ts 생성 및 자식 장식자에 값 전달
모듈 등록
적용 및 확인

1. 자식 컴포넌트 생성

import { Component,Input } from '@angular/core';

@Component({
  selector : 'data-child',
  template : '<div>parentName : {{name}} </div>'
})
export class DataChild{
  @Input() name:string;
}

2. 부모 컴포넌트 생성

import { Component } from '@angular/core';

@Component({
  selector : 'data-parent',
  template : '<div>data @input : <data-child [name]="parentName"></data-child> </div>'
})
export class DataParent{
  parentName = "부모님이시다.";
}

3. 모듈 등록
...
import { DataParent } from './data-parent.component';
import { DataChild } from './data-child.component';

@NgModule({
  declarations: [
  ...
    DataParent,
    DataChild
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [..., DataParent]

4. 적용 및 확인
> ng serve
http://localhost:4200

더 자세한 사항은 P.99 참조

5. inputs 속성을 이용하여 값 받기

다른 모든것은 @Input() 장식자를 이용할 때와 같다.
다른점은 값을 받는 자식 컴포넌트의 @Component 설정에 inputs : [‘값을 받을 변수명1’,’변수명2’…] 의 형식으로 받으면 된다.

import { Component,Input } from '@angular/core';

@Component({
  selector : 'data-child',
  template : '<div>parentName : {{name}} </div><div> inputs1 : {{inputs1}}, inputs2 : {{inputs2}} </div>',
  inputs : ['inputs1','inputs2']
})
export class DataChild{
  @Input() name:string;
}

6. EventEmitter 를 이용한 값 전달

자식 컴포넌트에서 부모 컴포넌트로 값을 보낼때는 @Output() 장식자로 선언한 변수를 EventEmitter 로 초기화한다.
부모에게 보낼 시점에 EventEmitter로 초기화한 변수의 emit() 메서드를 사용해 부모 컴포넌트로 이벤트를 전달한다.
core에 있는 Output, EventEmitter를 임포트 해야한다.

7. EventEmitter 실습

버튼 클릭시 랜덤 숫자를 부모에게 전달하는 자식 컴포넌트 event-emitter-child.component.ts 생성.
자식 컴포넌트에서 발생한 숫자를 받아 표시할 부모 컴포넌트event-emitter-parent.component.ts 생성.
모듈 등록
적용 및 확인

1. 자식 컴포넌트 생성

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector : 'event-child',
  template : '<button (click)="sendNumber()">전달</button>'
})
export class EventEmitterChild{
  @Output() outEventEmitter: EventEmitter<number> = new EventEmitter<number>();

  sendNumber(){
    let randNum = Math.floor(Math.random() * 6) + 1;
    this.outEventEmitter.emit(randNum);
  }
}


2. 부모 컴포넌트 생성

import { Component } from '@angular/core';

@Component({
  selector : 'event-parent',
  template : '<div>{{randNum}}<event-child (outEventEmitter)="outEvent($event)"></event-child></div>'
})
export class EventEmitterParent{
  randNum = 0;
  outEvent(randNum:number){
    this.randNum = randNum;
  }
}


3. 모듈 등록
...
import { EventEmitterParent} from './event-emitter-parent.component';
import { EventEmitterChild} from './event-emitter-child.component';

@NgModule({
  declarations: [
  ...
    EventEmitterParent,
    EventEmitterChild
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [...,EventEmitterParent]

4. 적용 및 확인
> ng serve
http://localhost:4200

소스확인

컴포넌트 기초 실습

Tue, 18 Apr 2017 12:00:00 +0000

Angular2 스터디 발표 자료
컴포넌트 사용은 크게 다음 두가지 과정을 거침
- 컴포넌트 추가
- 컴포넌트를 모듈에 등록

1. 컴포넌트 추가

컴포넌트 네이밍 규칙

name.component.ts
name-other.component.ts

컴포넌트 구조

import { component } from '@angular/core'

@Component({
  selector : 'ComponentName',
  template : 'HTML 템플릿',
  styles : ['div{background:blue;}']
})
export class ComponentClass{
  component 로직
}

2. 컴포넌트를 모듈에 등록

어플리케이션 모듈 파일(app.module.ts)을 열어 어플리케이션 시작시 사용할 컴포넌트 등록
declarations 속성에 임포트한 컴포넌트를 선언

...
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    HelloComponent
  ],
  ...
})
export class AppModule { }

3. 실습

angular-cli 설치
프로젝트 생성
컴포넌트 생성
컴포넌트 등록
적용 확인

1. angular-cli 설치
> npm install -g @angular-cli

2. 프로젝트 생성
> ng new hello-ng2
> cd hello-ng2

3. package.json 수정
> 현재 angular4버전이 나와서 기본 모듈이 4버전으로 되어있으니 책에나온 버전으로 변경 2.0.2 router만 3.0.2

4. 컴포넌트 생성
> /hello-ng2/src/app/hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector : 'hello-component',
  template : '<div>{{title}}</div>',
  styles : ['div{border:1px solid;}']
})

export class HelloComponent{
  title = 'Hello Angular2';
}

5. 컴포넌트 등록
> /hello-ng2/src/app/app.module.ts
.....
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

6. 실행 및 확인
> hello-ng2/ng serve
http://localhost:4200