'MEAN stack/Angular2'에 해당하는 글 11건

MVVM 패턴

MEAN stack/Angular2 2017. 5. 23. 17:08




http://plposer.tistory.com/23 어댑터 패턴 외부 클래스

사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다.

사용자가 웹사이트에 접속한다. (Uses)
Controller는 사용자가 요청한 웹페이지를 서비스 하기 위해서 모델을 호출한다. (Manipulates)
모델은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴한다.
Controller는 Model이 리턴한 결과를 View에 반영한다. (Updates)
데이터가 반영된 VIew는 사용자에게 보여진다. (Sees)



http://yubylab.tistory.com/entry/디자인-패턴-for-javascript-Module-Pattern

'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: socket.IO-Stream in Angular2  (0) 2017.05.11
Angular2 :: socket.IO in Angular2  (0) 2017.04.05
Angular2 :: @ngrx/store  (0) 2017.02.18
Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Jquery 사용법  (0) 2017.01.24
WRITTEN BY
내가달이다
,

Angular2 :: socket.IO-Stream in Angular2

MEAN stack/Angular2 2017. 5. 11. 13:47

오랜만에 글 올리네요 5월에 쉬는날도많고 헤이해져서 글을 올리지못했습니다 


지난 글은 socket.io 를 설치해 간단한 통신을 해보았습니다 

지금 만들고 있는 개인프로젝트 같은경우는 mp3 파일을 다운을 할필요없이 youtube 에서 mp3 를 추출해 

실시간 스트리밍을 할예정입니다


이를 위해 우선 youtube 영상을 다운받는 모듈은 ytdl 이 대표적인데 저는   youtube-audio-stream 을 사용해볼까합니다 



https://github.com/jameskyburz/youtube-audio-stream 

 



Youtube-audio-stream 모듈을 이용하면 ytdl 을 이용해 ffmpeg 코드를 직접코딩할필요없이 youtube영상에서 음원을 추출한후


스트리밍해줍니다



Server Side





ss.createStream() -> 스트림을 생성해준다

ss(socket).on(‘PlayTrack’) -> Client side 에서 PlayTrack 호출시 실행된다 



Client Side





var url = URL.createObjectURL(ms)

Blob URL 주소를 생성해준다 

payload.stream.on ‘data’ -> Server Side 에서 stream data 를 받는다 

SourceBuffer.appendBiffer(data) -> 버퍼에서 받은 stream data 를 할당해준다 



'MEAN stack > Angular2' 카테고리의 다른 글

MVVM 패턴  (0) 2017.05.23
Angular2 :: socket.IO in Angular2  (0) 2017.04.05
Angular2 :: @ngrx/store  (0) 2017.02.18
Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Jquery 사용법  (0) 2017.01.24
WRITTEN BY
내가달이다
,

Angular2 :: socket.IO in Angular2

MEAN stack/Angular2 2017. 4. 5. 10:18

최근 socket.io 를 사용할일이있었는데 설치하는데 애를 먹어서 포스팅을 남깁니다


1) socket.io 를 설치해준다


npm install socket.io --save



지금 하고있는 프로젝트의 케이스는 기존 서버에 소켓서버만 추가를 하고 헤더만 다르게 주워서 필요할때만 소켓 서버를 이용하게 할 생각이다

기존 서버는 express 를 이용해 http post 정도만 사용을 했다 




<소스 : server.js>






<소스 : socketserver.js>


현재 서버에는 포트가 총 3개다 

서버 : 4100 

소켓서버 : 8000

클라이언트 : 3000 


소켓이 연결이 되었을때 

User Connected 로그를 남겨주도록했다  서버 실행후 localhost:8000 으로 connect 시켜주면


끝


이였으면 좋겠지만 angular2 에서 import 에서 사용할려고 하니 문제가 발생헀다 socket.io를 인식을 못하고있다..


구글링 결과 

npm install --save @types/socket.io


이놈을 설치해주어야 클라이언트 <--> 서버간 통신이된다


다음포스팅은 socket.io-stream 을 이용한 mp3 파일 스트리밍을 해볼생각입니다


기존 offliberty 가 동시사용제한이있는거같네요 .... 



'MEAN stack > Angular2' 카테고리의 다른 글

MVVM 패턴  (0) 2017.05.23
Angular2 :: socket.IO-Stream in Angular2  (0) 2017.05.11
Angular2 :: @ngrx/store  (0) 2017.02.18
Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Jquery 사용법  (0) 2017.01.24
WRITTEN BY
내가달이다
,

