우분투, Linux C/C++, PHP, JavaScript

1. 기존에 설치된 XVidCap 프로그램을 삭제한다.
2. 구글에서 xvidcap_1.1.7jaunty_i386.deb 파일을 검색하여 다운로드 받는다. 이때 주의점은 sourceforge.net 에서 다운로드 받으면 안된다고 한다.
3. 다운로드 받은 XVidCap 패키지를 설치한다.
4. 설치된 XVidCap 프로그램을 실행할때 padsp를 사용하여 실행한다.

padsp xvidcap

nano란 에디터와 vim 에디터중에 vim 에디터를 사용하고 있다. 하지만 시스템을 설치하고 나면 vim은 설치되어 있지 않은 반면에 nano는 기본으로 설치되어 있다.

VIM 설치하기

apt-get install vim

기본 에디터를 nano에서 VIM으로 변경하기

vim 을 기본 에디터로 변경하는데는 두가지 방식이 있다. select-editor 유틸을 사용하는 방법과 환경설정을 변경하는 방법

1. 환경 설정 변경을 통한 기본 에디터 변경하기

export EDITOR=vim

select-editor

우분투와 윈도우간 키보드와 마우스를 공유하기 위해서 시너지(synergy)를 사용한다. 우분투에서 X-윈도우가 실행되면서 시너지가 실행되어 사용자 로그인단에서부터 시너지가 실행하기 위해서 다음의 파일을 수정하였다.

$ vi /etc/gdm/Init/Default
/usr/bin/synergyc 서버IP

X-윈도우가 실행되면서 기본으로 실행되는 스크립트 파일인 /etc/gdm/Init/Default 파일에 시너지 클라이언트를 실행하는 명령문을 추가하였다.

개인적으로 코드 작성시 한줄에 길게 늘여쓰는것을 좋아한다. 한줄에 해결할 수 있는 코드를 여러줄로 나누어서 작성되어 있으면, 오히려 가독성이 떨어지는 느낌이 들어서 이다.

이클립스에서 작성한 코드를 Ctrl + Shift + F 단축키를 사용하면, 작성된 코드를 자동 들여쓰기를 통해서 깔끔하게 정리해주면서 80글자 이상인 줄은 다음줄로 내려보낸다. 이런 설정이 나에게는 불편하여 이클립스 설정을 변경하였다.

이클립스 설정방법

Windows -> Preferences -> Java -> Code Style -> Formatter에서 기존에 사용하던 포매터를 변경하거나 내에게 맞는 새로운 포매터를 생성한다. 포매터 프로필 다이얼로그 창이 뜨면 맨 오른쪽에 있는 Comments 탭을 클릭하고 Line Width 부분에서 기본값이 80으로 되어 있는것을 증가시킨다.

이전에 무료 마인드맵인 freemind에 대하여 작성한 포스트가 있다. freemind에 대한 소개는 다음의 링크를 참조. freemind 프로그램도 그 상당히 매력있는 프로그램이다.

http://www.idhacker96.pe.kr/tc/43

생각을 정리하기 위해서 마인드맵을 자주 사용하는데 언젠가 부터, freemind가 불편하기 시작했다. 무료라서 좋기는 한데 성능이 조금 떨어지는 감이 있다. 그래서 그런지 언제부터인가 XMind만 사용하게 되었다. 물론 XMind가 시각적으로 이쁘게 꾸밀 수 있는 방법을 더 제공하는것도 있다.

XMind는 무료 버전과 유료 버전이 있다. 하지만 개인적으로 무료 버전만으로도 충분히 재역할을 하기 때문에 유료 버전의 구매의 필요성을 느끼지는 못한다. 또한 그렇게까지 깊게 활용하지는 않기도 하다.

XMind는 다음의 링크를 통해서 확인할 수 있다.

http://www.xmind.net/

우분투를 버전 업그레이드하기 위해서 우분투의 버전을 확인해 보았다.

cat /etc/issue

또는

cat /etc/lsb-release

