본문으로 건너뛰기

"javascript" 태그로 연결된 112개 게시물개의 게시물이 있습니다.

Any application that can be written in JavaScript, will eventually be written in JavaScript

모든 태그 보기

Facebook Graph API를 활용한 Page 글쓰기

· 약 3분

페이스북 모듈 연동

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를 호출하지 못하는 현상

· 약 2분

공식 문서에 따르면 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 기본 사용법

· 약 3분

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

ASP - Request와 Session을 Javascript에서 사용

· 약 2분

선행

classic asp 는 기본 json 모듈이 없기 때문에 여기에서 모듈을 다운로드 해야한다.

소스

<!--#include virtual = "/JSON_2.0.4.asp"-->
<%
'request TO JSON
Dim req:Set req = jsObject()

FOR EACH i IN Request.QueryString
IF Request.QueryString(i).count > 1 THEN
i = Replace(i,"&", "")
Set req(i) = jsArray()
FOR EACH j IN Request.QueryString(i)
req(i)(null) = j
NEXT
ELSE
req(i) = Request.QueryString(i)
END IF
NEXT

FOR EACH x IN Request.Form
IF Request.Form(x).count > 1 THEN
Set req(x) = jsArray()
FOR EACH y IN Request.Form(x)
req(x)(null) = y
NEXT
ELSE
req(x) = Request.Form(y)
END IF
NEXT
'session TO JSON
Dim sess:Set sess = jsObject()
FOR EACH k IN Session.Contents
sess(k) = Session.Contents(k)
NEXT
%>
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
var request = JSON.parse('<%=req.flush%>');
var session = JSON.parse('<%=sess.flush%>');
Object.freeze(request);
Object.freeze(session);
</script>

설명

1 줄에서 JSON 모듈을 include 시켜주고 627 줄에서 Get 방식과 Post 방식의 Request 를 모두 파싱한다. 3033 줄에서 Session 을 파싱한다. 40 줄에서 request 와 session 을 javascript 변수로 받고, 클라이언트가 변조하지 못하게 Object.freeze 로 얼려버린다.

jshint 설정 (Sublime, VSCode)

· 약 4분

javascript 에서 linter 의 역활은 중요하다. Sublime Text 나 VSCode 에서 jshint linter 를 설치하고, 기본 설정을 수정해보자.

설치

Sublime

모듈 설치

Sublime Linter 패키지가 선행되어야한다.

Package Control을 열어 Sublime-Linter jshint를 설치한다. 간단히 jshint 로 검색해도 된다.

jshint 설치

## 전역으로 jshint를 설치한다.
$ npm install -g jshint

설정 경로 변경

Preferences > Package Settings > SublimeLinter > Settings - user 메뉴로 들어가, "users.linters.jshint.args"에 경로를 수정한다.

{
"linters": {
"jshint": {
"@disable": false,
"args": [
// 여기에 경로를 적어준다.
"--config=C:\\Users\\사용자\\npm\\node_modules\\jshint\\jshint_config.json"
],
"excludes": []
}
}
}

VSCode

내장되어있다. 파일 > 기본설정 > 설정에서 아래 속성을 만져주면 된다.

{
"jshint.options": {}
}

설정 파일

소스

{
"esnext": true,
"asi": false,
"boss": false,
"curly": true,
"eqeqeq": true,
"eqnull": false,
"evil": false,
"expr": true,
"forin": true,
"funcscope": false,
"jquery": true,
"latedef": true,
"lastsemic": false,
"loopfunc": false,
"maxerr": 10,
"nocomma": true,
"nonbsp": true,
"node": true,
"nonew": false,
"plusplus": false,
"regexdash": false,
"shadow": false,
"strict": false,
"supernew": false,
"trailing": false,
"undef": false,
"unused": false,
"white": false,
"withstmt": false,
"worker": true
}

설명

  • esnext : es6 의 구문을 사용할 수 있음
  • asi : 세미콜론이 없을 수 있음
  • boss : 비교문(lt, gt..)이 올 자리에 할당문(a = 1)이 올 수 있음
  • curly : 중괄호 생략할 수 없음
  • eqeqeq : 를 사용할 수 없음 (=를 사용)
  • eqnull : null 비교를 사용할 수 있음
  • evil : eval 을 사용할 수 있음
  • expr : 할당이나 함수호출이 아닌 표현식 사용할 수 있음 (예제 참조)
  • forin : forin 반복문 사용시 if 으로 필터링을 해줘야함
  • funcscope : 조건문 내의 선언된 변수를 조건문 바깥에서 참조 가능
function test() {
// eslint-disable-next-line no-constant-condition
if (true) {
var x = 0;
}

x += 1; // Default: 'x' used out of scope.
// No warning when funcscope:true
}
  • jquery : jQuery 의 전역변수를 미리 정의
  • latedef : 호출보다 늦게 정의된 변수를 금지 (호이스팅 방지)
  • lastsemic : 한 줄짜리 블록 코드에서 마지막 세미콜론이 없을 경우만 오류
  • loopfunc : 반복문 안에서 함수 정의 가능
  • maxerr : 총 보여줄 오류의 갯수
  • nocomma : comma 연산자 사용 금지
  • nonbsp : non-breaking whitespace 금지
  • node : 노드 환경 사용 가능
  • nonew : new 생성자 사용 불가
  • plusplus : 단항 증감연산자 사용 불가
  • regexdash : 정규식에서 대괄호 안에 escape 처리 되지 않은 대쉬(-) 가능
  • shadow : 변수 재선언 가능 (inner 또는 false, outer, true 로 설정)
  • strict : "use-strict" 선언이 없을시 오류
  • supernew : 잘못 작성한 생성자의 오류 표시 안함
  • trailing : 라인 끝의 불필요한 공백이 있으면 오류
  • undef : 선언되지 않은 변수 사용시 오류
  • unused : 선언이 되었으나 사용되지 않는 변수에 대해 오류
  • white : jshint 가 더글락스 크락포드의 코딩 스타일 가이드에 따라 코드를 검사
  • withstmt : with 구문 사용 가능
  • worker : Web Worker 사용 가능

