Skip to main content

109 posts tagged with "javascript"

View All Tags

· 2 min read

Single line

var i,
sum = 0;
for (i = 0; i < 10; ++i, sum += i);

console.log(`${i} ${sum}`);

일반적인 형태

var j,
sum2 = 0;
for (j = 0; j < 10; ++j) {
sum2 += j;
}

console.log(`${j} ${sum2}`);

두 예제의 결과는 어떻게 나올까. 첫번째는 10 55, 두번째는 10 45가 나온다.

설명

i 와 j 의 전위 후위 연산은 별로 중요하지 않다. (++i 나 i++이나 결과는 같게 나온다)

Single line

var i,
sum = 0;
// 1 2 3 4
for (i = 0; i < 10; ++i, sum += i);

console.log(`${i} ${sum}`);

일반적인 형태

var j,
sum2 = 0;
// 1 2 4
for (j = 0; j < 10; ++j) {
// 3
sum2 += j;
}

console.log(`${j} ${sum2}`);

안티패턴의 끝

var k,
sum3 = 0;
// 1 2 4 5
for (k = 0; k < 10; ++k, sum3 += k)
// 3
console.log(`${k} ${sum3}`);

연산의 실행 순서가 다르다고 이해하면 되겠다.

· 2 min read

연번 체크 알고리즘이라고도 하는 것 같다. 통계 또는 비밀번호의 연속성을 체크하기 위해 필요할 때가 있다. 비밀번호 연속성 체크에는 target[j]의 데이터를 charCodeAt 을 붙여 처리하면 된다.

소스

function checkSequenceNumbers(target, counterLength = 6) {
// under es6
// let sequentialCounter = Array.apply(null, Array(counterLength)).map(Number.prototype.valueOf,0);
let sequentialCounter = new Array(counterLength).fill(0);
let count = 0;

for (let i = 0, len = target.length; i < len; i++) {
let subCount = 0;

for (let j = 1; j < len; j++) {
if (target[j] === target[i] + 1) {
subCount = subCount + 1;
} else {
continue;
}
}

count = count + subCount;
if (subCount === 0) {
sequentialCounter[count] = sequentialCounter[count] + 1;
count = 0;
}
}

return sequentialCounter;
}

let target = [1, 2, 3, 5, 6, 7, 8, 10, 11, 13, 16, 17];
console.log(checkSequnceNumbers(target));
// => [1, 2, 1, 1, 0, 0]

설명

n 과 n+1... n+n-1 을 비교해서 카운트한다. 결과는 sequentialCounter 배열에 각 포지션에 들어간다.

2 연속 숫자 1 개가 있다면 sequentialCounter[2] = 1;

여담

왜 이런걸 공유를 안할까?

· One min read

npm으로 npm의 버전을 업데이트 할 때의 명령어는 다음과 같다.

$ npm install -g npm

업데이트 명령 실행 후 오류가 발생한 뒤 npm 명령어가 없다는 경우가 생길 수 있다. 당황하지 말고 아래 명령어를 실행한다.

# 캐시 강제 삭제
$ npm cache clean -f

# npm 다운로드
$ curl http://npmjs.org/install.sh | sh

다시 npm이 설치되어 npm 명령어를 실행할 수 있다.

· One min read

document.querySelector를 사용해 id에 .이 포함된 element를 선택시

<div id="id.has.pariod"></div>
<script>
var $div = document.querySelector("#id.has.pariod");
console.log($div);
// => undefined;
</script>

undefined를 반환하며 선택이 되지 않는다. .(pariod)는 class 선택자라 중복이되어 발생하는 오류이다.

해결

.에 역슬래시를 2개 붙혀 escape 시킨다.

var $div = document.querySelector("#id\\.has\\.pariod");
console.log($div);
// => <div id="id.has.pariod"></div>

· 4 min read

버튼을 눌러 이미지를 다운로드 받고 싶다면 어떻게 해야될까? Client Side 에서 할 수 있는 가장 쉬운 방법은 download attribute를 사용하는 것이다. 하지만 예상했듯이 이 속성은 IE 에서 지원하지 않는다.

For IE

base64

먼저 이미지를 base64 인코딩해야한다. FileReader 또는 Canvas 를 이용해 변환할 수 있는데 stackoverflow 의 명쾌한 답변을 참조하자. jQuery 환경이라면 Reading binary data using jquery ajax를 참조해도 된다.