버전 업그레이드를 위해서 반드시 버전 확인할 필요는 없었지만, 확인차 살펴보았다. 다음은 우분투에서 버전을 업그레이드 하는 명령어 이다.

sudo do-release-upgrade

사용자 로그인 없이 공유 디렉토리에 접근해서 사용할 수 있도록하기 위해서 공유 디렉토리에 대한 삼바 설정을 다음과 같이 설정하였다.

[sdir]
   comment = sdir
   browseable = yes
   path = /home/sdir/public_html/
   create mask = 0777
   directorymask = 0777
   guest ok = yes
   writable = yes

당연한 이야기지만 해당 공유 디렉토리에 접근한 사용자가 파일을 생성할 수 있도록 퍼미션을 777로 설정해 두어야 된다.

추가

위의 설정으로 될때가 있는가 하면 되지 않을때도 있다. 그럴 경우 인증 부분에서 security 옵션을 share로 변경하면된다. 삼바 설정중에서 security = user 부분이 주석처리 되어 있는것을 찾아서 security = share로 변경

# security = user # 기본으로 주석처리 되어 있다.
security = share # 인증 부분을 공유로 변경한 상태

리눅스는 다 좋은데 버전마다 설정이 조금씩 변경되는것이 사용하기 불편하게 한다.

VMWare.com에서 무료로 다운로드 받은 가상화 솔류션인 ESXi vSphere4에 몇가지 테스트를 위해서 우분투 서버를 설치하였다. 가상화 서버에서 보다 나은 퍼포먼스를 위해서 VMWare Tools를 설치할 필요성이 있어서 다음과 같음 명령을 사용하여 VMWare Tools를 설치하였다.

구글 크롬에서 주소창에 검색어를 입력하면 기본값으로 구글 웹 사이트에서 검색한 페이지를 출력한다. 크롬의 설정을 변경하면 주소창에 입력한 검색어로 출력되는 검색엔진을 변경할 수 있다.

'도구 -> 옵션 -> 기본 설정 -> 기본 검색엔진' 항목에서 왼쪽에 있는 설정 버튼을 눌러서 검색 엔진 다이얼로그를 띄운다. 그리고 추가 버튼을 통해서 기본 검색시 https://www.google.com으로 검색하도록 다음과 같이 추가한다.

// 구글크롬 기본 설정값
{google:baseURL}search?{google:RLZ}{google:acceptedSuggestion}{google:originalQueryForSuggestion}sourceid=chrome&ie={inputEncoding}&q=%s

// 변경한 설정값
https://www.google.com/search?{google:RLZ}{google:acceptedSuggestion}{google:originalQueryForSuggestion}sourceid=chrome&ie={inputEncoding}&q=%s

위의 값은 기본 구글 설정값에서 앞에 있는 도메인 정보만 변경한 것이다. 기본 검색엔진인 http://www.google.co.kr에서 https://www.google.com으로 변경하면 좋은점은 더 이상 토픽이 출력되지 않는다.

끝으로 '기본 검색엔진으로' 버튼을 클릭해서 해당 항목을 기본값으로 설정한다.

참조

구글의 도움말: http://www.google.com/support/chrome/bin/answer.py?hl=kr&answer=95653

TinyMCE가 어느세 3.x로 버전업하였다. 기존 2.2.x 버전에서는 FCKEditor에 비해서 다소 성능이 떨어지는 느낌이 있었는데 3.x로 버전업하면서 다소 기능상의 차이점은 있지만 성능이 떨어진다는 느낌은 들지 않았다. TinyMCE의 라이센스가 LGPL로 변경하면서 라이센스면에서는 부담이 없다.

TinyMCE 다운로드 받기

TinyMCE의 공식 사이트는 http://tinymce.moxiecode.com/ 이다. 현재 본 문서를 작성하고 있는 시점인 2009-03-15일 현재 3.2.2 버전이 마지막 버전이다. 다운로드 받을 파일은 tinymce_3_2_2.zip 파일과 Language packs 공간에서 한국어 버전의 언어팩을 다운로드 받는다. 다운로드 받을때 주의할 점은 받고자하는 언어옆에 있는 체크박스를 클릭한 상태에서 하단에 있는 download 버튼을 클릭해야 한다는 것이다. 그렇지 않고 해당 언어 옆에 [XML] 표시가 있는 링크를 클릭할 경우 XML 파일을 바로 받게 되는데 xml 파일로는 TinyMCE의 언어팩으로 사용할 수 없다.

