삶의 의미는 성장에 있다: Web

레이블이 Web인 게시물을 표시합니다. 모든 게시물 표시

2016년 12월 8일 목요일

Confluence 의 table을 csv(excel)로 export 하기

회사에서 Confluence(atlassian 의 S/W) 를 사용하고 있습니다.

Wiki 로 프로젝트 관리, 정보공유 등을 (저렴한 가격으로)진행할 수 있어 최근 가장 유명한 S/W 로 알고 있고 정말 편리 합니다.

Excel을 import 시켜도 Excel 화면을 화면에서 바로 볼 수 있어 유용하지만, Table 형태로 사용하는 경우도 있습니다.

그런 Table은 현재 Word 나 PDF 로만 export 가 가능하도록 되어 있습니다.

저의 경우 Table 형태로 된 데이터를 다루기에는 Excel 이 가장 편리한데 Excel 로 바로 export 할 수 없어서 불편함을 느끼고 있었습니다.

개선을 위해서 검색해 보니 html(confluence page 포함) 에서 table을 빼 내는 javascript Code를 공유해 준 블로그가 있어 적용을 해 보았는데 100% 만족 하였습니다.

사용 방법은
1. 관련 자바 스크립트(Export To CSV)를 bookmark로 지정하고(Explorer 10이상)
- 위 링크를 드래그 하여 bookmark로 등록 하면 됩니다.

2. 원하는 페이지에서 해당 bookmark 를 실행 시킵니다.

3. 해당 페이지의 Table 위에 export to csv 라는 링크가 생기고

4. 그 링크를 click 하면 Table이 csv 형태로 저장 됩니다.

(추가)
5. 해당 csv 를 click 하면 default 로 excel로 열리는데 한글은 깨져 있습니다.
6. notepad++ 등 다른 editor로 열면 한글이 살아 있습니다.
-> 이 부분은 인코딩 문제인 것 같은데... 잘 몰라서 공부해야 할듯 합니다...
(코드)
7. 해당 코드는 원본 블로그에서 보실 수 있으며 위 bookmark로 지정한 링크에서도 보실 수 있습니다.

(161210)
8. csv 파일과 자동 연결되는 Excel 로 열면 한글이 깨져 있지만 Notepad++ 와 같은 에디터로 여니 깨지지 않았습니다. UTF-8로 되어있기 때문?
9. Notepad++ 로 연 상태에서 전체 텍스트를 복사한 다음 notepad를 새로 만들어서 붙여넣고 저장하면 새로 열었을 때 깨지지 않았습니다. 이는 window에서 파일을 만들면 자동으로 ms949 로 인코딩을 하기 때문? 입니다.

2016년 4월 15일 금요일

The Internet: Packet, routers, and reliability

내 컴퓨터와 특정 싸이트와의 데이터 전송은 직접 연결되지 않는다.
대신 네트워크들을 돌면서 찾아가게 된다.
고정된 경로를 따라가는 것이 아니라, 여러 경로들 중 여유가 있는 곳을 찾아 전송된다.
라우터가 그 경로들의 중간에서 관리한다.
패킷이 missing 되었는지는 TCP의 경우 관리가 된다.
몇 개의 패킷이 안보내진 것이 확인되면 TCP는 서버에 알려서 안보내진 패킷을 다시 받는다.
라우터와 TCP의 조합으로 현재 진행되고 있는 서비스를 중단없이 확장할 수 있다.

The Internet: IP addresses and DNS

전 세계는 인터넷을 통해 이야기를 나누고 있다.
1970년대에는 인터넷에대한 표준적인 방법이 존재하지 않았다.
Vint Cerf 와 Bob Kahn 은 인터넷 프로토콜을 발명하여 통신을 가능하도록 하였다.

연결의 한 예는
1. 랩탑을 나는 사용하고 있으며
2. 그 랩탑은 wifi가 연결되어 있다.
3. wifi는 Internet Service Provide 에 연결이 되어 있다.
4. 그 ISP는 정말 많은 장치들과 연결되어 있다.

2016년 4월 14일 목요일

The Internet: Wires, cables, and WiFi

내용 요약

우리는 사진, 문자, 이메일을 어떻게 한 곳에서 다른 곳으로 보낼 수 있는가?
인터넷으로 한다.
인터넷은 바이너리 정보를 옮길 수 있다.
바이너리 정보란 0과 1로 이루어진 bit로 표현되는 것이다.
인터넷의 모든 정보는 bit로 표현되는 것이다.

bit는 어떻게 전달될 수 있는가?

종류	예시	장점	단점
전기	전선	싸다	신호 로스
빛	광섬유	빠르다, 신호 로스 없다.	비싸다, 다루기 어렵다.
전파	Wifi	선이 필요 없다.	신호 로스

데이터를 구분하기 위하여 clock을 쓴다.

전송관련 개념

bandwidth: 전송 용량, bitrate로 측정된다.

bitrate: 초당 전송 가능한 bit수

latency: sender 에서 receiver 까지 bit 전송에 걸린 시간

2016년 3월 30일 수요일

(E)How to create hierarchy labels(tree structure) in blogger, blogspot

