r2fresh-blog - Tumblr blog

r2fresh-blog · 8 years ago

Text

Learn to Create D3.js Data Visualizations by Example

원본 : https://www.sitepoint.com/d3-js-data-visualizationsD3 공부하기 좋은 자료 인거 같아 개인적으로 쓸 요량으로 번역하였습니다. 링크 또는 다른곳에 옮기지 말아 주시기 바랍니다.^^

A Bar Chart

See the codepen

나는 HTML의 humble bar chart로 만드는 것은 document의 D3 transforms data를 이해하는 가장 쉬운 방법이며 William Playfairs charts보다 더 좋은 것을 약속한다. 여기를 보자.

d3.select('#chart') .selectAll("div") .data([4, 8, 15, 16, 23, 42]) .enter() .append("div") .style("height", (d)=> d + "px")

selectAll 함수는 D3 “selection”을 return 한다 : elements의 array은 우리는 enter와 append는 각 데이터 point위해 div 만들었다.

이 code maps은 [4, 8, 15, 16, 23, 42]은 들어오고, HTML로 나온다.

변경되지 않은 style properties의 모든 것은 CSS에서 할 수 있다.

#chart div { display: inline-block; background: #4285F4; width: 20px; margin-right: 3px; }

Github’s Contribution Chart

코드 몇개를 추가하면 우리는 Github와 비슷한 contribution chart를 bar chart로 만들 수 있다.

const colorMap = d3.interpolateRgb( d3.rgb('#d6e685'), d3.rgb('#1e6823') ) d3.select('#chart') .selectAll("div") .data([.2, .4, 0, 0, .13, .92]) .enter() .append("div") .style("background-color", (d)=> { return d == 0 ? '#eee' : colorMap(d) })

colorMap 함수는 0과 1 사이의 값을 입력하고, 제공하는 두가지 사이에 컬러 그라데이션중 하나를 return한다. Interpolation은 programming과 animation의 키 도구 이다. 우리는 나중에 더 많은 예제에서 볼것이다.

An SVG Primer

D3의 힘의 대부분은 SVG롤 작업 하는 것에서 진심으로 나온다. circles, polygons, paths text와 같은 2D graphics를 그리기 위한 태그를 포함하는 것

코드를 보면

circle는 좌표 50,120에 20의 반지름이다.

text는 좌표 100,100에 “Hello SVG”이다.

triangle는 3px의 선에 다음과 같은 instruction attribute이다.

100,10으로 이동

150,70까지 선을 긋고

다시 50,70까지 선을 긋고

path를 닫아라

<path>는 SVG의 대부분 파워풀한 엘��먼트이다.

Circles

See the codepen

이전의 예제의 데이터 설정은 간단한 숫자의 배열을 가지고 했다. D3는 또한 더 복잡한 타입으로 작업을 할 수 있다.

const data = [{ label: "7am", sales: 20 },{ label: "8am", sales: 12 }, { label: "9am", sales: 8 }, { label: "10am", sales: 27 }]

각 데이터의 포인트는 #chart에 (group) element를 추가하고, 를 추가하고, 우리의 객체에서 속성들을 <text> elements에 추가할 것이다.

const g = d3.select('#chart') .selectAll("g") .data(data) .enter() .append('g') g.append("circle") .attr('cy', 40) .attr('cx', (d, i)=> (i+1) * 50) .attr('r', (d)=> d.sales) g.append("text") .attr('y', 90) .attr('x', (d, i)=> (i+1) * 50) .text((d)=> d.label)

변수 g는 <g> node의 배열을 포함한 d3”selection”을 잡고, selection에서 각 아이템을 새로운 element에 추가하는 append()와 같은 활동이다.

Line Chart

SVG에서 line chart를 그리는 것은 굉장히 간단하다. 우리는 아래와 같이 데이터를 transform을 원한다.

const data = [ { x: 0, y: 30 }, { x: 50, y: 20 }, { x: 100, y: 40 }, { x: 150, y: 80 }, { x: 200, y: 95 } ]

이 문서에서

y의 값은 SVG는 top이 값이 0이기 때문에 원하는 값으로 y를 설정하려면 100에서 원하는 숫자를 빼면 원하는 곳에 표시가 된다.

단순한 path elements이다. 우리는 이와 같은 코드를 우리 자신이 만들 수 있다.

const path = "M" + data.map((d)=> { return d.x + ',' + (100 - d.y); }).join('L'); const line = `<path stroke-width="2" d="${ path }"/>`; document.querySelector('#chart').innerHTML = line;

D3는 이것을 단순하게 만드는 path generating 함수가 있다. 아래를 보자

const line = d3.svg.line() .x((d)=> d.x) .y((d)=> 100 - d.y) .interpolate("linear") d3.select('#chart') .append("path") .attr('stroke-width', 2) .attr('d', line(data))

Scales

Scales는 domain을 넣고 range가 나오는 함수이다.

See the codepen

에제에서 우리가 지금까지 본것은 경계가 고정적��것이다. 하지만 그래프의 경계가 고정적이지 않고 변경이 된다면, 차트도 경계에 맞게 포지션이 변경 되어야 한다.

