요 며칠 상당히 놀랄 만한 프로젝트들이 올라 오고 있어서 눈독을 들이고 있었는데, 하루만에 제 맘을 바꾼 프로젝트가 올라 왔네요.

CanonicalLtd/react-native
_react-native - A framework for building native apps with React._github.com

2016/08/04 Editor’s choice

Canonical은 뭐하는 회사?

Ubuntu를 만들고 배포하는 회사구요, 깃헙에서 CanonicalLtd라는 그룹으로 활동중에 있습니다.

Canonical | The company behind Ubuntu
_Canonical produces Ubuntu, provides commercial services for Ubuntu’s users, and works with hardware manufacturers…_www.canonical.com

React-Native는 뭐?

Facebook에서 React라는 UI프레임워크를 만들었습니다. 여기서 유명한 컨셉이 Virtual DOM과 state 관리 및 flux같은 개념이 있는데 이런 컨셉을 그대로 사용하면서 iOS와 안드로이드 앱을 네이티브로 만들 수 있는 혁신적인 툴을 개발 했는데 그것이 React-Native 입니다.

React Native | A framework for building native apps using React
A framework for building native apps using Reactfacebook.github.io

그래서 뭘 한다구요?

이후 똑같은 컨셉으로 React-Native-Desktop 같은 프로젝트들이 많이 만들어 지고 있었습니다. 즉 React-Native 를 사용해서 윈도우즈, Mac에서 돌아가게 할 수 있도록 하자. 뭐 이런 녀석들입니다.

ptmt/react-native-desktop
_react-native-desktop - React Native for macOS_github.com

그리고 MS 블로그에 이런 글이 올라 왔습니다.

React Native on the Universal Windows Platform
_Today, Microsoft and Facebook announced at Facebook’s developer conference, F8 2016, that we’re adding Universal…_blogs.windows.com

이제 Linux만 남았네. 하는 시점에 지금 리뷰하는 시각 하루전에 folk가 따진게 해커 뉴스에서 이슈가 되었고 7시간 전에 대망의 Readme 파일 커밋이 이루어집니다.

Update README * CanonicalLtd/react-native@f84120a
_Correct URL of git repo. - Mention supported Ubuntu variants._github.com

해커 뉴스에서는 한참 말이 오고 가고 있네요.

React Native for Ubuntu | Hacker News
_With React-Native, there was no reason to implement a component called Div. Instead, the authors created one called…_news.ycombinator.com

Readme 파일 5줄로 깃헙 커뮤니티를 이렇게 흔든 프로젝트가 많았나 싶네요.

By Keen Dev on August 4, 2016.

Exported from Medium on May 31, 2017.

Social media 에 정보를 공유하는 아이콘을 가지고 만든 프로젝트는 워낙 많이 봐 와서 질리신다구요? 오늘 소개하는 프로젝트는 깜짝 놀랄만큼 빠르게 동작하면 React 컴포넌트화 되어 있어서 너무나도 손쉽게 사용할 수 있습니다. 게다가 강조하는게, No JavaScript. No tracking.

그냥 링크 걸고 HTML만 작성하도록 되어 있습니다.

2016/08/03 Editor’s choice

mxstbr/sharingbuttons.io
_sharingbuttons.io - Quickly generate social sharing buttons with a tiny performance footprint_github.com

말이 더 필요할까요. 바로 샘플 페이지를 확인해 보겠습니다.(이미지를 클릭하면 페이지로 이동합니다)

이쁜 예제네요. 감각 있습니다.

왼쪽의 옵션들을 클릭하다보면 오른쪽 버튼의 배열들이 보여지고 클릭하면 share 할 수 있는 옵션으로 넘어가는데 너무도 순식간에 빨리 넘어 갑니다. 말그대로 super fast!

설치

$git clone [https://github.com/mxstbr/sharingbuttons.io.git][anchor3]   
$cd sharingbuttons.io   
$npm install

실행

$npm start

이후 위의 이미지와 똑같은 화면이 나타납니다.

코드구조

형태는 대강 보면 flux 아키텍쳐를 가지고 있습니다.

Generator를 통해 버튼을 만들고 클릭하면 실제 실행이 되도록 설계가 되어 있습니다.

flux 아키텍쳐니까 AppStore.js 파일을 살펴 봐야겠죠?

mxstbr/sharingbuttons.io
_sharingbuttons.io - Quickly generate social sharing buttons with a tiny performance footprint_github.com

medium이 코드를 raw코드에 대해서도 gist 처럼 보여주면 얼마나 좋을까요?

data[“network”][“facebook”] 형태의 JSON데이타를 가지고 있습니다.

이렇게 저장된 Store를 가지고 HTML을 만들고 클릭했을 때에

와 같은 형태의 링크로 동작하게 되는 메커니즘으로 동작하는 거죠.

재미있는 발상의 좋은 소스입니다~

By Keen Dev on August 3, 2016.

Exported from Medium on May 31, 2017.