본문으로 건너뛰기
Eunkwang Shin

Eunkwang Shin

Owner

Full Stack JavaScript Developer | Half-time Open Sourcerer.

모든 저자 보기

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

· 약 1분
Eunkwang Shin
Eunkwang Shin
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 기본 사용법

· 약 2분
Eunkwang Shin
Eunkwang Shin
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 바로가기 해제

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

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

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

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

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

없애보자.

해결​

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

여담​

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

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

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

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

해결​

제어판 이동​

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

접근성 센터 이동​

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

컴퓨터를 보기 쉽게 설정​

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

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

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

바탕화면 이미지 변경​

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

sublime text ConvertToUTF8 Package 단축키 변경

· 약 1분
Eunkwang Shin
Eunkwang Shin
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 콘솔창 유지

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

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

해결​

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

Can't connect to localhost

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

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

해결​

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

ASP woff 404 오류

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

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

해결​

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

ASP - Request와 Session을 Javascript에서 사용

· 약 2분
Eunkwang Shin
Eunkwang Shin
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 로 얼려버린다.