react-music

⊂\_ヽ   
\\ Λ_Λ   
\( 'ㅅ' ) 두둠칫   
\> ⌒ヽ   
/ へ\   
/ / \\   
レ ノ ヽ\_つ   
/ /두둠칫   
/ /|   
( (ヽ   
| |、\   
| 丿 \ ⌒)   
| | ) /   
\`ノ ) Lノ

역시 코드 wrap 으로 보니 그나마 제대로 보이는군요.

오늘은 react-music 이 깃헙 대세 프로젝트입니다.

2016/08/29 Editor’s choice

제가 오늘 이 프로젝트를 알게 된 것은 Dan Abramov의 트윗 때문이었습니다.

따라 따라 들어가 보니 react-music이라는 프로젝트를 formidable labs 에서 내 놓았습니다.

FormidableLabs/react-music
_react-music - Make beats with React!_github.com


설치

repository clone -> npm install -> npm start

$git clone [https://github.com/FormidableLabs/react-music.git][anchor3]

$npm install

$npm start

실행

음악이 들리는 거 같죠?

실행을 시키면 위의 그림과 같이 그래프가 움직이면서 음악이 나옵니다.

Dan의 샘플러 소스는 다음과 같습니다.

audio-contour라는 프로젝트가 핵심 프로젝트입니다.

danigb/audio-contour
_audio-contour - A 5 stage audio envelope generator_github.com

Create oscillatores - Web Audio Assembler
_Edit description_danigb.github.io

demo.js를 잘 살펴보면

FormidableLabs/react-music
_react-music - Make beats with React!_github.com

악기를 wav파일로 지정해 두고 음악을 연주할 수 있도록 하는 형태입니다.

조만간 react-midi가 나오겠네요~

By Keen Dev on August 28, 2016.

Exported from Medium on May 31, 2017.

openMCT

NASA의 클래스를 보여주는 프로젝트가 깃헙에 올라 왔습니다. NASA야 최고의 과학자들이 모이니까! 라고 흘려 버릴 수도 있지만 상당히 재미있는 프로젝트입니다.

일종의 대시보드를 만들고 같이 볼 수 있는 페이지입니다.

2016/08/24 Today’s Best

nasa/openmct
_openmct - A web based mission control framework._github.com


openMCT?

깃헙페이지를 방문해 보면 openMCT에 대한 소개가 있습니다.

차세대 mission control framework이라고 하는군요. NASA에서 임무를 수행할때 사용될 프레임워크에 contribution 할 수 있다니 가슴이 뛰지 않나요?

일단 데모페이지를 헤로쿠에 올려놓아서 가보도록 하겠습니다.

오호. 이런 일이 가능하다니욧. 호호호.

일단은 데모페이지는 animated gif군요.(헐 낚시왕 김NASA)


설치 및 실행

링크 클릭

git clone [https://github.com/nasa/openmct.git][anchor3]

npm install

npm start

지금은 에러가 나서 최신 release된 commit 버전으로 checkout 받아서 다시 실행시키니 통과가 됩니다.

$git checkout acc1b8e207365b80dc3082386a97c9e349654fcd

$npm install

$npm start

그랬더니 다음과 같은 창이 뜨는군요. 좀 만져 봤습니다.

즉, NASA의 mission을 수행할 수 있는 작업들과 그 task들을 수행할 수 있는 그래프와 URL리소스들을 배치할 수 있고 그것들을 대시보드로 같이 볼 수 있는 역할을 하고 있습니다.

소스 구성

gulp파일을 따라 main.js 파일을 따라가면

nasa/openmct
_openmct - A web based mission control framework._github.com

angular기반으로 프레임워크는 구성이 되어 있음을 알 수 있습니다. 전체 MVVW 프레임워크는 angular이고, jquery대신에 zepto를 사용했네요. 통계를 그리기 위해서는 csv파일을 사용한 듯 싶습니다.

UI 컴포넌트들은 각각 NASA에서 만들고, 그것들을 오픈소스화 한 개념입니다.

예를 들어 다이알로그의 경우는

nasa/openmct
_openmct - A web based mission control framework._github.com

처럼 컴포넌트화 했고 README파일도 훌륭하게 빠져 있습니다.

NASA프로젝트에 contribution 하고 싶은 프론트엔드 개발자에게는 지금이 절호의 찬스가 되겠군요. 다만~ Angular 능력자여야 할 거 같다는 생각은 드는데, 어떻습니까? 오타를 찾아도 contributor 인데 한번 도전해 봐도 나쁘지 않을 거 같네요.

By Keen Dev on August 23, 2016.

Exported from Medium on May 31, 2017.