다음의 데이터를 500x200에서 line chart로 렌더링 해본다면

const data = [ { x: 0, y: 30 }, { x: 25, y: 15 }, { x: 50, y: 20 } ]

d3.max를 이용하여 최대값을 찾는 것이다. 또한 domain은 이러한 최대값을 사용하여 차트 경계가 변경 되었을때, 거기에 맞게 차트를 변경한다.

const width = 500; const height = 200; const xMax = d3.max(data, (d)=> d.x) const yMax = d3.max(data, (d)=> d.y) const xScale = d3.scale.linear() .domain([0, xMax]) // input domain .range([0, width]) // output range const yScale = d3.scale.linear() .domain([0, yMax]) // input domain .range([height, 0]) // output range

아래는 실제 값과 경계 안에서의 값을 보여준다.

xScale(0) -> 0 xScale(10) -> 100 xScale(50) -> 500

xScale(-10) -> -100 xScale(60) -> 600

이러한 것을 우리는 line generating function을 에서 scales를 이용할 수 있다.

아래는 경게면 안에 padding을 주는 방법이다.

const padding = 20; const xScale = d3.scale.linear() .domain([0, xMax]) .range([padding, width - padding]) const yScale = d3.scale.linear() .domain([0, yMax]) .range([height - padding, padding])

지금 우리는 동적인 데이터 셋으로 렌더링 할수 있고, 우리의 line chart에 500px / 200px의 경계에 안에 모두 20px padding을 넣을 것이다.

Linear scales는 대부분은 공토의 타입이다. 하지만 exponential scalesd의 POW와 names 또는 categories와 같은 representing non-numeric data ordinal scales 같은 다른 것이 있다. 추가적으로 Quantitative Scales와 Ordinal Scales 그리고 date ranges mapping을 위한 Time Scales도 있다.

예를 들어 우리는 0부터 500까지 사이의 숫자에서 나의 lifespan maps의 scale를 만들 수 있다.

const life = d3.time.scale() .domain([new Date(1986, 1, 18), new Date()]) .range([0, 500]) // At which point between 0 and 500 was my 18th birthday? life(new Date(2004, 1, 18))

Animated Flight Visualization

우리는 잘하고 좋았지만 지금까지 우리는 고정적인 생동감이 없는 그래픽만 했다. visualization 한 에니메이션을 만드어 보자 Australia에서 Melbourne와 Sydney를 활발하게 날라 다는 것을 보여주자

See the codepen

graphic의 이 타입에서 SVG document는 text, lines 그리고 circles로 만들어져 있다.

동적인 부분은 항공기 그룹안의 시간과 element이고 데이터는 이와 같이 볼수 있다.

let data = [ { departs: '06:00 am', arrives: '07:25 am', id: 'Jetstar 500' }, { departs: '06:00 am', arrives: '07:25 am', id: 'Qantas 400' }, { departs: '06:00 am', arrives: '07:25 am', id: 'Virgin 803' } ]

동적인 시간을 위한 x position을 얻고 우리는 우리의 차트에서 x position에 출발시간과 도착시간 각 비행기를 위한 time scale 만드는 것이 필요하다. 우리는 Date 객체와 scales를 추가하길 시작하면서 우리의 데이터를 통해 반복할 수 있다. Moment.js는 date parsing 과 manipulatio를 여기많이 도울수 있다.

data.forEach((d)=> { d.departureDate = moment(d.departs, "hh-mm a").toDate(); d.arrivalDate = moment(d.arrives, "hh-mm a").toDate(); d.xScale = d3.time.scale() .domain([departureDate, arrivalDate]) .range([100, 500]) });

우리는 각 항공기를 조정하기 위해 x를 얻기 위한 xScale()를 우리의 변화된 Date를 통과 할 수 있다.

Render Loop

출발과 도착 시간은 5분동안 돌고 그래서 우리는 첫번째 출발과 마지막 도착에서 5m증가하는 통해 단계를 할 수 있다.

Enter, Update and Exit

D3는 다음과 같은 경우 일때 엘리먼트의 transformation과 transitions가 명시되어 있다.

New data points come in (Enter)

Existing data points change (Update)

Existing data points are removed (Exit)

