구차니의 잡동사니 모음

음.. 해보려는데 잘 안된다?

먼저 CSS를 통해서 사이즈가 정해져 있는데

canvas.width로 하고 이미지를 써올려 보니 커진다.. -_-

[링크 : https://stackoverflow.com/questions/9742131/scaling-canvas-element-with-static-resolution]

[링크 : https://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/]

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale]

[링크 : https://www.w3schools.com/tags/canvas_scale.asp]

angular에서 proxy 돌리는 법 검색중..

[링크 : http://www.projectcodify.com/angular-set-base-url-dynamically]

[링크 : https://itnext.io/angular-cli-proxy-configuration-4311acec9d6f]

[링크 : https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/]

[링크 : https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md]

의외로 싱겁네 -_-

콘솔에서 자주 이용하는데 매번 너무 길게 나와서 불편했는데..

[링크 : https://stackoverflow.com/.../how-to-show-git-log-history-for-a-sub-directory-of-a-git-repo]

당연(?) 하지만 circle의 stroke-width는 안과 밖으로 커진다.

[링크 : http://www.d3noob.org/2014/02/styles-in-d3js.html]

getBBbox() 예제가 더 많긴한데...

어짜피 둘다 이미 그려진 시점에서 크기를 얻어 오는거라..

위치를 세밀하게 설정하기에는 무리가 있으려나?

getComputedTextLength();

[링크 : https://stackoverflow.com/questions/10254644/get-pixel-length-of-string-in-svg]

[링크 : https://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength]

getBBbox()

[링크 : https://gist.github.com/huytd/327e453c95ca3edadb32d0c867e2561b]

[링크 : https://bl.ocks.org/mbostock/1160929]

[링크 : http://blog.xogus.io/2017/01/15/SVG에서-getBBox-활용하기/]

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement]

//Create an SVG path (based on bl.ocks.org/mbostock/2565344)
svg.append("path")
    .attr("id", "wavy") //Unique id of the path
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //SVG path
    .style("fill", "none")
    .style("stroke", "#AAAAAA");

//Create an SVG text element and append a textPath element
svg.append("text")
   .append("textPath") //append a textPath to the text element
    .attr("xlink:href", "#wavy") //place the ID of the path here
    .style("text-anchor","middle") //place the text halfway on the arc
    .attr("startOffset", "50%")
    .text("Yay, my text is on a wavy path");

[링크 : https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html]

[링크 : http://tutorials.jenkov.com/svg/path-element.html]

+2018.11.01

의외로 startOffset이 중요하다!

      svg.append('text')
        .append('textPath')
        .attr({
          startOffset: '50%',
          'xlink:href': '#curvedTextPath'
        })
        .text('Hello, world!');

[링크 : http://bl.ocks.org/jebeck/196406a3486985d2b92e]

[링크 : https://gist.github.com/jebeck/196406a3486985d2b92e]

d3 에서 svg에 링크를 걸어줄 수 있다.

holder.append("a")
    .attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)

[링크 : http://bl.ocks.org/d3noob/8150631]

associated array 라고 해야하나..

이녀석은 length나 length()로 받아올수 없으니까

반대로 key의 갯수로 길이를 얻는 식의 우회방법을 써야 한다.

[링크 : https://4urdev.tistory.com/7]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values]

nginx를 이용해서 http proxy로 사용하는 방법

다른서버 있어서 80은 못쓰고

81번으로 셋팅했고

/test1/ 은 nginx 서버와 동일한 ip의 3001번 포트로 포워딩

/test2/ 는 nginx 서버와 동일한 ip의 3002번 포트로 포워딩 해서 작동한다.

단, node.js나 angular의 경우 상대경로와 절대경로를 조심해서 작성해야 정상적으로 작동하게 된다.

(angular는 안써서 모르겠지만 deploy 시 경로를 잘 지정해야 할지도?)

[링크 : https://itnext.io/angular-cli-proxy-configuration-4311acec9d6f]

의외로 끝에 오는 / 의 역활이 지대하다

[링크 : http://www.codingpedia.org/...-in-production-to-serve-angular-app-and-reverse-proxy-nodejs]

[링크 : https://www.joinc.co.kr/w/man/12/proxy]

[링크 : https://gist.github.com/soheilhy/8b94347ff8336d971ad0]

예전에 lisp에서 우오오 했던거 같은 녀석..

eval() 을 통해서 넘겨받은 데이터를 코드로 실행한다.

즉, array 데이터를 plain/text로 받은걸

다시 array로 복구가 가능 하다는 것!

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval]

+

JSON.stringify() 등으로 문자열화 된 객체를 실제 객체로 만드는데 쓰일수도 있다.

[링크 : https://blog.outsider.ne.kr/257]