Library of developer

Docker

• 리눅스 컨테이너 기술(기존 cgroup, LXC)
• Image 기반으로 여러 Container구동 가능

Docker 기본 명령어

• Container
• 생성 및 실행
• $ docker run [OPTIONS] IMAGE[:TAG|@DIGEST] [COMMAND] [ARG...]
• $ docker run --restart=always -d --privileged -P --name worker01 -p 49160:22 worker:0.1
• 목록
• $ docker ps [ -a ]
• 중지
• $ docker stop { container_id }
• 삭제
• $ docker rm { container_id }
• 중지된 컨테이너 전부 삭제
• $ docker rm -v $(docker ps -a -q -f status=exited)
• 로그
• $ docker logs { container_id }
• $ docker logs --tail 10 { container_id }
• 실시간 로그
• $ docker logs -f { container_id }
• 명령어 실행
• $ docker exec -it { container_name } { /bin/bash }
• Image
• 생성
• $ docker build -t { gen_image_name }
• 목록
• $ docker images [ -a ]
• 다운로드
• $ docker pull ubuntu:16.04
• 삭제
• $ docker rmi  { image_id }

Docker-compose 기본 명령어

• 생성 및 실행
• $ docker-compose up
• 목록
• $ docker-compose ps
• 실행
• $ docker-compose start
• 중지
• $ docker-compose stop
• 삭제
• $ docker-compose down
• 명령어 실행
• $ docker-compose exec
• 로그
• $ docker-compose logs -f

Reference

• https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html
• https://subicura.com/2017/01/19/docker-guide-for-beginners-2.html
• https://subicura.com/2017/02/10/docker-guide-for-beginners-create-image-and-deploy.html
• https://docs.docker.com/engine/reference/builder/
• https://hub.docker.com/explore/

구글번역기가 2019년 12월 4일로 서비스를 종료한다고 합니다. ㅠㅠ

비슷한 서비스로 아래의 링크를 참조해야할듯 합니다.

• https://en.wikipedia.org/wiki/Comparison_of_computer-assisted_translation_tools

미드, 일드, 영드 등을 볼때 한글 자막을 구할 수 없는 난감한 경우, 구글 번역기를 통한 자막 생성방법(물론 한글 번역이 완벽하지는 않다 ㅠㅠ)

1. 먼저 번역할 대상의 자막 파일을 구한다. (언어 불문, SMI, SRT, SUB 확장자를 가지는 자막파일)
2. 구글 번역 툴킷에 접속
3. 좌측 상단에 업로드 버튼을 클릭
1. 
4. 번역할 컨텐츠 추가 > 파일 업로드 선택
1. 
5. 자막 파일 선택 > 자막파일의 원래 언어 선택(영어등) > 번역할 언어 선택(한국어)
1. 
6. 번역 업체 선택 화면이 나오면 좌측 하단에 아니오 클릭
1. 
7. 진행중 표시가 나오면 해당 컬럼을 클릭 > 저장 클릭 > 완료 클릭 > 팝업에서 확인 클릭
1. 
8. 해당 자막을 체크하고 다운로드 버튼을 누르면 다운로드된다.
1. 주의: 변환된 자막이 하나만 있는경우 가끔 다운로드가 안되는 경우가 있다. 이때는 추가로 다른 자막파일을 위와 같은 과정으로 추가하고 2개이상의 자막을 체크하고 다운로드 받으면 된다.
2. 
9. 변환된 자막으로 즐감하면 완료.

Github의 프로젝트를 직접 다운받아 수정 후 upstream에 기여하는 방법에 대한 Tip 정리

SSH key 등록

• 자신이 개발하는 툴이나 IDE등에서 SSH key를 쓰고 있다면 Github의 Setting에서 SSH key를 등록하자
• https://github.com/settings/ssh

저장소 생성

• 대부분의 Github 프로젝트는 upstream으로부터 자기 계정의 fork 하여 개발 후 upstream에 merge를 요청하게 된다.
• 이를 pull request 라고 한다.
• Github 프로젝트에서 우측 상단에 Fork버튼을 눌러 프로젝트 저장소를 생성한다.
• 

개발

