MoonEDM :: 작업일지(2)

MEAN stack/MoonEDM App 2017. 2. 8. 08:10


이전에 작성했던 포스팅의 작업일지대로 개발해보았습니다 


기본적으로 MEAN stack 기반으로 개발하였고 개발기간은 널널하게 일주일정도 잡았습니다 





메인 페이지입니다 


DJ , tracklist 로 구분을 나누어서 트랙 단일로 검색시 트랙리스트로 검색을 하도록 했습니다 


tracklist



DJ 페이지




이미지 클릭시  모달 로딩화면 입니다 







클릭시 해당유튜브의 영상과 다운로드버튼을 배치해두었습니다


깃헙 0.1v기준입니다 


기본 적인 틀만 우선 개발을 했습니다 


이번주나 다음주내에


개인 사용자별 메모장(?) 겸 입력 페이지를 추가해서  트랙리스트목록들을 붙여 넣은후 배치를 돌려서 다운을받거나 링크를 걸어


주는 페이지를 만들 예정입니다 



깃허브 : https://github.com/choy1379/MoonEDM

DEMO : https://moonedm.herokuapp.com



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

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(1)  (0) 2017.02.01
MoonEDM :: 0 시작  (0) 2017.01.25
WRITTEN BY
내가달이다
,

JavaScript :: async.forEachOf

ASP.NET MVC/JavaScript 2017. 2. 1. 21:58

비동기가 항상 발목을 잡아버리네요 ... 


이전에 포스팅을 했던 콜백헬  http://moonna.tistory.com/14  의 연장선이라고 보시면 편합니다


이전에는 단순히 async.waterfall 을 이용해 순차적으로 실행을해줬습니다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
        async.waterfall([
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                 console.log(scheduleId)
                                                 //next_result 없을때 값처리해야됨
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
cs


실행순서는 


"next result3" > done > "next result4" > done > "next result5" > done


이런식으로 진행됩니다 


위의 async.waterfall 을 배열의 인덱스 값만큼 반복 시켜주려면 어찌해줘야 하나 고민하다 stackoverflow 에 해결책이 있었습니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var async = require('async')
var users = ['a','b','c']
 
async.forEachOfLimit(users, 1, function(user, index, cb) {
 
    console.log(index + ': ' + user)
 
    async.waterfall([
        function(callback) {
 
           // add something function
 
            callback(null);
        }
    ], function (err, result) {
        console.log(index + ": done")
        cb()
    });
 
}, function() {
    console.log('ALL done')
})
cs



배열의 값만 큼 순차적으로 비동기통신이 되었습니다 




'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

MoonEDM :: 작업일지(1)

MEAN stack/MoonEDM App 2017. 2. 1. 07:39

현재까지의 작업일지를 작성해볼까합니다.


대략적인 홈페이지를 기획하기위해 Axure 을 사용했습니다 



HOME



홈 페이지 부분입니다 


search DJ 부근에 원하는 DJ 를 입력후 검색을 하면 해당DJ 의 플레이 리스트목록을 다음화면에서 보여줍니다 



SEARCH



검색을 한후 목록들을 보여주는 페이지 입니다 


PlayList


플레이리스트의 트랙내용을 보여주는 화면 입니다 


아래는 간단한 실행모습과 데모 페이지입니다 



http://e7chh9.axshare.com/#g=1&p=playlistdj

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

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 0 시작  (0) 2017.01.25
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
내가달이다
,

spookyJS :: 오류(1) tiny-jsonrpc

MEAN stack/SNS Crawler App 2017. 1. 27. 02:56

새로 프로젝트를 하면서 이전에 사용한 SpookyJS 를 npm 을 이용하여 설치후 


테스트 데이터를 넣은후 실행을 해보았다 


하지만 ...




이와 같이 오류가 계속 발생하는것이다 특별한 작업을 수행하지도 않았는데 말이다 ... 


구글링을해보아도 안나오길레 삽질을한결과 .. 


tiny-jsonrpc  이놈을 설치해 주니 정상동작 한다.. 아 이것때문에 30분날렸습니다 


npm install tiny-jsonrpc   


설치해주면 끝 

'MEAN stack > SNS Crawler App' 카테고리의 다른 글

인스타그램,트위터 크롤러 :: 인스타그램 selector 수정  (3) 2017.07.12
유튜브,트위터 크롤러 :: 배열 데이터 순서 랜덤  (9) 2017.01.08
CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
WRITTEN BY
내가달이다
,

MoonEDM :: 0 시작

MEAN stack/MoonEDM App 2017. 1. 25. 03:28

평소에 EDM 을 즐겨듣습니다 그런데 .. 사운드클라우드를 이용하다보니 실시간으로 듣기는편한데


데이터도 많이 나가고 배터리 소모도 심하고  EDM 같은경우 노래 제목이궁금한경우도잇는데


사이트를 들어가서 해당 DJ 의 라이브셋을 들어가 몇분몇초의 곡을 찾아서 유튜브나 사클에서 들어보고 다운받고 


이러는게 너무귀찮은겁니다...


그래서.. 이걸 한번에 해결하려는 어플리케이션을 만들어 볼까합니다 


대략적인 기능은


해당 DJ의 라이브셋과 그안에 포함된 곡들을 들을수있고 다운로드하고 그후 저만의 DJ 라이브셋을 모아보려합니다


기본적으로 MEAN Stack 을 사용하고 필요에따라 IONIC 하이브리드앱을 만들생각이구요



다음포스팅에는 대략적인 UI 을 작성일지겸 포스팅하려합니다

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

DEVLOG_function.js  (0) 2017.06.20
MoonEDM :: 벅스뮤직 + 아티스트앨범 추가  (0) 2017.03.09
MoonEDM :: 작업일지(3)  (0) 2017.02.18
MoonEDM :: 작업일지(2)  (0) 2017.02.08
MoonEDM :: 작업일지(1)  (0) 2017.02.01
WRITTEN BY
내가달이다
,