TinyMCE 맛 보기

다운로드 받은 TinyMCE를 압축을 풀면 examples 디렉토리에는 TinyMCE에 대한 예제 파일이 들어 있고, jscripts 디렉토리에 TinyMCE를 사용하기 위해 필요한 것들이 들어있다. 자신의 사이트에 TinyMCE를 사용하여 위지윅 에디터를 달고 싶다면 jscripts 디렉토리 안에 들어 있는 tiny_mce 디렉토리를 복사하면 된다.

TinyMCE에서 제공하는 기능을 둘러보기 위해서 http://tinymce.moxiecode.com/examples/full.php에서 테스트해다. 다운로드 받은 파일에서 예제를 둘러보기 원한다면 examples/index.html 파일을 열어보면 된다. 그러나 온라인 상으로 제공하는 예제가 더 많은 것을 보여 주기 때문에 온라인으로 보는것을 권한다.

TinyMCE를 웹 페이지에서 사용하기

제공되는 예제 파일인 full.html을 보면 TinyMCE를 사용하는 방법에 대해서 힌트를 얻을 수 있다. TinyMCE를 사용하기 위해서 TinyMCE의 기능이 정의된 자바스크립트를 불러들이기 위해서 tiny_mce.js 파일을 읽어들인 다음에 tinyMCE가 동작하는 방식을 설정하기 위해서 tinyMCE.init() 메서드를 정의하여준다. tinyMCE.init()를 정의하는것은 TinyMCE를 설정하는 것으로 생각해도 될것이다. TinyMCE를 사용하기 위해서 준비해야하는것은 두가지 이다.

<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas", // 이 구분 때문에 페이지에 있는 textarea 요소는 모두 위지윅 에디터로 변환
        ...

언어팩 적용하기

언어팩은 http://tinymce.moxiecode.com/download_i18n.php에서 다운로드 받을 수 있다. XML 파일은 언어팩을 만들기 위한 파일이다. 그렇기 때문에 언어팩을 다운로드 받고자 한다면, 목록중에서 korea라고 쓰여 있는 항목에 체크박스를 선택한 다음 페이지의 하단에 있는 download 버튼을 눌러 언어팩을 다운로드 받는다.

언어팩을 다운로드 받았다면 압축을 풀면 langs, plugins 그리고 themes 디렉토리 이렇게 세개의 디렉토리가 들어 있다. 압축을 푼 TinyMCE에 들어 있는 jscripts/tiny_mce/ 디렉토리에 보면 동일한 디렉토리명이 있는것을 볼 수 있는데 덮어 쓰면된다. 이로써 TinyMCE는 한글을 지원할 준비가 되었다. 이제부터는 TinyMCE를 사용하는 페이지에서 TinyMCE를 호출할때 언어팩을 한글로 설정해서 호출하면 된다. TinyMCE를 한글로 사용하기 위해서 language 프로퍼티값을 'ko" 값을 지정해준다.

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    language: "ko", // 한글을 사용하기 위해서 추가

TinyMCE를 사용하기 위해서 tinyMCE.init() 메서드를 정의하는데 이때 사용할 언어를 지정한다. 지정하지 않으면 기본 값인 영문을 사용한다. 언어설정에 있어서 JSON을 사용하기 때문에 반드시 끝에 꼼마를 찍어주어야한다.

메뉴바 편집

설정 중에 Theme options 부분에 theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3 그리고 theme_advanced_buttons4 변수가 정의되어 있다. 각각의 변수는 에디터에서 사용할 메뉴바를 나타낸다. 4개의 변수가 존재하므로 아마도 메뉴를 4단으로 구성 가능한것 같다. 메뉴 기능은 많으나 다 사용할것은 아니므로 3번 4번 변수는 삭제해도 될듯 싶다. 그리고 변수에 정의된 요소의 순서를 바꾼다거나 재정의하여 메뉴의 재구성할 수 있다.