• fork하여 생성된 저장수에서 개발 및 수정을 하고 commit & push를 자유롭게 할 수 있다.
• upstream에서 받아온 merge commit과 자신의 commit이 섞여 있어서 보기에 안좋을 때는 git rebase를 하도록 한다.
• git rebase
• 이전에 commit 한 내용을 수정하려면, 내용을 수정한뒤 다음 명령어를 사용하여 중복된 수정내용을 하나의 commit으로 합칠 수 있다.
• git commit --amend
• 만약 commit 한 내용을 이미 push 하였다면 다음 명령어를 사용하여 이전의 push에 강제로 합칠 수 있다.
• git push --force

Upstream 프로젝트의 변경 사항을 받아오기

• Upstream의 변경 사항을 fork받은 자신의 프로젝트에 반영하려면 remote에 upstream 설정을 해 놓아야 한다.
• remote 설정

• // remote에 upstream 설정 등록 // upstreamname 및 projectname 설정 필요 git remote add upstream git://github.com/upstreamname/projectname.git // upstream의 반영사항을 받아온다. git fetch upstream // upstream의 반영사항으로 rebase git rebase upstream/master // git push git push -f master // 최신내용을 현재 작업하고 있는 브랜치에 merge git merge upstream/master

내 변경 사항을 Upstream에 반영하기

• 내 변경사항이 모두 push되었으면 원래 프로젝트로 가서 Pull requests 버튼을 눌러 나의 변경사항이 원본프로젝트에 반영되도록 요청한다.
• 

Reference

• https://gun.io/blog/how-to-github-fork-branch-and-pull-request/

 HDMI 포트를 이용하면 HD영상과 음성이 포함된 신호를 모두 수신하여 좋은 영상의 화질과 음성을 출력 할 수 있다.

 하지만, HDMI 를 지원하는 기기를 HDMI 케이블을 이용하여 연결 했을 경우이고, HDMI 포트를 지원하지않는 기기와 연결 할 경우에는 일부 기능을 제대로 쓸수 가 없다.

 HDMI to RGB 어댑터를 이용하면 기존 모니터, 빔등에서 영상을 볼 수 있는데, 이때 소리가 출력이 안되는 경우가 있다.

 이때는 다음과 같이 설정을 하면, 소리는 Audio Output 단자를 이용하여 출력 할 수 있다.

• 제어판 > 소리 > 재생 설정
• 소리 설정값을 외부기기가 아닌 현재 기기의 설정으로 수정한다.
• 
• 곰 플레이어나 기타 동영상 플레이어 설정을 수정
• 소리 환경 설정에서 출력 장치를 "Default DirectSound Device"로 설정
• 

 외부서버설정이나 방화벽 설정시 내부망 IP Address가 아닌 Public IP Address정보를 알고 싶을때가 있다.

 이때 간단히 자신의 PC의 Public IP Address를 알 수 있는 사이트를 소개한다.

• What is My IP
• https://www.whatismyip.com/
• 위의 사이트에 접속하면 다음과 같이 현재 공인 IP 주소를 확인 할 수 있다.
• 

• IPCONFIG
• http://ipconfig.kr/
• 위의 사이트에 접속하면 다음과 같이 현재 공인 IP 주소를 확인 할 수 있다.
• 

 그외 다른 서비스업체도 있지만 광고가 많아 필요에 따라 찾아 쓰면 좋을 것 같다.

Java, C, Javascript 등의 소스들에 대한 포멧팅 프로젝트인 SourceCleanUp 을 소개한다.

SourceCleanUp 프로젝트는 소스코드내에 불필요한 tailing space 나 tab 을 제거 및 tab 으로 쓰인 문자를 space 로 치환하여 인덴테이션을 통일시켜서 코드의 가독성 및 통일성을 가지게 하는데 목적이 있다.

• Github: https://github.com/leechwin/sourcecleanup

• Source Clean Up Rules

• 모든 tab 은 space x 4 로 변경시킨다.

• 문장끝에 space 와 tab 을 제거한다.

• 윈도우즈에서 개행시 발생하는 "\r\n" 의 "\r" 을 제거한다.

• 사용법

• Github 사이트에서 dist/source-cleanup.zip 파일을 다운받고 압축을 푼다.

• 터미널에서 압축파일을 푼곳으로 이동한후 다음 명령어와 같이 대상 폴더와 파일확장자 를 지정하면, 대상 폴더의 모든 하위 폴더에 파일을 뒤져서 Source cleanup 을 수행한다.

• $ start.sh -p <target folder path> [options]