const render = function(data, time) { // render the time d3.select('.time') .text(moment(time).format("hh:mm a")) // Make a d3 selection and apply our data set const flight = d3.select('#chart') .selectAll('g.flight') .data(data, (d)=> d.id) // Enter new nodes for any data point with an id not in the DOM const newFlight = flight.enter() .append("g") .attr('class', 'flight') const xPoint = (d)=> d.xScale(time); const yPoint = (d, i)=> 100 + i * 25; newFlight.append("circle") .attr('class',"flight-dot") .attr('cx', xPoint) .attr('cy', yPoint) .attr('r', "5") // Update existing nodes in selection with id's that are in the data flight.select('.flight-dot') .attr('cx', xPoint) .attr('cy', yPoint) // Exit old nodes in selection with id's that are not in the data const oldFlight = flight.exit() .remove() }

Transitions

이 코드는 5분간 500ms frame을 render한다.

시간을 업데이트

모든 비행기 원에서 새 비행기 그룹을 만든다.

현재 비행기의 x/y 위치를 업데이트 한다.

그들이 도착하면 비행기 그룹을 삭제한다.

이 작업은 그러나 무엇이 우리는 정말 원하는지 부드러운 transition을 프레임들의 각 사이를. 우리는 D3 selection으로 transition을 만드는 것을 달성할 수 있고 속성과 스타일 속성을 설정하기전에 easing function와 duration을 제공한다.

예는, 비행기 그룸들의 투명도를 페이드 하는 것��다.

const newFlight = flight.enter() .append("g") .attr('class', 'flight') .attr('opacity', 0) newFlight.transition() .duration(500) .attr('opacity', 1)

비행기가 나갈때 fade out 하자

flight.exit() .transition() .duration(500) .attr('opacity', 0) .remove()

x 와 y 포인트 사이에 부드러운 transition을 추가

flight.select('.flight-dot') .transition() .duration(500) .ease('linear') .attr('cx', xPoint) .attr('cy', yPoint)

우리는 5분 증가 사이에 또한 transition을 할 수 있고, tween 함수를 사용하여 매 5분 보다 매분을 display 할수 있다.

const inFiveMinutes = moment(time).add(5, 'minutes').toDate(); const i = d3.interpolate(time, inFiveMinutes); d3.select('.time') .transition() .duration(500) .ease('linear') .tween("text", ()=> { return function(t) { this.textContent = moment(i(t)).format("hh:mm a"); }; });

t는 0과 1 사이의 transition이 진행중인 값이다.

Be Creative

이 아티클보다 더 많은 라이브러리가 있다. 몇가지 예제중에 dig를 가자 좋아 하지만, 아래의 것을 적어 놓자

Polar Clock

Force Layouts

Geography & Projections

Voronoi Tessellation

Prim’s Algorithm V

OMG Paricles 2

D3 Gallery에는 더 많은 예제가 있다. 만약에 배우길 원한다면 Scott Murray’s D3 Tutorials와 D3 documentation을 이용하길 바란다.

#D3 #data visualization #javascript #library #learn

1 note · View note

r2fresh-blog · 8 years ago

Text

아이나비 블랙박스 FXD900 응급복구방법

우선 블랙박스 전원을 끝다.

메모리 칩을 빼고, 컴퓨터에 연결하여 포멧을 진행한다.

그리고 아이나비에서 FXD900 응급복구 프로그램을 다운 받는다. (링크는 나중에 바뀔수도 있다.)

다운로드한 압출파일을 풀고, FXD900 MACH (응급복구_1.00.18버전 전용)의 폴더 안에 있는 파일을 메모리 칩에 복사한다.

차로 이동하여 블랙박스에 메모리 칩을 넣고, 전원을 연결한다.

10분에 15분정도 기다린다.(녹색 -> 녹색깜박 -> 녹색, 빨간색, 파란색 번갈아가면 나옴 -> 파란불이 들어오고 완료)

파란불이 들어오면 메모리 복구가 완료 된 것이다.

#FXD900 #아이나비 #블랙박스

0 notes

r2fresh-blog · 8 years ago

Text

Clean Code with ES6 Default Parameters & Property Shorthands

이것은 제가 공부하면서 번역을 한 내용입니다. 번역이 정말 엉망이지만 저만 알아볼 수 있으면 된다고 생각해서 ^^ 혹시 원본을 보시 오역이나 더 좋은 번역은 알려주시면 변경하겠습니다. 또한 개인 적인것이기 때문에공유는 안 하셨으면 합니다. 혹시 또 번역을 보시고 문제를 제시 하시면 바로 삭제 하도록 하겠습니다.원본 : https://www.sitepoint.com/es6-default-parameters/

ES6 Default Parameters

우리의 지식을 빠르게 신선하게 하고, 다시 구문을 살펴보자. 기본 파라미터에 기본 값으로 함수를 초기화 하는 것을 우리는 허락한다. default는 arguments가 omitted 이거나 undefined일때 사용되어 진다. 이것의 의미에 null은 유효한 값이다. 기본 파라미터는 숫자에서 다른 함수까지 할 수 있다.

// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); // 10 // Default parameters are also available to later default parameters function foo (num = 1, multi = multiply(num)) { return [num, multi]; } foo(); // [1, 2] foo(6); // [6, 12]

A Real World Example

기본 함수를 만들고, default parameters가 개발의 속도와 코드의 더 잘 구성 할수 있는 방법을 입증해 보자

우리의 예제 메소드는 createElement()를 불려진다. 몇가지 configuration arguments 가지고, HTML elements를 returns 한다. API는 이와 같이 본다.

// We want a <p> element, with some text content and two classes attached. // Returns <p class="very-special-text super-big">Such unique text</p> createElement('p', { content: 'Such unique text', classNames: ['very-special-text', 'super-big'] }); // To make this method even more useful, it should always return a default // element when any argument is left out or none are passed at all. createElement(); // <div class="module-text default">Very default</div>

이 구현은 많이 하지 않지만, 기본적은 범위에서 상당히 커질 수 있다.

// Without default parameters it looks quite bloated and unnecessary large. function createElement (tag, config) { tag = tag || 'div'; config = config || {}; const element = document.createElement(tag); const content = config.content || 'Very default'; const text = document.createTextNode(content); let classNames = config.classNames; if (classNames === undefined) { classNames = ['module-text', 'default']; } element.classList.add(...classNames); element.appendChild(text); return element; }

자 살펴보자 무엇일까?

매개변수 tag 와 config에 기본값을 설정하고, 그것들이 통과되지 않는 경우

실제로 컨텐츠를 지속적으로 만들 수 있다.

만약에 classNames가 정의되어지고, 기본적인 배열이 지정되지 않은다는 것을 체크하면

마지작으로 만들어 지고 수정하는 엘리먼트를 우리가 그것을 리턴하기 전에

지금 이 함수를 보면, 깔끔하게 구현되었고, 쓰기도 빠르고, 목적이 무엇인지 더 명백하다.

// Default all the things function createElement (tag = 'div', { content = 'Very default', classNames = ['module-text', 'special'] } = {}) { const element = document.createElement(tag); const text = document.createTextNode(content); element.classList.add(...classNames); element.appendChild(text); return element; }

우리는 함수의 로직은 만지지 않았지만 함수의 내의 모든 기본 조절을 지웠다. 함수의 시그니처는 모든 기본을 포함한다.

나에게 더 나아거 이 파트를 설명하는것은 조용히 혼란스러울지도 모른다.

// What exactly happens here? function createElement ({ content = 'Very default', classNames = ['module-text', 'special'] } = {}) { // function body }

우리는 기본 오브젝트 매개변수를 선언할 뿐 만 아니라, 기본 오브젝트 속성들도 선언한다. 이것은 그것을 말들었다 더 명백히 기본 환경이 보는 것과 같이 제공하는 것을 기본 객체(config={})와 기본 속성을 나중에 설정하는 것보다. 몇가지 추가적인 시간을 보자면 그것을 사용한다면 하지만 그것은 당신의 작업의 흐름을 향상 시킬것이다.

물론 우리는 더 큰 구성을 주장할수 있고 오버해드를 만들수 있지만 그것은 단지 함수 본문의 기본 적인 조절을 하는 것 입니다.

ES6 Property Shorthands

메소드가 변수 만큼 큰 구성 객체에 수용 한다면, 코드는 상당히 크게 될 수 있다. 그것은 몇개의 변수들을 준비하는 것이 일반적이다. 그리고 오브젝트를 추가한다. Property shorthands는 syntactic sugar이다. 이 단계는 짧고 더 읽어어야 한다.

Shorten Your API

Okay, 다른 뒤에, 더 일반적인 예제이다. 다음 함수는 몇가지 데이터를 가지고, 그것을 변화시키고 다른 메소드를 호출한다.

종종 우리는 변수의 이름과 객체 속성의이름을 같게 한다. property shorthand는 이것을 이용하여, 합친다. 우리는 우리의 코드의 큰 것을 짧게 할수 있다.

결과적으로 자바스크립트의 새로운 기능중의 하나이다. 코드는 빠르게 도와주고 함수는 내용은 깔끔하게 된다.

// Instead of writing the function keyword everytime, const module = { foo: 42, bar: function (value) { // do something } }; // we can just omit it and have shorter declarations const module = { foo: 42, bar (value) { // do something } };

Conclusion

Default parameters와 property shorthands는 당신의 메소드를 더 잘 구성하는 좋은 방법이고, 몇개의 경우는 짧은 것에서도. 전반적으로, default function parameters는 산만하지 않지 않게 메소드를 목표에 맞도록 기본적으로 준비하는 것이다. 만약 진술에

아마도 shorthands는 사실 컽치레 기능에 하나이지만 모든 변수들을 쓰는데 적어도 생산적인것을 찾을 수 있다. 객체의 구성, 그리고 함수의 키워드 이다.

벌써 default parameters 와 property shorthans를 사용하나?

#default Parameters #Property Shorthands #ES6

0 notes

r2fresh-blog · 8 years ago

Text

CSS/UI Framworks : 10 Bootstrap alternatives

원본 : http://blog.webkid.io/css-frameworks-bootstrap-alternatives/개인적으로 개발에 편리함을 위해 번역을 하였습니다. 문제가 생긴다면 갑자기 삭제 될 수 있으며, 보는 것은 상관없지만 공유는 하지 말아 주시기 바랍니다.

Bulma

Bulma는 flexbox와 SASS 기반이다. web site 또는 web app을 만들기 위한 모든것을 제공한다.grid system, single elements 그리고 더 복잡한 컴포넌트들을 가지고 있다. javascript는 포함되지 않았고, 만약 modal을 만들기 원한다면, 당신이 구현한 것을 제안 해야 한다.

Installation

npm install bulma

Documentation

Bulma on Github

License MIT

uikit

Uikit은 LESS와 SASS 기반이다. buttons, form element 그리고 navigation bars는 기본으로 ��공되지만 while scrolling은 예제는 자바스크립트의 trigger이벤트의 도움이 필요하다.

Installation

npm install uikit

Documentation

uikit on Github

License : MIT

Materialize

이름이 암시하듯이 Material Design concept의 look and feel 을 따르고 있다. Materialize는 버튼 또는 폼 엘리먼트와 modal 또는 paralax effects와 같은 자바스크립트에 의존적인 복잡한 것으로 되어있다. 또한 “drag out menu” or “swipe to dismiss” 알림을 만들기 위한 모바일 도움도 있다.

Installation

npm install materialize-css

Documentation

Materialize on Github

License:MIT

MUI

MUI 또한 Google’s Material Design의 가이드 라인을 따르고 있다. React, Angular, WebComponents 또는 HTML Email framework 에도 가능한 것이다. 문서에서는 극단적인 hackability이라고 말한다. 나는 아직 그것을 시도하지는 않았다. 그러나 당신이 필요하다면 가능한 기능이다.

Installation

npm install muicss

Documentation

NUI on Github

License: MIT

PURE

PURE는 Yahoo에서 만들었다. 매우 기본적인 element뿐이며 가벼운 framework 이다. 그것은 ‘Base’, ‘Grid’, ‘Forms’, ‘Buttons’, ‘Tables’ and ‘Menus’ 으로 결정된다. 당신은 이 패키지의 모든 것을 사용할수 있고, 또 당신의 어플리케이션에서 필요한것들을 로드할수 있다.

Installation:

npm install purecss

Documentation

PURE on Github

License : MIT

Cardinal

Cardinal은 좋은 시작 포인트이다. 그것은 “남은 것은 디자인과 당신이 만드는 것이다” 라고, 기본 스타일과 팬시 컴포넌트가 아닌 것 뿐이다. 그것은 첫번째 모바일과 플랫시블한 그리드 시스템이다.

Installation :

npm install cardinalcss

Documentaion

Cardinal on Github

License : MIT

BASE

BASE는 HTML 템플릿과 Livereload와 함께 gulp 설정과 image 최적화를 당신은 사용할 수 있다. framework는 SCSS가 기본이고, Javascript를 포함하지 않는다. CSS Animation 라이브러리를 위해 Animate.css를 포함이 되어 있다. BASE는 fancy UI elements는 없지만 좋은 그리드 시스템으로 solid foundation과 많은 helper classes가 있다.

Installation:

npm install getbase

Documentation

BASE on Github

License : MIT

Tacit

Tacit는 특별하다. 그것은 자기자신을 호출한다. “임시적인 CSS Framework” 그것은 classes를 사용하지 않기 때문에 그러나 스타일은 HTML elements이다. 예를 들어(<input\> of <button>)

Installation:

No npm package here :/

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://yegor256.github.io/tacit/tacit.min.css"/> </head> </html>

Documentation

Tacit on Github

License: MIT

Milligram

Milligram은 “minimalist CSS framework” 이다. 자바스크립트의 기능은 포함되어 있지 않다. UI framework는 아니지만 당신의 website/web app을 위한 더 좋은 시작 kit이다.

Installation:

npm install milligram

Documentation

Milligram on Github

License : MIT

Semantic UI

Semantic UI는 크다. 당신이 많은 기능의 프레임워크를 찾는다면 이것은 사용할 만 하다. 다양한 테마에서 단순한 엘리먼트와 컴포넌트뿐만 아니라 뷰와 모듈도 제공한다. 당신은 필요한 것만 버전을 테마화 하여 빌드도 할 수 있다.

Installation

npm install semantic-ui

Documentation

Semantic UI on Github

License : MIT

충분하지 않은가?

나는 github 레파지토리 “frontend stuff“에서 frontend libraries와 framework를 collecting 한다.거기에는 더 많은 CSS와 UI frameworks 또한 찾을 것이다. 당신이 만약 궁금한 것이 있다면 나에게 twitter 또는 당신 섹션에 댓글을 사용할 수 있다.

#Bootstrap #css #ui #ui framework #javascript #bootstrap alternatives

0 notes

r2fresh-blog · 8 years ago

Text

Datepicker component is used Bootstrap 3

Bootstrap 3 Datepicker

link : http://eonasdan.github.io/bootstrap-datetimepicker/

github : https://github.com/Eonasdan/bootstrap-datetimepicker

Bootstrap-datetimepicker

link : https://tarruda.github.io/bootstrap-datetimepicker/

github : https://github.com/tarruda/bootstrap-datetimepicker

Datepicker for Bootstrap

link : http://www.eyecon.ro/bootstrap-datepicker/

Date Range Picker

link : http://www.daterangepicker.com/

github : https://github.com/dangrossman/bootstrap-daterangepicker

#bootstrap #datepicker #bootstrap 3

0 notes

r2fresh-blog · 8 years ago

Text

React UI Libraries

이 개인적은 개발을 하는데 필요하여, 제 나름대로 번역을 한 내용입니다. 보시는 것은 괜찮지만 인용이나 공유는 하지 말아주시기 바랍니다. 또한 원래 블로그 포스트에서 문제를 제시하면 바로 삭제를 할 것입니다. 원 블로그 포스트의 주소는 http://blog.webkid.io/react-ui-libraries/ 입니다.

Grommet

대부분 엔터프라이즈 어플리케이션을 위한 가장 발전된 오픈소스 UX framework 이다.http://www.grommet.io

Grommet는 당신이 당신의 앱에서 필요한 대부분의 공통 컴포넌트를 포함한, 복잡한 UI의 빌딜하는 리치프레임워크이다. Grommet는 개발전 앱에 sketch 디자이너를 위한 다양한 그래픽 포멧의 모든 리소스를 제공한다. 당신은 사용 가능한 예제의 잘 구조화된 문서 또한 찾을 수 있다.

Installation

npm install -g grommet -g gulp

Sample Component:

import React from 'react'; import WorldMap from 'grommet/components/WorldMap'; import '../../../node_modules/grommet/grommet.min.css'; const GrometWorldMap = () => { return ( <WorldMap series={[{continent: , colorIndex: , onClick: }, ...]} /> ); }; export default GrometWorldMap;

Complete Example

Documentation

148 open issues on github

Material UI

구글의 Material Design 형태의 React 컴포넌트 셋트

Material UI 는 아름다운 material 디자인 react 컴포넌트 컬렉션이다. 잘 정리된 문서와 모두 필요한 전형적인 모듈을 찾았다. 길게 테스트를 한 만큼, 확실하게 모바일과 데스크탑 모두를 지원한다. 이전의 UI Framework에서 다른점은 Material UI component는 디폴트로 material ui style theme로 렌더링하는다는 것이다. 최우선은 두가지에서 가능하다. inline style 또는 MUI theme 설정이다.

Installation :

npm install material-ui

Sample Component :

import React from 'react'; import AutoComplete from 'material-ui/AutoComplete'; const libs = ['Material UI', 'Elemental UI', 'Grommet', 'Mui', 'Rebass']; const MaterialEx = () => { return ( <div> <AutoComplete floatingLabelText="Type something ..." filter={AutoComplete.fuzzyFilter} dataSource={libs} maxSearchResults={3} menuStyle={{ background: '#fff' }} /> </div> ); }; export default MaterialEx;

Complete Example

Documentation

148 open issues on github

Elemental UI

Websites 와 Apps의 React.js 를 위한 UI Tookithttp://elemental-ui.com

이전 예제와 달리, elemental은 가벼운 라이브러리이다. grid, css styles과 button, form 또는 modal과 같은 component를 제공한다. 모든 components는 문서화가 잘 되어 있다. 아랫쪽은 설정 단계에서 문서를 불러오지 않는다 그래서 설치는 예상보다 길다.

Installation :

npm install elemental -S less-loader -S less -S react-addons-css-transition-group -S

만약에 웹팩을 사용한다면, 다음과 같이 로더를 이용할수 있다.

{ test: /\.less$/, loader: "style!css!less" }

아래와 같이 컴포넌는 main less file을 Import한다.

Sample Component

import React from 'react'; import { Spinner, Pagination } from 'elemental'; // you need to include the less files and adjust your webpack config in order to load less files import '../../../node_modules/elemental/less/elemental.less'; const ElementalUI = () => { return ( <div> <Pagination currentPage={1} onPageSelect={null} pageSize={25} plural={'Sites'} singular={'Site'} total={150} limit={6} /> </div> ); }; export default ElementalUI;

Complete Example

Documentation

148 open issues on github

Rebass

57개의 설정인 React 독립적인 함수형 UI Componentshttp://jxnblk.com/rebass/

Rebass는 57의 나이스한 component를 제공한다. 어떤 CSS의 의존성 호출과 웹팩의 조절없이 components를 사용할 수 있다. 이것은 다른 라이브러리와 비교하여 사용할 수 있는 정말 안정적인 것이다.components는inline styles 또는 react context 를 통해 고객화 된 독립적인 함수형 react components이다

Installation :

npm install rebass

Sample Component :

import React from 'react'; import { SequenceMap, Switch } from 'rebass'; const RebassEx = () => { return ( <div> <SequenceMap active={1} steps={[{'children: 'Step 1'}, {'children: 'Step 2'}, {'children: 'Step 3'}]} /> <Switch checked /> <label>on | off</label> </div> ); }; export default RebassEx;

Complete Example

Documentation

148 open issues on github

MUI

MUI는 구글 Material Design의 가이드를 기반으로 만든 가벼운 CSS framework이다.https://www.muicss.com

MUI는 webkids 의해 다른 블로그에 벌써 포스트되었다. MUI는 구글 Material Design에 따라 react components만 제공할 뿐만 아니라, angular, wecomponents, iOS, Android, email templates또한 찾울 수 있다. MUI는 디자인 프로세스를 위해 sketch file과 상응하는 것도 제공한다.

Installation :

npm install muicss

Sample Component :

import React from 'react'; // you need to include the css files and adjust your webpack config in order to load css files import '../../../node_modules/muicss/lib/css/mui.min.css'; import { Tabs, Tab, Button, Container } from 'muicss/react'; const MuiEx = () => { return ( <div> <Tabs justified> <Tab value="pane-1" label="Tab 1" /> <Tab value="pane-2" label="Tab 2" /> </Tabs> <Container fluid> <Button color="accent" variant="raised">Click me</Button> </Container> </div> ); }; export default MuiEx;

Complete Example

Documentation

148 open issues on github

만약 더 많은 React UI stuff에 관심이 있다면, official react wiki와 awesome react list를 체크아웃 하자.

#React #react-ui #ui #library #articles

1 note · View note

r2fresh-blog · 8 years ago

Text

Websockets & Server-Sent Events

아래 내용의 출처는 https://www.sitepoint.com/real-time-apps-websockets-server-sent-events/ 이며, 정확한 번역이 아니며, 제가 사용하기 위해 번역한 내용입니다.읽고 참곤는 가능하지만 공유는 하지 말아주시기 바랍니다.

WebSockets

먼저 Command창에 아래의 코드를 입력한다.

git clone https://github.com/r2fresh/websocket-demo.git cd websocket-demo npm install npm start

브라우저에서 localhost:8080을 입력하면 서버에서, 3초에 한번씩 Hello hello!을 보내준다.각 Client와 Server의 소스코드는 아래와 같다.

Client

// Open a connection var socket = new WebSocket('ws://localhost:8081/'); // When a connection is made socket.onopen = function() { console.log('Opened connection 🎉'); // send data to the server var json = JSON.stringify({ message: 'Hello 👋' }); socket.send(json); } // When data is received socket.onmessage = function(event) { console.log(event.data); } // A connection could not be made socket.onerror = function(event) { console.log(event); } // A connection was closed socket.onclose = function(code, reason) { console.log(code, reason); } // Close the connection when the window is closed window.addEventListener('beforeunload', function() { socket.close(); });

Server

브라우저 호환성

현재 Opera mini만을 빼고 최근 업데이트 된 브라우저에서는 모두 지원을 하고 있으며, 보다 자세한 내용은 아래의 링크를 참고 하면 된다.

http://caniuse.com/#feat=websockets

디버깅

디버깅은 Chrome과 같은 경우 inspect에서 Network > WS > Frams에서 확인이 가능하며, Firefox는 Websocket Monitor addon을 사용하여 가능하다.

Server-Sent Events

SSE로 위의 WebSocket와 같은 기능을 구현해 보도록 하겠습니다.

먼저 아래와 같이 설치를 합니다.

git clone https://github.com/r2fresh/server-sent-events-demo.git cd server-sent-events-demo npm install npm start

브라우저에서 localhost:8080을 입력하면 Websocket과 같이, 3초에 한번씩 Hello hello!을 보내준다. 각 Client와 Server의 소스코드는 아래와 같다.

Client

// Open a connection var stream = new EventSource("/sse"); // When a connection is made stream.onopen = function() { console.log('Opened connection 🎉'); }; // A connection could not be made stream.onerror = function (event) { console.log(event); }; // When data is received stream.onmessage = function (event) { console.log(event.data); }; // A connection was closed stream.onclose = function(code, reason) { console.log(code, reason); } // Close the connection when the window is closed window.addEventListener('beforeunload', function() { stream.close(); });

Server

Sending Events from the Server

Websocket과 같은 경우에는 Client에서 Server로 메세지를 보내는 API가 있지만 SSE같은 경우에는 따로 존재하지 않는다. 하지만 기존의 Ajax를 사용하여 Client에서 Server로 메세지를 전송할 수 있다.

아래는 간단한 server와 Client의 소스 코드이다.

Server

http.createServer(function(req, res) { // Open a long held http connection res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // Send data to the client var json = JSON.stringify({ message: 'Hello 👋' }); res.write("data: " + json + "\n\n"); }).listen(8000);

Client

document.querySelector('#send').addEventListener('click', function(event) { var json = JSON.stringify({ message: 'Hey there' }); var xhr = new XMLHttpRequest(); xhr.open('POST', '/api', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(json); log('Sent: ' + json); });

브라우저 호환성

SSE 경우 WebSocket보다 지원브라우저가 적지만, 다행히 Polifill for EventSource를 사용하여 사용이 가능하다. 지원 가능 브라우저 목록은 아래의 링크를 참고하면 된다.

http://caniuse.com/#feat=eventsource

디버깅

디버깅 경우 크롬에서 Network > XHR > EventStream에서 확인하고 디버깅이 가능하다.

Conclusion

이번 글에서만 보면 WebSocket이 더 좋아 보이는 기능인듯 하지만, 실시간 브라우저간의 통신이 아니라면 SSE를 사용하는 것이 더 나을 수도 있다. WebSocket은 채팅과 같은 경우에서 사용하고, SSE는 주식과 같이 서버에서 던져주는 것을 바로 실시간으로 보이는 곳에서 사용하는 것이 좋을듯 하다.

#WebSocket #SSE #Server Send Event #javascript #실시간 #통신 #실시간통신

0 notes

r2fresh-blog · 8 years ago

Link

Shorthand generator methods 관련내용 링크

#shorthand generator #shorthand #generator

0 notes

r2fresh-blog · 8 years ago

Text

When ‘not’ to use arrow function

아래의 내용은 http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ 를 바탕으로 arrow function을 사용 시 주의 하기위해 번역을 한 내용입니다.향후 원문의 블로그 사용자의 요청으로 문제가 생긴다면 포스트 한것을 지우도록 하겠습니다.또한 sns에는 공유는 하지 않았습니다. 이점 확인 하시고 절대 따로 복사하여 배포는 하지 않으셨으면 합니다.

ECMAScript 6(ECMA2015)에서 표준으로 정해진 arrow function을 사용하지 말아야 하거나 또는 사용하면 가독성이 떨어지는 몇가지 예를 알아 보도록 하자

1. Object의 정의

Object literal

아래의 소스 코드와 같이 Object literal 방식에서 property를 함수 형태로 정의 시 arrow function으로 정의 하기데 되면 arrow function의 this가 해당 Object가 아닌 window가 되어 원하는 결과가 나오지 않을 수 있다.

var calculate = { array: [1, 2, 3], sum: () => { console.log(this === window); // => true return this.array.reduce((result, item) => result + item); } }; console.log(this === window); // => true // Throws "TypeError: Cannot read property 'reduce' of undefined" calculate.sum();

위의 소스코드를 보면 this와 window는 같다는 결과가 나왔으며, calculate.sum()은 TypeError를 발생한다.위와 같은 것은 function expression 또는 shorthand syntax를 사용하여 해결을 할수 있다.

var calculate = { array: [1, 2, 3], sum() { console.log(this === calculate); // => true return this.array.reduce((result, item) => result + item); } }; calculate.sum(); // => 6

위와 같이 calculate와 this는 같은 것을 되어 calculate.sum()는 원하는 결과를 얻게 된다.

Object prototype

Object의 prototype과 같은 경우에도 발생을 한다. 아래와 같이 arrow function을 사용하며 this는 window와 같게 되며, 월하는 결과를 얻지 못하게 된다.

function MyCat(name) { this.catName = name; } MyCat.prototype.sayCatName = () => { console.log(this === window); // => true return this.catName; }; var cat = new MyCat('Mew'); cat.sayCatName(); // => undefined

위와 같은 소스코드는 shorthand syntax로는 수정이 불가능 하며, function expression(함수표현식)으로 수정하면 된다.

function MyCat(name) { this.catName = name; } MyCat.prototype.sayCatName = function() { console.log(this === cat); // => true return this.catName; }; var cat = new MyCat('Mew'); cat.sayCatName(); // => 'Mew'

2. Callback functions with dynamic context

arrow function은 dynamic context인 경우에도 사용이 불가능 하다. this로 인해 객체에 접근이 안되기 때문이다. 아래와 소스코드는 이벤트가 발생할때 실행하는 callback function를 arrow function으로 작성을 했다. 이렇게 되면 this가 이벤트를 발생시킨 타켓이 되지 않기 때문에 이벤트 발생시 함수가 제대로 실행이 되지 않는다.

var button = document.getElementById('myButton'); button.addEventListener('click', () => { console.log(this === window); // => true this.innerHTML = 'Clicked button'; });

이것은 아래와 같이 function expression(함수표현식)으로 변경하여야 실행이되고 this도 이벤트를 발생시킨 target이 된다.

var button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log(this === button); // => true this.innerHTML = 'Clicked button'; });

Invoking constructors

생성자 함수에서도 arrow function 은 typeError를 발생한다. 소스코드를 보면 TypeError가 발생된다.

var Message = (text) => { this.text = text; }; // Throws "TypeError: Message is not a constructor" var helloMessage = new Message('Hello World!');

이것을 해결하기 위하서는 function expression을 사용하여 해결 할 수 있다.

var Message = function(text) { this.text = text; }; var helloMessage = new Message('Hello World!'); console.log(helloMessage.text); // => 'Hello World!'

4. Too short syntax

마지막으로 너무 많은 arrow function의 사용으로 가독성이 떨어지는 경우이다.아래의 소스코드는 심플하고 간단하지만 이해하는데 약간의 시간이 걸린다.그것은 curly braces으로 작성되었다.

let multiply = (a, b) => b === undefined ? b => a * b : a * b; let double = multiply(2); double(3); // => 6 multiply(2, 3); // => 6

이러한 경우는 심플한 것 보다 협업을 위해 코드를 이해하기 쉽도록 변경하는 것이 좋다.

function multiply(a, b) { if (b === undefined) { return function(b) { return a * b; } } return a * b; } let double = multiply(2); double(3); // => 6 multiply(2, 3); // => 6

위의 소스코드는 장황하고 짧은 소스코드를 균형이 맞게 수정한 것이다.

5.Conclusion

arrow function은 의심할 여지가 없이 좋은 것이다. arrow fuction 단순하면서도 정확한 곳에 가져다 써야 한다. 몇몇 상황의 이익은 다른 곳에 불이익을 가져다 준다. 위에 언급한 곳에서는 arrow function을 사용하지 말아야 한다.

#arrow function #arrow #ECMAScript 6 #ECMAScript2015

0 notes