웹 페이지에 TinyMCE 삽입하기

웹 페이지에 TinyMCE를 삽입하여 위지웍 에티터로 사용하기 위해서는 두가지 작업이 선행되어야한다.

• 웹 페이지에서 TinyMCE를 사용하기 위해서 tiny_mce.js 스크립트 파일을 추가하는 작업
• TinyMCE의 tinyMCE.init() 메서드를 호출하여 TinyMCE의 기본 동작에 대한 설정을 정의

다음의 코드는 TinyMCE를 사용하기 위한 예제 코드이다.

본 예제 코드는 첨부파일 TinyMCE-Sample.tar.gz 파일에 들어 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="./3.2.7/tiny_mce.js"></script>
    <script type="text/javascript">
    // TinyMCE 사용을 위한 설정 정의
    tinyMCE.init({
        // General options
        mode : "textareas", // 위지웍 에디터로 사용할 HTML 요소는 textarea로 지정한다.
        theme : "advanced", // TinyMCE는 여러가지 테마를 지원해준다. 그중 advanced 테마를 사용
        plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",
        language: "ko", // 사용할 언어는 한국어로 지정

        // Theme options
        // theme_advanced_buttons1~3의 변수를 변경함으로써 메뉴를 배치할 수 있다.
        theme_advanced_buttons1 : "code, |, undo, redo, |, cut, copy, paste, pastetext, pasteword, |, search, replace, |, removeformat, cleanup",
        theme_advanced_buttons2 : "bold, italic, underline, strikethrough, |, sub, sup, |, bullist, numlist, |, justifyleft, justifycenter, justifyright, justifyfull, |, outdent, indent, |, blockquote, |, link, unlink, image, media, |, forecolor, backcolor",
        theme_advanced_buttons3 : "formatselect,fontselect,fontsizeselect,|,tablecontrols,preview,|,fullscreen,help",
        theme_advanced_toolbar_location : "top", // 툴바는 상단에 위치
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false // 위지웍 에디터를 인위적으로 변경 불가능. true로 설정할 경우 마우스로 크기를 변경할 수 있다.
    });
    </script>
</head>
<body>

<textarea></textarea>

</body>
</html>

TinyMCE-Sample.tar.gz

TinyMCE에 담겨진 내용에 접근하기

1. 위지웍 에디터에 담겨져 있는 내용 가져오기

위지웍 에디터에 담겨진 내용에 접근할 필요성이 있다. 예를 들자면, 작성한 문서를 전송하기 이전에 위지웍 에디터에 내용이 담겨져 있는지 검사할 필요성이 있거나, 임시저장과 같이 내용을 작성하기 이전에 위지웍 에디터에 담겨진 내용을 서버에 미리 전송할 필요성이 있는 경우가 있다. 이와 같이 위지웍 에디터에 담겨진 내용에 접근하기 위해서 다음과 같은 코드를 사용한다.

tinyMCE.get("elm1").getContent(); // elm1 요소(에디터)에 담겨져 있는 내용을 가져온다.

...

<textarea id="elm1"></textarea>

2. 페이지 출력시 위지웍 에디터에 내용 삽입하기(게시물 수정시)

웹 페이지 출력시 위지웍 에디터 미리 내용을 넣을 경우에는 다음과 같이한다.

<textarea id="elm1">위지웍 에디터에 삽입할 내용</textarea>

그러나 여기서 한가지 주의해야할 점이 있다. 삽입되는 내용에 textarea 요소와 같은것이 들어갈 경우 웹페이지가 올바르게 표현되지 않을 수 있다. 따러서 내용으로 삽입되는 문자열중에서 &, \, <, > 문자열은 치환해서 뿌려준다.

