본문으로 건너뛰기

Full Stack JavaScript Developer | Half-time Open Sourcerer.

모든 저자 보기

D3 Word Cloud

· 약 2분

d3 와 d3-cloud 를 사용해 R 의 Word Cloud 를 javascript 로 구현해보자.

설치​

## npm
$ npm install d3
$ npm install d3.layout.cloud
## bower
$ bower install d3
$ bower install d3-cloud

예제​

소스​

<script src="/bower_components/d3/d3.min.js"></script>
<script src="/bower_components/d3-cloud/build/d3.layout.cloud.js"></script>

<script>
var fill = function (i) {
return d3.schemeCategory20b[i];
};
var layout = d3.layout
.cloud()
.size([500, 500])
.words(
[
"텍스트",
"마이닝",
"샘플",
"좋아요",
"R",
"Word",
"Cloud",
"text",
"mining",
].map(function (d) {
return { text: d, size: 10 + Math.random() * 90, test: "haha" };
}),
)
.padding(5)
.rotate(function () {
return ~~(Math.random() * 2) * 90;
})
.font("Impact")
.fontSize(function (d) {
return d.size;
})
.on("end", draw);

layout.start();

function draw(words) {
d3.select("body")
.append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr(
"transform",
"translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")",
)
.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", function (d) {
return d.size + "px";
})
.style("font-family", "Impact")
.style("fill", function (d, i) {
return fill(i);
})
.attr("text-anchor", "middle")
.attr("transform", function (d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function (d) {
return d.text;
});
}
</script>

d3-cloud의 예제소스는 nodejs 환경에서만 돌릴 수 있어 모든 웹에서 예제를 사용할 수 있게 수정했다.

결과​

image from hexo

Facebook Graph API를 활용한 Page 글쓰기

· 약 2분

페이스북 모듈 연동​

