본문으로 건너뛰기

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

모든 태그 보기

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 는 매번 헷갈린다..