hexo image tag의 alt 속성 사용

· 약 1분

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

![image from hexo]([class names] /path/to/image [width] [height] [title text
[alt text]])

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

문제점

Input

test.png 에 test_title, test_alt 속성을 추가하고 싶은 경우 아래처럼 사용하면 되어야한다.

![image from hexo](/test.png test_title test_alt)

Output

하지만 결과는 참담하다.

<img src="/test.png" title="test_title test_alt" />

해결

Input

속성을 quotes 와 double quotes 로 두번 감싸줘야한다.

![image from hexo](/test.png "'test_title'" "'test_alt'")

Output

<img src="/test.png" title="test_title" alt="test_alt" />

여담

공식 문서에 설명이 업데이트되면 좋겠다. 이미지에 캡션다는 법을 찾다가 결국 내 블로그에는 안 달기로 마음먹었다.

Detecting AdBlock

· 약 1분

Google Analytics, Facebook Pixel, Naver Analytics 등의 분석 스크립트 및 Google Adsence 를 차단하는 AdBlock 을 감지해보자

소스

/**
@author https://www.christianheilmann.com/2015/12/25/detecting-adblock-without-an-extra-http-overhead/
*/
(function (adBlockEnabled) {
"use strict";
const testAd = document.createElement("div");
testAd.innerHTML = "&nbsp;";
testAd.className = "adsbox";
document.body.appendChild(testAd);

setTimeout(function () {
if (testAd.offsetHeight === 0) {
adBlockEnabled = true;
}
testAd.remove();

if (adBlockEnabled) {
alert(
"This Blog is made possible by displaying online advertisements\nPlease consider by disabling your ad blocker",
);
}
}, 100);
})((window.adBlockEnabled = window.adBlockEnabled || false));

출처의 소스를 즉시실행함수로 변경하고, 문구를 추가했다.

설명

AdBlock 에 의해 차단되는 영역인 .adsbox div 의 생성유무를 확인해 AdBlock 의 adBlockEnabled 변수의 값을 정한다.

uBlock 도 잘 찾아낸다.

jQuery Change Class

· 약 2분

Toggle Event 사용시 AAA 로 명명된 클래스를 BBB 로 바꾸고 싶을 때가 있다.

$("#id").removeClass("AAA").addClass("BBB");

보통 이런 방식으로 사용하는데, alterClass 함수를 곁들이면 더 나이스하게 바꿀 수 있다.

소스

/**
@author https://gist.github.com/peteboere/1517285
*/
$.fn.alterClass = function (removals, additions) {
if (removals.indexOf("*") === -1) {
// Use native jQuery methods if there is no wildcard matching
this.removeClass(removals);
return !additions ? this : this.addClass(additions);
}

const pattern = new RegExp(
"\\s" +
removals.replace(/\*/g, "[A-Za-z0-9-_]+").split(" ").join("\\s|\\s") +
"\\s",
"g",
);

this.each(function (i, it) {
let cn = " " + it.className + " ";
while (pattern.test(cn)) {
cn = cn.replace(pattern, " ");
}
it.className = $.trim(cn);
});

return !additions ? this : this.addClass(additions);
};

예제

// AAA to BBB
$("#id").alterClass("AAA", "BBB");
// AAA-12, BBB-13 to AAABBB
$("#id").alterClass("AAA-* BBB-*", "AAABBB");

**asterisk(*)**를 이용해 여러 개의 클래스를 한꺼번에 원하는 클래스로 변경할 수 있다.

여담

jQuery UI 를 사용 중이라면, .switchClass를 사용하면 된다.

jQuery serializeObject - form을 json으로 변환

· 약 2분

비동기 submit 을 진행시에 form 값을 확인해보고 json object 로 받아 한 번에 request 를 날리고 싶을 때 유용하다.

소스

/*
@author https://github.com/macek/jquery-serialize-object
*/
$.fn.serializeObject = function () {
"use strict";
const result = {};
const extend = function (i, element) {
const node = result[element.name];
if ("undefined" !== typeof node && node !== null) {
if ($.isArray(node)) {
node.push(element.value);
} else {
result[element.name] = [node, element.value];
}
} else {
result[element.name] = element.value;
}
};

$.each(this.serializeArray(), extend);
return result;
};

예제

const formData = $("#form").serializeObject();

여담

checkbox 같은 경우 여러 개 선택시 하나의 key 에 배열로 반환된다.

<form>
<input type="checkbox" name="arr" value="1" checked />
<input type="checkbox" name="arr" value="2" checked />
</form>

<script>
var formData = $("form").serializeObject();
// => formData = { arr : [1,2] };
</script>

사실 이 기능이 제일 매력적이다.

현재 serializeObject library는 더 높은 버전이 있다. 최신 버전에선 form 의 name 속성에 object 를 직접 관리할 수 있다. 최신 버전을 써도 괜찮고, 가볍게 추가해서 쓰고 싶으면 위 버전을 이용하자.

jQuery Enter Event

· 약 1분

로그인 폼을 만들 때 tab 과 enter 를 이용해 로그인 할 수 있게 해줘야한다.

소스

$("#id").keypress(function (e) {
if (e.which === 13) {
// do something
}
});

여담

로그인 폼을 매번 만들지 않기 때문에, e.which 는 매번 헷갈린다..