Skip to main content

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

· 2 min read
Gracefullight
Gracefullight
Owner

공식 문서에 따르면 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 min read
Gracefullight
Gracefullight
Owner

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 바로가기 해제

· One min read
Gracefullight
Gracefullight
Owner

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

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

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

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

없애보자.

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

여담

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

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

· 2 min read
Gracefullight
Gracefullight
Owner

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

제어판 이동​

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

접근성 센터 이동​

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

컴퓨터를 보기 쉽게 설정​

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

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

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

바탕화면 이미지 변경​

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

sublime text ConvertToUTF8 Package 단축키 변경

· One min read
Gracefullight
Gracefullight
Owner

실수로라도 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 콘솔창 유지

· One min read
Gracefullight
Gracefullight
Owner

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

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

Can't connect to localhost

· One min read
Gracefullight
Gracefullight
Owner

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

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

ASP woff 404 오류

· One min read
Gracefullight
Gracefullight
Owner

Classic asp 에서 .woff 확장자를 가진 글자 파일을 가져오지 못하는 경우가 있다. Console 확인시 404 오류가 난다.

IIS 에서 MIME 형식에 woff 확장자를 추가한다. image from hexo

ASP - Request와 Session을 Javascript에서 사용

· 2 min read
Gracefullight
Gracefullight
Owner

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 로 얼려버린다.