Angular2 :: @ngrx/store

MEAN stack/Angular2 2017. 2. 18. 13:07

@ngrx/store 프레임워크를 소개해볼까합니다 .. 


구글에 검색을 해보면 영문으로 자세한소개랑 사용예제들은 나와있지만 한국어로 사용법이나 메카니즘 설명같은것이부족해 


공부하면서 적어보려고한다


공식 깃허브의 document 인용합니다 https://gist.github.com/btroncone/a6e4347326749f938510



Angular 2의 출현으로 새로운 프레임 워크의 기능과 기능으로 새로운 패턴, 모범 사례 및 라이브러리가 생겨났는데 그중에 하나가 


@ngrx/store 입니다 


 Angular 위에 성능이 뛰어나고 일관된 응용 프로그램을 작성할 수 있도록 설계된 제어 된 상태 컨테이너입니다


핵심 개념이 3가지가있는데  reducers, actions, and a single application store 이 세가지가 있다 


응용프로그램을 설계할떄 1스토어 계약을 체결함으로써 어느지점에서든 스토어의 스냅샷은 해당응용 프로그램 상태를 완전히


표시합니다 이는 사용사 상호작용 , 디버깅및 angular2 에서 매우 강력하게 작용합니다 






1. Reducer


이벤트와 관련된 형식 및 선택적 데이터(페이 로드)입니다 이전 상태와 관련된 데이터 및 옵션과 관련된 2개의 인수를 수용합니다



1
2
3
export interface Reducer<T> {
  (state: T, action: Action): T;
}
cs


2. Actions


이 프로세스는 작업이 완료될 때마다 발생하며, 응용 프로그램 상태가 시간이 지남에 따라


완전한 응용 프로그램 상태를 변경할 수 있게 합니다.


1
2
3
4
export interface Action {
  type: string;
  payload?: any;
}
cs



Dispatched Action Pipeline



1
2
//action with an associated payload
dispatch({type: ADD_TODO, payload: {id: 1, message: 'Learn ngrx/store', completed: true}})
cs



@ngrx/store 에 대해 간단하게 알아보았습니다 구글번역도움을 맞아서 말이이해가안될수도있습니다 ... 


자세하게 보실려면 깃허브 documnet 참고 하시면될거같습니다


다음 포스팅은 데모 예제와 실제 코딩된 예제에 대해 포스팅하겠습니다 


'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: socket.IO-Stream in Angular2  (0) 2017.05.11
Angular2 :: socket.IO in Angular2  (0) 2017.04.05
Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
WRITTEN BY
내가달이다
,

Angular2 :: 'unsafe value' exception

MEAN stack/Angular2 2017. 2. 1. 07:13

새로 프로젝트하면서 iframe 태그 src ="" 안에 ngfor 데이터를 넣어야될 상황이생겼다


1
 <iframe id="{{res.iframe}}" width="100%" height="100%" src="{{res.src}}"></iframe>
cs



실행을 해보니 


Error: unsafe value used in a resource URL context


이런 에러를 뱉어내는것이아닌가.. 이것때문에 삽질했습니다 뭐가 잘못된건지 .... 


다행히 구글링을해서 해결했습니다 



1
import {DomSanitizer} from "@angular/platform-browser";
cs

1
constructor(private domSanitizer : DomSanitizer)
cs

1
   this.pdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(res.iframe);
cs


컴포넌트에 임포트 시켜줍시다



1
 <iframe id="{{res.iframe}}" width="100%" height="100%" [src]="this.pdfUrl">
cs


그후 위와 같이 변경후 실행해주니 정상적으로 URL 주소를 읽어옵니다




'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: socket.IO in Angular2  (0) 2017.04.05
Angular2 :: @ngrx/store  (0) 2017.02.18
Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
WRITTEN BY
내가달이다
,

Angular2 :: Jquery 사용법

MEAN stack/Angular2 2017. 1. 24. 16:15

Angular2 를 공부하다가 제이쿼리를 사용할일이 생겨서 어떻게 적용해야되나 찾다보니 


stackoverflow 를 찾아서 해결했습니다 



How to use jQuery with Angular2?



1
declare var jQuery:any;
cs

1
$.ajax
cs

angular2 controller 단에  jQuery 또는 $ 라고 선언해주고 사용하면 간단히 끝난다




'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: @ngrx/store  (0) 2017.02.18
Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
WRITTEN BY
내가달이다
,