• 다음은 원하는 지정한 폴더의 모든 js 파일들에 대한 SourceCleanUp 을 수행한 예제이다.

• 

  
  

• 다음과 java 파일에 대한 수행한 소스코드 변경 결과이다.

 리눅스에서 expand 와 unexpand 명령으로 tab to space 등의 동작도 가능하다.

C, C++, C#, Java 등의 소스들에 대한 라인분석 툴인 NLOC 을 소개한다.

NLOC 를 이용하면 소스코드내의 코드 라인수, 공백, 주석 등의 카운팅이 가능하다.

라이센스는 GNU General Public License 이다.

NLOC 의 사이트에서 Binary 파일을 다운받는다.

- Download Site

압축파일을 풀고 command line 에서 NLOC 명령어와 함께 분석할 소스 코드파일을 지정하면 다음과 같이 리포팅 결과가 나타난다.

파일 전송이나 파일 생성 삭제등의 테스트를 수행 하는 경우가 발생하는데, 이때 대용량의 더미파일을 생성할 필요가 있을때가 있다.

큰 용량의 동영상파일등을 구하는 방법이 아니라 단순히 명령어로 원하는 크기의 아무의미없는 대용량 더미 파일을 만드는 법을 알아보자.

• Windows 환경에서 더미 파일 만드는법
• fsutil file createnew <파일이름> <파일크기>
• 

• Linux 환경에서 더미 파일 만드는법
• dd if=/dev/zero of=<파일이름> bs=<블록사이즈>count=<반복>
• 위의 명령어는 (블록사이즈 x 반복)크기를 /dev/zero 에서 읽어서 (파일이름)에 기록하여 더미파일을 만들어낸다.
• ex) dd if=/dev/zero of=test bs=1G count=10
• 1G 만큼 10번 써서 10G 의 test 라는 더미 파일을 만들어낸다.

Media wiki 사용시에 좌측에 나타나는 sidebar menu 에 자신이 원하는 메뉴를 넣거나 빼고 싶은 경우가 있다.

좌측 sidebar menu cusomize 하는 법을 알아보도록 하자.

1. 자신의 계정의 page 에 monobook.js 라는 page 를 만든다.
• 생성된 page의 경로는 다음과 같다.
• user:username/monobook.js
2. 생성된 monobook.js page 안에 다음 내용을 삽입한다.

function ModifySidebar(action, section, name, link) {
    try {
        switch (section) {
          case "languages":
            var target = "p-lang";
            break;
          case "toolbox":
            var target = "p-tb";
            break;
          case "navigation":
            var target = "p-navigation";
            break;
          default:
            var target = "p-" + section;
            break;
        }
 
        if (action == "add") {
            var node = document.getElementById(target)
                               .getElementsByTagName('div')[0]
                               .getElementsByTagName('ul')[0];
 
            var aNode = document.createElement('a');
            var liNode = document.createElement('li');
 
            aNode.appendChild(document.createTextNode(name));
            aNode.setAttribute('href', link);
            aNode.setAttribute('style', 'font-size:150%; font-weight:bold');
            liNode.appendChild(aNode);
            liNode.className='plainlinks';
            node.appendChild(liNode);
        }
 
        if (action == "remove") {
            var list = document.getElementById(target)
                               .getElementsByTagName('div')[0]
                               .getElementsByTagName('ul')[0];
 
            var listelements = list.getElementsByTagName('li');
 
            for (var i = 0; i < listelements.length; i++) {
                if (listelements[i].getElementsByTagName('a')[0].innerHTML == name ||
                    listelements[i].getElementsByTagName('a')[0].href == link) {
 
                    list.removeChild(listelements[i]);
                }
            }
        }
 
    } catch(e) {
      // lets just ignore what's happened
      return;
    }
}
 
 
function AddSection(sect) {
    var target = "column-one";
    var column = document.getElementById(target);
    var newsect = document.createElement("div");
    newsect.appendChild(document.createTextNode("test"));
    column.appendChild(newsect);
}
 
function HideColumnOne() {
    // hide columne-one
    var co = document.getElementById("column-one");
    co.setAttribute('visibility','hidden');   
}
 