This is How to make sublabels in tree structure tutorial
Main Idea is from this blog(How to create Sublabels / Hierarchical Labels in Blogspot) and I modify to use my blog
I'm new to web programming(and Javascript), so I'm hardly understand these codes, so just enough to make dTree

Sequece

1. Add Gadgets

* blog-layout click

1) sidebar-right-1, add 'HTML/JavaScript' gadget

- title: 'Labels'

- content: "." temporary

2) sidebar-right-1, add 'tag' gadget

- title: 'tag'

=> 'tag' gadget must be before 'HTML/JavaScript' gadget

so change order if it's not

2. Add Template HTML Code

* blog-template-HTML edit click

1) add below code right after <head>
these codes must work before dTree code usage
I change location from reference blog.

<link href='https://sites.google.com/site/efekefek/file-js/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/efekefek/file-js/createdtree.js' type='text/javascript'/>

2) find below code

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 ... 
</b:includable>
</b:widget>

-> and change ... to below code
these code get each label count to be used at dTree

<script type='text/javascript'>
  var labelCountMap = {};
  <b:loop values='data:labels' var='label'>
     labelCountMap ["<data:label.name/>"] = "<data:label.count/>";
   </b:loop>
</script>

- blue 'Label1' can be changed by the Label gadget number

3. Add 'HTML/JavaScript' Gadget content

- add below code to Gadget content and change blue code by your own labels
'' are erased. at first time I thought it should be there, but doesn't work

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
}

function addMap(d, startingNode, parentNode, map) {
 for (var key in map) {
  if (isEmpty(map[key])) {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
  } else {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
   startingNode = addMap(d, startingNode, startingNode-1, map[key]);
  }
  
 }
 return startingNode; 
}

var data = {
    'label1' : {
        'label2' : {}
    }
};
d = new dTree('d');
d.config.useLines = true;
d.config.useIcons = false;
d.config.inOrder = true;

d.add(0,-1,'');   
addMap(d, 1, 0, data);

document.write(d);
</script>
</div>

4. Result

http://dtreesample.blogspot.kr/

(K)블로거(블로그스팟)에서 라벨을 트리구조로 생성하는 방법

google blog(blogspot, blogger)의 post 를 트리 구조로 정리하는 방법을 설명하였습니다.

Main Idea는 원글(How to create Sublabels / Hierarchical Labels in Blogspot) 이며, 구현 시에 잘 안되던 것들은 수정하여 적용 하였습니다.
웹 프로그래밍과 Javascript를 모르는 상태에서 이 기능을 구현하기 위해서 필요한 내용을 검색해서 익혔기 때문에 부족한 점이 있습니다.

적용 순서

1. 필요한 가젯 추가

* 블로그-레이아웃 클릭

1) sidebar-right-1 에서 'HTML/JavaScript' 가젯 추가

- 제목: 'Labels'

- 내용: "." 임시로 아무내용

2) sidebar-right-1 에서 '태그' 가젯 추가

- 제목: '태그'

=> 중요한 것은 '태그' 가젯이 'HTML/JavaScript' 가젯보다 위에 있어야 하는 것

왜냐하면 순서대로 코드를 적용해야 하기 때문에

그래서 만약 순서가 반대로 되어 있으면 수동으로 변경 필요

2. 템플릿 HTML 코드 추가

* 블로그-템플릿-HTML 편집 클릭

1) <head> 바로 아랫줄에 아래 코드 두줄 추가
웹 참조한 블로그와는 위치를 다르게 했습니다.

<link href='https://sites.google.com/site/efekefek/file-js/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/efekefek/file-js/createdtree.js' type='text/javascript'/>

2) 아래 형태로 되어있는 태그 위젯의 내용에서

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 ...  
</b:includable>
</b:widget>

- ... 으로 표시된 내용을 모두 지우고 아래 코드로 변경
웹 보여줄 라벨들이 각각 몇번 사용되었는지 숫자를 기억해 놓기 위한 코드 입니다.

<script type='text/javascript'>
  var labelCountMap = {};
  <b:loop values='data:labels' var='label'>
     labelCountMap ["<data:label.name/>"] = "<data:label.count/>";
   </b:loop>
</script>

- 파란색으로 표시된 'Label1' 속의 숫자는 태그 가젯의 수에 따라 변경될 수 있으므로 확인 하여야 한다.

3. 'HTML/JavaScript' 가젯의 내용(코드 추가)

- 아래 내용을 해당 위젯을 내용으로 붙여 놓고 코드내용 중 파란색으로 표시된 label 트리구조 변수를 내가 원하는 형태로 변경
웹 참조한 블로그에 있던 '' 는 없앴습니다. 처음에는 원래 형식이 그런 줄 알았는데 주석같아 보여서 제거 했습니다.

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
}

function addMap(d, startingNode, parentNode, map) {
 for (var key in map) {
  if (isEmpty(map[key])) {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
  } else {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
   startingNode = addMap(d, startingNode, startingNode-1, map[key]);
  }
  
 }
 return startingNode; 
}

var data = {
    'label1' : {
        'label2' : {}
    }
};
d = new dTree('d');
d.config.useLines = true;
d.config.useIcons = false;
d.config.inOrder = true;

d.add(0,-1,'');   
addMap(d, 1, 0, data);

document.write(d);
</script>
</div>

4. 최종 결과

http://dtreesample.blogspot.kr/