base64encode 가 된 이미지 데이터가 뽑아지면 시작할 수 있다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2CAAAAADAeSUUAAADN0lEQVR42u3aQY7CMBAEQP7/afaKtEu2exwk4lROKITEZSQGT/vxiI/ny/H7zOv513ffXZl89viad6M6+cDGxsa+CDsZUP5uMqx3d8gntB3nH1ODjY2NvR373S/88TUtMuG1E5qMExsbGxv7eChJUTl+4nP5wMbGxsZu2UlbJy9RyQS1SxpsbGzsu7FXCkPeTkoihGTQeUPqhF4aNjY29tez81T0+19/JN/GxsbG/mL2rHEzi2OTxc968BwpsLGxsTdiz0Lc/I9+voBprzwhhMbGxsbeiN1S2xvNWkuzZtD6aLGxsbGvxW4f0BaqtpU/C4/bhRA2Njb2TuwkTF0ZVn4+/+zKJEb7lbCxsbG3YM9aRe0CJo8NkivzFhU2Njb2ruwW3/71r0vL6FnDXUvY2NjYl2XPAto8mm0LUrIImcUG2NjY2Luy1xv6eTCwMomzAlZPEzY2NvbF2ceDWIld82XJSjjRbsfExsbG3om9EgbkDak2GM5L6bApho2Njb0F+/imeclJWj/t61nwEBU2bGxs7I3Yn2vifKLN1MKKxQk2Njb2ZdlnFYzZ9bMG00rbCxsbG/sO7Lw13261zIvlMXVW5B7tDGFjY2NvwZ4lpDmpLYenXYmNjY29ETv5u5+XkDYYaFtL7ZKm2KmEjY2NfVl2u10mWYS009q2hNoC9scZbGxs7I3YM+SsjJ3V0lqZ3MfKd4uNjY39lexk6Hlkm4fHs40+7dacomhhY2Njb8TOi1MeCZw7oflER1t2sLGxsS/Onq1d2hC3XYq0japZCIGNjY29K7u9Xds8WmlU5SWwiH6xsbGxt2DnP/dthNBS12FFScPGxsbelN02aNrFRh4tzJ5SbO7BxsbGvgE7Aa8EACvlc6X9hI2Njb0T+1keySBmm3jy0Le92z9JCDY2NvbF2W0BOLfwHJ9vW0v1UgQbGxt7I3ZStFbKTLKMab+TZFH0T+SAjY2NvR07b7vP4ti2TK5MSvRcbGxs7Nuz2wfnT1nZalncBxsbG/vG7PWtlmdt5VlpimFjY2Pvx06aRHlBarfs5O3+9ut5u/rAxsbG3og9W1TkxWYWP7T3zBtV2NjY2BuxfwBOAYaS/PUQNQAAAABJRU5ErkJggg==

blob

이제 이미지 데이터를 Blob Object 로 변환해야한다.

// imageSrc는 위의 이미지 데이터이다.
// 실제 데이터는 iVBO...부터이므로 split한다.
var imgData = atob(imageSrc.split(",")[1]);
var len = imgData.length;
var buf = new ArrayBuffer(len); // 비트를 담을 버퍼를 만든다.
var view = new Uint8Array(buf); // 버퍼를 8bit Unsigned Int로 담는다.
var blob, i;

for (i = 0; i < len; i++) {
view[i] = imgData.charCodeAt(i) & 0xff; // 비트 마스킹을 통해 msb를 보호한다.
}
// Blob 객체를 image/png 타입으로 생성한다. (application/octet-stream도 가능)
blob = new Blob([view], { type: "image/png" });

msSaveOrOpenBlob

IE10+ 에서 사용가능한 msSaveOrOpenBlob가 필요하다.

msSaveBlob 메서드는 저장 단추만 사용자에게 제공하는 반면 msSaveOrOpenBlob 메소드는 저장 및 열기 단추를 모두 제공한다는 것이 차이점이다.

// blob과 저장될 파일명을 받는다.
window.navigator.msSaveOrOpenBlob(blob, "new_file_name.png");

Not IE

IE 가 세상에 존재하지 않는다면 코드는 아주 예쁘게 짤 수 있다.

<a href="data:image/png;base64,iVBORw0KG..." download="new_file_name.png">
<img src="data:image/png;base64,iVBORw0KG..." />
</a>

a 태그가 보기 싫다면 아래 구문을 포함해 함수로 만든다.

var a = document.createElement("a");
a.style = "display: none";
a.href = img.src;
a.download = "new_file_name.png";

document.body.appendChild(a);
a.click();

setTimeout(function () {
// 다운로드가 안되는 경우 방지
document.body.removeChild(a);
}, 100);

Blob 재사용

IE 때문에 만들었던 Blob 객체를 URL 기능을 이용해 재사용해보자.

var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = "new_file_name.png";

document.body.appendChild(a);
a.click();

setTimeout(function () {
document.body.removeChild(a);
URL.revokeObjectURL(url); // 메모리 해제
}, 100);

소스

/**
* [downloadImage]
* @param {[string]} img [base64encoded image data]
* @param {[string]} fileName [new file name]
* @return [image file]
*/
function downloadImage(img, fileName) {
var imgData = atob(img.src.split(",")[1]),
len = imgData.length,
buf = new ArrayBuffer(len),
view = new Uint8Array(buf),
blob,
i;

for (i = 0; i < len; i++) {
view[i] = imgData.charCodeAt(i) & 0xff; // masking
}

blob = new Blob([view], {
type: "application/octet-stream",
});

if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
//var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
//a.href = url;
a.href = img.src;
a.download = fileName;
document.body.appendChild(a);
a.click();

setTimeout(function () {
document.body.removeChild(a);
//URL.revokeObjectURL(url);
}, 100);
}
}

여담

![image from hexo](https://i.imgur.com/36Rf76J.gif title:"실망시키지 않는 IE")

· 2 min read

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

· 3 min read
window.fbAsyncInit = function () {
FB.init({
appId: "앱 키",
xfbml: true,
version: "v2.8",
});
};
(function (d, s, id) {
var 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 이용이 가능한 것 같다.

· 2 min read

공식 문서에 따르면 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) {
var id = args[0];
var tabs =
args[1] && args[1] !== "default" ? args[1] : "js,resources,html,css,result";
var skin = args[2] && args[2] !== "default" ? args[2] : "light";
var width = args[3] && args[3] !== "default" ? args[3] : "100%";
var 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>'
);
}

· 3 min read

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: "전체보기",
},
});

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

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

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

var 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