function CustomizeModificationsOfSidebar() {
    ModifySidebar("add", "navigation", "Core1", "http://172.21.17.12/wiki/index.php/Core1");
    ModifySidebar("add", "navigation", "IDE", "http://172.21.17.12/wiki/index.php/IDE");
    ModifySidebar("add", "navigation", "Web IDE", "http://172.21.17.12/wiki/index.php/WebIDE");
    ModifySidebar("add", "navigation", "주간업무", "http://172.21.17.12/wiki/index.php/weekend");
}
 
addOnloadHook(CustomizeModificationsOfSidebar);

 3. 그후 CustomizeModificationsOfSidebar() 함수에 ModifySidebar 내용을 자신에 맞게 수정한다.

• ModifySidebar 함수의 첫번째, 두번째 인자는 동일
• 3번째 인자는 side bar 에 보일 Menu Text 를 넣어준다.
• 4번째 인자는 Menu Text 로 이동할 실제 페이지의 URL 을 넣어준다.

function CustomizeModificationsOfSidebar() {
    ModifySidebar("add", "navigation", "Core1", "http://172.21.17.12/wiki/index.php/Core1");
    ModifySidebar("add", "navigation", "IDE", "http://172.21.17.12/wiki/index.php/IDE");
    ModifySidebar("add", "navigation", "Web IDE", "http://172.21.17.12/wiki/index.php/WebIDE");
    ModifySidebar("add", "navigation", "주간업무", "http://172.21.17.12/wiki/index.php/weekend");
}

Github 는 외부저장소로서 최고의 인기를 끌고있는데, 의외의 숨겨진 기능이 많이 있다.

일단 자신의 계정으로 만든 github 페이지에서 웹페이지 호스팅까지 해주는 놀라운 기능이 있다.

예를 들어 Github 에 https://github.com/XXX 라는 XXX 계정을 만들고 로그인을 하였다면,

자기계정을 prefix 로 가지는 이름으로 XXX.github.io 이라는 이름의 Repository 를 생성한다.

이 Repository 에 index.html 을 비롯한 css, javascript 등의 파일을 commit 하면,

계정명이 앞에 먼저붙는 XXX.github.io 페이지에 호스팅이 바로 된다.

필자는 leechwin 이라는 계정으로 Github 에 로그인후 기본적으로 아래와 같이 leechwin.github.io 저장소를 생성하니 다음과 같이 저장소가 생성되었다.

index.html, css, javascript, image 등의 파일을 커밋한 후

http://leechwin.github.io/ 으로 접속하니 개인 홈페이지처럼 동작을 잘 한다.

참고로 위의 사이트에 사용된 자바스크립트 라이브러리는 다음과 같다.

1. jQuery 

• 너무나 유명한 DomElement Control 라이브러리이다.
• CSS Selector 의 개념을 알고있다면 쉽게 사용할 수 있다.

2. Twitter bootstrap

• Web UI Component 들을 제공하는 라이브러리이다.
• jQuery Mobile 도 유명하지만, 심플하고 깔끔한 Desktop, Mobile Web UI 에 개인적으로 더 나아보인다.
• bootstrap-responsive.css 를 적용하면, 해상도에 따라 자동으로 레이아웃 조절이 가능하기때문에 N-Screen 대용도 가능하다.
• 

3. Timeliner.js

• Vertical Timeline 을 구성하기 위해 쓴 라이브러리이다.
• expand/collapse 등을 지원하여 화려한 Vertical Timeline 을 구성할 수 있다.
• Demo
• 

4. ColorBox.js

• Image 를 깔끔한 Dialog 에 담아 slideshow 등을 가능하게 해주는 라이브러리이다.
• Demo
• 

• Horizontal  Vertical Timeline 을 지원하는 라이브러리이다.
• 개인적으로 좀 조잡해보여 적용하였다가 Timeliner.js 로 옮겼다.
• Demo
• 

각 저장소마다 gh-pages 라는 Branch 를 생성하고, 이 Branch 에 index.html 을 비롯한 css, javascript 등의 파일을 commit 하면 바로 호스팅이 된다.

1. Github 에 https://XXX.github.io/Project1 이라는 XXX 계정의 Project1 이라는 프로젝트를 생성

2. Project1 저장소에서 gh-pages 라는 Branch 를 생성하고 이곳에 index.html 을 비롯한 파일들을 commit

3. 이 후 XXX.github.io/Project1 페이지에 접속하면 바로 웹호스팅이 된다.

참고: https://help.github.com/articles/user-organization-and-project-pages/