window.fbAsyncInit = function () {
FB.init({
appId: "앱 키",
xfbml: true,
version: "v2.8",
});
};
(function (d, s, id) {
let js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");

Page 권한 얻기 (선택)​

앱공개를 한 뒤 페이스북 개발자 > 앱 검수 에서 publish_pages, manage_pages 권한을 부여해야한다.

FB.login(
function (login_result) {
if (login_result.status === "connected") {
// 여기에 3번 로직을 넣으면 된다.
} else if (login_result.status === "not_authorized") {
alert("페이스북 인증에 실패했습니다");
} else {
alert("페이스북 API 호출에 실패했습니다");
}
},
{ scope: "publish_pages,manage_pages" },
);
// 이 두 권한이 꼭 필요하다

해당 Page 관리자 권한 얻기​

페이지 아이디가 필요한데, 내 페이지로 이동하면 뒤에보이는 주소 번호가 있다. 또는 페이지 아이디를 여기서 주소로 검색해보자

FB.api(
"/나의 페이지 아이디/",
"GET",
{ fields: "access_token" },
function (token_result) {
// token_result.access_token 이 페이지 관리자로 글을 쓰기 위해 필요하다
// 여기에 4번 로직을 넣으면 된다.
},
);

Page Feed 작성​

Graph API 를 사용해 피드를 작성한다. 자세한 옵션 설정은 API 문서를 참조하자.

FB.api(
"/my page id/feed",
"POST",
{
access_token: token_result.access_token,
message: "내용",
link: "링크 걸 주소",
picture: "링크 이미지",
name: "링크 제목",
description: "링크 설명",
caption: "링크 하단 캡션",
},
function (page_result) {
if (page_result && !page_result.error) {
// 여기에 성공시 로직을 넣는다.
}
},
);

소스​

FB.login(
function (login_result) {
if (login_result.status === "connected") {
getFbAccessToken();
} else if (login_result.status === "not_authorized") {
alert("페이스북 인증에 실패했습니다");
} else {
alert("페이스북 API 호출에 실패했습니다");
}
},
{ scope: "publish_pages,manage_pages" },
);

function getFbAccessToken() {
FB.api(
"/나의 페이지 아이디/",
"GET",
{ fields: "access_token" },
function (token_result) {
postFbPage(token_result);
},
);
}

function postFbPage(token_result) {
FB.api(
"/나의 페이지 아이디/feed",
"POST",
{
access_token: token_result.access_token,
message: "내용",
link: "링크 걸 주소",
picture: "링크 이미지",
name: "링크 제목",
description: "링크 설명",
caption: "링크 하단 캡션",
},
function (page_result) {
if (page_result && !page_result.error) {
alert("성공");
}
},
);
}

여담​

OAuth 및 RESTful 의 개념이 잡혔다면 쉽게 접근할 수 있을듯 Graph API 로 모든 페이스북 API 이용이 가능한 것 같다.

hexo jsfiddle tag를 호출하지 못하는 현상

· 약 1분

공식 문서에 따르면 jsFiddle tag의 사용법은 이렇다.

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

shorttag는 URL 창에서 바로 보여질 수도 있지만 그렇지 않을경우 Save 또는 Update 버튼을 누르면 나오는 Embed 메뉴에서 확인할 수 있다. image from hexo

문제점​

https인 github.io에서 http로 jsfiddle을 호출해서 차단된다.

해결​

node_module\hexo\lib\plugins\tag\jsfiddle.js 파일의 jsfiddle 치환 함수를 변경한다.

function jsfiddleTag(args, content) {
const id = args[0];
const tabs =
args[1] && args[1] !== "default" ? args[1] : "js,resources,html,css,result";
const skin = args[2] && args[2] !== "default" ? args[2] : "light";
const width = args[3] && args[3] !== "default" ? args[3] : "100%";
const height = args[4] && args[4] !== "default" ? args[4] : "300";

// http://jsfiddle.net > //jsfiddle.net
return (
'<iframe scrolling="no" width="' +
width +
'" height="' +
height +
'" src="//jsfiddle.net/' +
id +
"/embedded/" +
tabs +
"/" +
skin +
'" frameborder="0" allowfullscreen></iframe>'
);
}

Highchart 기본 사용법

· 약 2분

D3.js 로 그래프를 만들 수 있지만 더 사용성이 좋은 highchart 로 데이터를 시각화해보자

설치​

## npm
$ npm install highcharts --save
## yarn
$ yarn add highcharts

highcharts.min.js와 modules/exporting.js, themes/grid-light.js 를 가져온다. 아니면 CDN을 사용해도 된다.

<script src="/bower_components/highcharts/highcharts.js"></script>
<script src="/bower_components/highcharts/modules/exporting.js"></script>
<script src="/bower_components/highcharts/themes/grid-light.js"></script>

기본 예제​

홈페이지에 나와있는 예제는 다음과 같다.

  • title : 제목
  • subtitle : 소제목
  • xAxis : X 축
  • YAxis : Y 축
  • tooltip : Y 축의 제목
  • legend : X 축의 범례
  • series : 차트 데이터

기본 예제로도 차트를 만들 수 있지만 업무에 사용하려면 비동기로 데이터가 갱신될 때마다 차트도 다시 그려져야한다. 세부 옵션은 API 문서를 참조하자.

Redraw 예제​

div#chart에 차트를 그린다고 가정한다.

소스​

Highcharts.setOptions({
lang: {
// 전체보기 버튼을 한글로 바꾼다
resetZoom: "전체보기",
},
});

const chartCallback = function (data) {
let chart = $("#chart").highcharts();

if (chart) {
// 차트가 있을경우 제거한다.
chart.destroy();
}

if (data) {
const categoriesData = []; // 여기에 x축 데이터를 넣는다.
const seriesData = {}; // 여기에 data를 파싱해 y축 구조를 만들어준다.

const options = {
chart: {
renderTo: "chart", // 다시 그려질 영역 설정
zoomType: "x", // X축이 줌인이 가능하게 설정
panning: true,
panKey: "shift",
},
title: {
text: null,
},
xAxis: {
categories: categoriesData,
},
yAxis: {
min: 0, // 0이상의 값만 표기
allowDecimals: false, // 정수로만 표기
title: {
text: null,
},
labels: {},
},
credits: {
text: "Graceful Light", // 로고 표시
href: "https://gracefullight.github.io", // 로고 클릭시 URL
},
tooltip: {
// hover시 나오는 tooltip
shared: true, // 하나의 영역을 공유
pointFormatter: function () {
if (this.y >= 0) {
// 표시되는 tooltip을 마음대로 설정
return (
'<span style="color:' +
this.series.color +
';">●</span> ' +
this.series.name +
": " +
"<b>" +
Utils.comma(this.y) +
"</b><br/>"
);
}
},
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
},
legend: {
borderWidth: 0,
},
series: seriesData,
};

chart = new Highcharts.Chart(options);
chart.redraw();
} else {
$("#chart").html("no data");
}
};

redraw 를 이용할 때 new Highcharts.Chart를 사용해야한다. categories 와 series 의 모양을 만들어줄 때는 lodash 를 사용해야 편하다.

결과​

image from hexo

대안​

  • Chart.js
  • E Charts
  • tui Chart
  • Chartist.js

Windows10 Onedrive 바로가기 해제

· 약 1분

Windows10 을 쓰다가 어느순간 보면 탐색기에서 Onedrive 메뉴가 생긴 것을 볼 수 있다. image from hexo

심지어 Windows10 Anniversary Update 가 되어있다면 모르는 사이에 동기화가 연결되어 있을 수도 있다.

동기화는 리소스를 잡아먹고 개인컴퓨터가 아닌 곳에서는 접근하면 안되니 여간 거슬리는 게 아니다.

설정에 들어가도 해제옵션이 없고, MS 도움말에는 기본기능이라 해제가 불가능하다고 나온다.

없애보자.

해결​

  1. 삭제프로그램을 다운받는다.
  2. 압축을 풀고 uninstaller.cmd를 관리자권한으로 실행한다.

여담​

오픈소스라 믿고 사용해도 된다.

Windows10 바탕화면 변경 및 사진적용이 안될 때

· 약 1분

Windows10에서 사진파일로 바탕화면 변경을 해도 적용이 안될 때가 있다. 오로지 단색으로만 화면을 변경할 수 있는데 해결해보자

해결​

제어판 이동​

시작 > 우클릭 > 제어판 image from hexo

접근성 센터 이동​

보기 기준에서 작은 아이콘 보기로 변경하면 접근성 센터 메뉴가 보인다. image from hexo

컴퓨터를 보기 쉽게 설정​

컴퓨터를 보기 쉽게 설정 메뉴로 들어간다. image from hexo

배경 이미지 제거 옵션 해제​

화면의 항목을 읽기 쉽도록 표시 영역에서 **배경 이미지 제거(사용할 수 있을 경우)**의 옵션을 해제해준다. image from hexo

바탕화면 이미지 변경​

바탕화면 > 우클릭 > 개인설정에서 바탕화면을 변경해준다.

sublime text ConvertToUTF8 Package 단축키 변경

· 약 1분

실수로라도 Ctrl+Shift+C 키를 누르면 소스가 GBK 중국어 인코딩으로 바뀌어 저장된다. 이 단축키의 기본 설정을 UTF-8로 변경해보자.

해결​

패키지 경로 이동​

C:\Users\사용자 폴더\AppData\Roaming\Sublime Text3\Packages\ConvertToUTF8 image from hexo

기본 설정파일 변경​

Default (Windows).sublime-keymap 파일을 열고 아래와 같이 수정한다.

[
{
keys: ["ctrl+shift+c"],
command: "convert_to_uft8",
args: { encoding: "UTF-8", stamp: 0 },
},
];

또는 파일 내용을 날려버려도 된다.

Visual Studio 콘솔창 유지

· 약 1분

VS에서 코딩 후 빌드를 하면 콘솔창이 결과를 보여주자마자 닫히는 경우가 있다. 수동으로 닫을 때까지 콘솔창이 유지되게 해보자.

해결​

프로젝트 > 속성 > 구성 속성 > 링커 > 시스템 메뉴에 들어가 하위시스템 옵션을 콘솔로 변경한다. image from hexo

Can't connect to localhost

· 약 1분

웹서버를 크롬에서 띄울시 localhost 가 요청되지 않는 경우가 있다. DNS 에 문제가 있어 연결할 수 없다는 에러가 나온다.

해결​

Chrome > 설정 > 개인정보 메뉴에서 네트워크 활동을 예측하여 페이지 로드 성능 개선 기능을 해제한다. image from hexo