content=str_replace("&", "&amp;", $content); # 내용중에 &gt;와 같은 문구가 있는 경우 웹 브라우저에 의해서 <로 자동 치환됨
$content=str_replace("\"", "&quot;", $content);
$content=str_replace("<", "&lt;", $content);
$content=str_replace(">", "&gt;", $content);

3. 자바스크립트를 사용하여 위지웍 에디터에 내용 삽입하기

위지웍을 사용하는 게시판에서 서식을 제공할 경우, 기존에 입력된 내용을 비우고, 새로운 내용을 위지웍 에디터에 삽입해야할 경우가 있다. 이런 경우 다음의 코드를 사용하여 위지웍 에디터에 내용을 삽입한다.

var content="에디터에 삽입할 내용";
tinyMCE.activeEditor.setContent(content); // 에디터에 있는 내용을 버리고 주어진 내용으로 채운다

4. 에디터에 내용 추가하기

에디터에서 현재 커서가 위치한 곳에 지정한 내용을 추가할 경우가 있다. 예를 들자면, 현재 위치에 이미지를 삽입하는 경우이다. 이미지를 삽이하기 위해서는 별도의 다이얼로그 박스를 통해서 사용자에게 이미지의 경로를 받아서 에디터에 삽입할 수 있다.

또는 지정한 관용구를 에디터에 삽입할 수 있다. 에디터에 입력된 모든 내용을 교체하는것이 아니라, 커서가 있는 위치에서 내용을 추가하고자 할때 다음과 같은 코드를 사용한다.

var content="에디터에 삽입할 내용";
tinyMCE.execCommand("mceInsertContent", false, content); // 현재 커서의 위치에서 내용을 추가한다.

5. TinyMCE 위지웍 에디터에 단축키 붙이기

다음 예제코드는 위에서 위지웍 에디터를 붙이기 위한 코드를 수정한것이다. 붉은색으로 표시된 코드 부분이 위지웍 에디터에 단축키를 붙이는 코드이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="./3.2.7/tiny_mce.js"></script>
    <script type="text/javascript">
    // TinyMCE 사용을 위한 설정 정의
    tinyMCE.init({
        // General options
        mode : "textareas", // 위지웍 에디터로 사용할 HTML 요소는 textarea로 지정한다.
        theme : "advanced", // TinyMCE는 여러가지 테마를 지원해준다. 그중 advanced 테마를 사용
        plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",
        language: "ko",

        setup : function(ed) {
            ed.onKeyDown.add(function(ed,e) {
                // ctrl + shift + s(S) 키를 누른 경우에 해당. 83: s, 115: S
                if (e.ctrlKey && e.shiftKey && (e.keyCode == 83 || e.KeyCode == 115)) {     // catch ctrl-s (SUBLINHADO)
                    // 필요한 코드 입력
                }
            })
       },

        // Theme options
        // theme_advanced_buttons1~3의 변수를 변경함으로써 메뉴를 배치할 수 있다.
        theme_advanced_buttons1 : "code, |, undo, redo, |, cut, copy, paste, pastetext, pasteword, |, search, replace, |, removeformat, cleanup",
        theme_advanced_buttons2 : "bold, italic, underline, strikethrough, |, sub, sup, |, bullist, numlist, |, justifyleft, justifycenter, justifyright, justifyfull, |, outdent, indent, |, blockquote, |, link, unlink, image, media, |, forecolor, backcolor",
        theme_advanced_buttons3 : "formatselect,fontselect력,fontsizeselect,|,tablecontrols,preview,|,fullscreen,help",
        theme_advanced_toolbar_location : "top", // 툴바는 상단에 위치
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false // 위지웍 에디터를 인위적으로 변경 불가능. true로 설정할 경우 마우스로 크기를 변경할 수 있다.
    });

    var ed=new tinymce.Editor('', {});
    ed.onKeyDown.add(function(ed, e) { });
    ed.render();
    </script>
</head>
<body>

<textarea></textarea>

</body>
</html>

단추키 설정 참고

• Event: KeyDown(http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/onKeyDown)
• 단축키 설정 예: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=1829