98..Etc/Etc...2008. 9. 5. 12:59
반응형
CVS 사용에 대한 FAQ 모음

한글로 된 CVS 문서들이 여럿 나와 있지만 꼭 필요한 정보들이 여기저기 흩어져 있고 체계적이지 않은 경우가 있어, 처음 CVS를 접하는 분들이 비슷한 질문을 반복적으로 하게 되는 듯 합니다. 오픈소스 프로젝트 개발에 참여하고자 하는 분들에게 필요한 정보를 모아봤으면 합니다. CVS 사용하면서 이 간단한 걸 몰라서 참 고생했었지 싶은게 있으면 언제든지 추가해 주세요.

마침 KLDPconf 주제 응모에도 비슷한 얘기가 나와서 생각난 김에 일단 시작해 봅니다.

질문만 적어주셔도 물론 좋습니다.

Contents

[-]
1 질문과 답
1.1 CVS를 빨리 배워서 써야하는데 어떡하죠?
1.2 CVS가 뭐예요? / 어디에 쓰는 물건인가요?
1.3 CVS를 실제로 개발 과정에 사용하는 프로젝트가 있나요?
1.4 CVS를 쓰면 그래서 뭐가 좋은가요?
1.5 RCS는 또 뭐죠? / RCS 하고는 뭐가 다른가요?
1.6 SourceSafe와는 뭐가 어떻게 다른가요?
1.7 CVS에서 .......한 점이 마음에 들지 않습니다. 다른 프로그램은 없나요?
1.8 Windows에서 쓸 수 있는 CVS 클라이언트가 있나요?
1.9 Windows에서 쓸 수 있는 CVS 서버가 있나요?
1.10 CVSROOT 환경 설정을 어떻게 해야하나요?
1.11 Anonymous checkout 이 뭔가요? 어떻게 하죠?
1.12 로그인을 하라는데 어떻게 하나요?
1.13 저장소(Repository)의 디렉토리 구조를 알고 싶습니다.
1.14 새 Repository는 어떻게 만드나요?
1.15 새 프로젝트는 어떻게 만드나요?
1.16 checkout은 어떻게 하나요?
1.17 checkout한 이후에 Repository에서 바뀐 내용을 확인하고 싶습니다.
1.18 내가 작업한 내용은 어떻게 알 수 있나요?
1.19 지금까지 작업한 내용을 checkin하고 싶습니다.
1.20 Conflict가 생겼습니다! 어떻게 해야하나요?
1.21 소스에서 이 부분을 누가 만든 건지 좀 알아야겠습니다.
1.22 파일을 추가하고 싶습니다.
1.23 파일을 삭제하고 싶습니다.
1.24 파일 이름을 바꾸고 싶습니다.
1.25 디렉토리를 지우고 싶습니다
1.26 실수로 잘못된 소스를 checkin해 버렸습니다. 어떻게 고쳐야하나요?
1.27 checkout 받은 소스를 이제 그만 지워버리고 싶어요.
1.28 현재까지 작업 내역을 보고 싶습니다.
1.29 revision이 뭔가요?
1.30 tag가 뭔가요?
1.30.1 tag는 어떻게 붙이나요?
1.31 branch는 또 뭔가요?
1.31.1 branch는 어떻게 만들죠?
1.31.2 merge는 어떻게 하는 겁니까?
1.32 과거 특정 시점에 소스가 어땠는지 보고 싶습니다.
1.33 CVS 서버에 어떤 module이 있는지 어떻게 알 수 있나요?
1.34 CVSROOT/modules에 모듈 등록은 어떻게 하나요?
1.35 CVSROOT/passwd에 사용자를 어떻게 추가하나요?
1.36 익명 사용자는 어떻게 등록하나요?
1.37 CVS가 /root 아래 파일을 찾으려 듭니다! 이게 뭔가요?
1.38 Repository를 다른 기계로 옮기고 싶습니다.
1.39 CVS 서버에 있는 repository를 미러링할 수 없나요?
1.40 module들을 공유할 수 있는 방법이 있나요?
1.40.1 간단한 방법
1.41 Source file에 강제로 revision을 지정할 수 있나요 ?
1.42 CVS도 VSS처럼 배타적 락(Exclusive Lock)을 걸어 놓고 사용할 수 있나요?
1.43 Repository에 Attic 이란게 있던데 이건 뭔가요?
1.44 Unicode file을 지원하지 못하는가요?
1.45 이미 Text로 업로드 된 파일을 Binary로 바꿀 수 있는가요?
1.46 이미 Binary로 업로드 된 파일을 Text로 바꿀 수 있는가요?
1.47 로그를 잘못 적었는데 고칠 수 없을까요?
1.48 Tag에 comment를 붙이는것은 가능한가요
1.49 Unknown command 라는 에러가 납니다.
1.50 항상 최신버전의 소스를 유지하고 싶어요
1.51 이전버전으로 되돌리고 싶어요(Rollback)
1.52 CVS를 쓸까요 Subversion을 쓸까요?
2 help 사용법
3 용어
4 문서를 만들면서
5 관련 자료


1 질문과 답

1.1 CVS를 빨리 배워서 써야하는데 어떡하죠?

  1. 우선 DocbookSgml/CVS-KLDP 를 보고 한번 그대로 따라해 보세요.
  2. 아래 정리해둔 다른 한글로 된 문서들을 틈틈히 읽어 봅니다.
  3. CVS를 꾸준히 써야 하거나 여러가지 정석적인 사용 방법을 익히고 싶다면 [http]CVS-BestPractices 문서를 정독하시기를 권합니다.
  4. 큰 오픈소스 프로젝트에서 많은 개발자들이 같이 작업할 때 소스 버전 컨트롤이 어떤 방식으로 운영되는지에 관심 있는 분들은 [http]The CVS Book을 한번 보시기 바랍니다.

1.2 CVS가 뭐예요? / 어디에 쓰는 물건인가요?

CVS(Concurrent Versions System)는 프로그램 소스나 문서 파일 버전 관리를 쉽게 할 수 있도록 도와주는 프로그램입니다. 특히 여러 사람들이 동시에 작업을 진행해야하는 규모가 큰 개발 프로젝트에서 큰 효과를 기대할 수 있습니다. 이밖에도 꾸준히 업데이트되는 문서 관리라든가 웹사이트 관리 등에 유용하게 쓸 수 있고, 심지어 /etc 아래에 들어가는 설정 파일을 (원격) 백업하는 용도로도 사용 가능합니다. :-)

동시에 여러 유닉스 장비에서 작업하는 경우 등에 써볼만한 "홈디렉토리 몽땅 CVS에 넣어버리기"에 대한 LinuxJournal 기사([http]CVS homedir)도 한번 읽어 보세요.

1.3 CVS를 실제로 개발 과정에 사용하는 프로젝트가 있나요?

잘 알려진 유명한 오픈소스 프로젝트들은 대개 CVS나 이와 유사한 소스 관리 시스템을 갖추고 있습니다.

  1. OpenBSD : OS 및 시스템 전체 소스를 CVS로 관리하고 있습니다.
  2. OpenOffice : 총 3만 파일에 대략 9백만 라인 이상되는 C++ 코드를 CVS로 관리합니다.
  3. Mozilla : 전체 프로젝트 및 파생 프로젝트 소스 코드 및 릴리스/브랜치 관리를 CVS로 하고 있습니다.
  4. XFree86 : CVS 를 사용하는 유명 프로젝트중 하나입니다.
  5. Apache : 위와 동일합니다.

1.4 CVS를 쓰면 그래서 뭐가 좋은가요?

관리자는 :
  1. 프로젝트 참여자 개개인의 작업을 방해하지 않으면서 전체적인 진행 상황을 조절할 수 있다.
  2. 릴리스된 버전과 개발중인 버전을 뒤섞지 않고 분리해서 관리할 수 있다.
  3. 일정 기간에 진행된 작업 내용에 대한 리포트를 쉽게 만들어 낼 수 있다.
  4. 일정 기간에 진행된 변경 내역을 효과적으로 추적할 수 있다.
  5. 누가 일을 하고 누가 놀고 있는지 쉽게 감시할 수 있다. :-)

개발자는 :
  1. 소스 백업에 신경 쓸 필요가 없다.
  2. 새로운 코드를 작성할 때 기존 작업을 망칠 위험 없이 쉽게 시도할 수 있다.
  3. 문제가 생겼을 때 어느 지점에서 문제가 생겼는지 쉽게 추적해서 찾아낼 수 있다.
  4. 소스나 문서 특정 부분 작업을 누가 언제 했는지 쉽게 알아낼 수 있다.
  5. 별도 리포트 작성 및 문서를 써야하는 건수나 양이 많이 줄어든다.
  6. 맘먹으면 별로 한 일이 없어도 꾸준히 일하고 있는 것처럼 속일 수도 있다. :-)

1.5 RCS는 또 뭐죠? / RCS 하고는 뭐가 다른가요?

CVS는 RCS를 기반으로 작성된 버전 관리 시스템입니다. 쉽게 얘기하자면 RCS는 파일 하나하나에 대해 버전 관리를 해주는 것이고, CVS는 RCS 기능을 이용해 소스나 문서를 프로젝트/모듈 단위로 관리할 수 있도록 확장한 프로그램입니다. 이미 RCS를 쓰고 있고 익숙한 분이 아니라면 굳이 CVS를 새로 배울 필요는 없습니다. RCS로 할 수 있는 모든 것은 CVS로 할 수 있지만 그 역은 성립하지 않기 때문입니다.

CVS에서도 일부 기능(이미 써 놓은 로그 수정 등)은 RCS 명령을 사용해야 합니다. 궁금하다면
 $ cvs -H admin
해서 RCS 관련 명령어를 한번 살펴 보세요.

1.6 SourceSafe와는 뭐가 어떻게 다른가요?

1.7 CVS에서 .......한 점이 마음에 들지 않습니다. 다른 프로그램은 없나요?


대체할 만한 것들... Non-Free

1.8 Windows에서 쓸 수 있는 CVS 클라이언트가 있나요?


CVS를 처음 사용하는 분에게는 TortoiseCVS 를 권합니다. Java를 주로 사용하거나 좋은 IDE 환경을 원하시는 분은 Eclipse를 한번 써보세요.

DeleteMe 윈도우즈 환경에서 CVS를 사용하는 방법에 대해 아직 쉽게 참고할 만한 문서가 없는 것으로 압니다. 누군가 위에 제가 링크해 드린 두 개의 내용을 바탕으로 해서 윈도우즈 환경에서 CVS를 사용하는 방법을 다룬 별도의 문서를 만들어 주시면 참 좋겠네요. -- 권순선
WinCVS 페이지에서 새롭게 문서를 작성해 나갈까 합니다. 많은 관심과 도움 부탁드립니다. -- 쫑아

1.9 Windows에서 쓸 수 있는 CVS 서버가 있나요?

1.10 CVSROOT 환경 설정을 어떻게 해야하나요?

Local Repository
export CVSROOT=/usr/local/cvsroot

Remote Repository
export CVSROOT=:pserver:username@host.domain.com.:/var/cvsroot

Remote Repository w/ SecureShell
export CVS_RSH=ssh
export CVSROOT=:ext:username@host.domain.com.:/var/cvsroot

1.11 Anonymous checkout 이 뭔가요? 어떻게 하죠?

익명 사용자에게 읽기 권한을 제공함으로써 소스나 문서 최신 버전을 손쉽게 업데이트할 수 있도록 해줍니다. 특히 컴파일이 필요없는 스크립트 기반 프로젝트에 유용합니다. [http]MoniWiki를 예로 들자면
$ cvs -d:pserver:anonymous@cvs.kldp.net:/cvsroot/moniwiki login
$ cvs -z3 -d:pserver:anonymous@cvs.kldp.net:/cvsroot/moniwiki co moniwiki
와 같이 하면 됩니다. 이후에 새 버전이 나오거나 패치가 업데이트 되면
$ cvs update -dP
해서 간단히 최신버전으로 업데이트할 수 있습니다.

1.12 로그인을 하라는데 어떻게 하나요?

$ cvs login
(Logging in to user@host.domain.com)
CVS password:

$ cat ~/.cvspass
:pserver:user@host.domain.com:/var/cvsroot XYZ123

$ cvs logout
(Logging out of user@host.domain.com)

1.13 저장소(Repository)의 디렉토리 구조를 알고 싶습니다.

  /home/cvs/ .... (1)
  /home/cvs/CVSROOT/ .... (2)
  /home/cvs/CVSROOT/passwd .... (3)
  /home/cvs/CVSROOT/readers .... (4)
  /home/cvs/module_A/ .... (5)
  /home/cvs/module_B/ .... (6)

(1) $CVSROOT 로 지정되는 CVS의 최상위 디렉토리

(2) CVS 저장소의 설정 파일들이 있는 디렉토리

(3) CVS 사용자 ID와 비밀번호

(4) CVS 읽기만 가능한 사용자

(5), (6) 프로젝트 디렉토리, 프로젝트에 따라 CVS 명령으로 생성됩니다.

1.14 새 Repository는 어떻게 만드나요?

$ export CVSROOT=/home/user/cvsroot
$ cvs init
$ ls /home/user/cvsroot
CVSROOT/
$ ls /home/user/cvsroot/CVSROOT/
Emptydir/       config         editinfo,v  modules,v  taginfo
checkoutlist    config,v       history     notify     taginfo,v
checkoutlist,v  cvswrappers    loginfo     notify,v   val-tags
commitinfo      cvswrappers,v  loginfo,v   rcsinfo    verifymsg
commitinfo,v    editinfo       modules     rcsinfo,v  verifymsg,v

1.15 새 프로젝트는 어떻게 만드나요?

$ ls proj/
README  a.c  a.h
$ cd proj/
$ cvs import -m "this is the project" proj VENDOR INIT
$ ls /var/cvsroot/
CVSROOT/  proj/
$ ls /var/cvsroot/proj/
README,v  a.c,v  a.h,v

1.16 checkout은 어떻게 하나요?

$ cd ~/work
$ cvs co proj
U proj/README
U proj/a.c
U proj/a.h

특정 태그를 지정해서 받고 싶다면 다음과 같이 합니다.
$ cvs co -r RELEASE_1_0_5 moniwiki

1.17 checkout한 이후에 Repository에서 바뀐 내용을 확인하고 싶습니다.

우선 내용 확인 (로컬에 아무 변화도 만들지 않음).
$ cvs -n update

그리고 이상이 없으면 변경된 사항을 받아온다.
$ cvs update -dP

1.18 내가 작업한 내용은 어떻게 알 수 있나요?

$ cvs diff
$ cvs diff -r BASE
$ cvs diff -r BASE -r HEAD
$ cvs diff -c -r1.6 prog.c
$ cvs diff -c -r1.6 -r1.7 prog.c

1.19 지금까지 작업한 내용을 checkin하고 싶습니다.

$ cvs ci -m "fixed bug #12345"
$ cvs com[mit] prog.c
$ cvs ci -m "another bug fix in sheet.c" sheet.c

1.20 Conflict가 생겼습니다! 어떻게 해야하나요?

당황하지 마세요. 소스나 문서에서
<<<<
....
----
....
>>>>
이렇게 생긴 부분을 찾아서 고친 다음 다시 cvs update; cvs ci 하면 됩니다.

1.21 소스에서 이 부분을 누가 만든 건지 좀 알아야겠습니다.

$ cvs annotate a.c

1.22 파일을 추가하고 싶습니다.

$ cvs add newfile
$ cvs add newdir

1.23 파일을 삭제하고 싶습니다.

$ cvs rm oldfile
$ cvs rm -f badfile
$ cvs rm -f olddir/badfiles
$ cvs rm olddir

1.24 파일 이름을 바꾸고 싶습니다.

단순히 파일이름만 바꾸는 방법과 history 까지 보존하는 방법이 있습니다 (매뉴얼에서 발취)

일반적인 방법
$ mv old new
$ cvs remove old
$ cvs add new
$ cvs commit -m "Rename old to new" old new
일반적인 만큼 방법도 쉽습니다. 기존 파일의 이름을 다른 이름으로 바꾼후 기존 파일을 cvs remove 로 제거하고

새로 바뀐 이름의 파일을 cvs add 로 추가합니다. 그 다음엔 remove와 add 만으로 파일이 지워지거나 추가된것이 적용되지 않으므로

이 두파일을 commit 해줘야 합니다

히스토리 까지 보존하는 방법

먼저 이 방법은 CVS repository 를 직접 접근하므로 조금은 위험하다고 메뉴얼에서 밝히고 있네요
$ cd $CVSROOT/module
$ mv old,v new,v
CVS repository 의 수정할 module 디렉토리에서 이름을 변경할 파일의 이름을 직접 바꾸어 주는 방법입니다

이것은 아래와 같은 장단점을 가지고 있습니다 장점
  • change log가 그대로 보존됩니다
  • revision 역시 그대로 유지됩니다
단점
  • module 의 예전 release 나 tag 를 불러오기가 쉽지가 않다.
  • 이름이 변경되었다는 정보가 log 에 남지 않는다
  • 위의 작업($CVSROOT 에 들어가 파일을 직접 rename 하는..)을 하는 동안 누군가 cvs 작업을 한다면 난처한 일이 생긴다.

1.25 디렉토리를 지우고 싶습니다

CVS에서는 디렉토리 단위로 저장을 하기 때문에 히스토리를 유지하기 위해서는 그 디렉토리가 필요합니다. 따라서 진짜로 디렉토리를 지울 수는 없습니다. 대신 update 시에 받지 않는 방법이 있습니다. 먼저 파일을 지우기를 이용해서 해당 디렉토리의 파일을 모두 지웁니다. 그리고 나서 상위 디렉토리로 가서 해당 디렉토리를 지우고 나면 다음부터는 cvs update -P 로 업데이트 하면 해당 디렉토리가 보이지 않게 됩니다.
cd unneeddir
rm *             # 이때 CVS 디렉토리는 남겨져 있어야 합니다.
cvs remove
cvs commit  # 여기서 unneeddir의 모든 파일이 지워집니다
cd ..
cvs remove unneeddir
cvs update -P

또는 CVSROOT에 가서 직접 디렉토리를 지워 버리는 방법이 있습니다. 대신이 방법은 CVSROOT 디렉토리 관리 권한을 가지고 있어야 하고, 히스토리까지 사라진다는 단점이 있습니다.

1.26 실수로 잘못된 소스를 checkin해 버렸습니다. 어떻게 고쳐야하나요?


1.27 checkout 받은 소스를 이제 그만 지워버리고 싶어요.

$ cvs release -d proj

1.28 현재까지 작업 내역을 보고 싶습니다.

$ cvs st[atus] [-v] [prog.c]
$ cvs log [prog.c]
$ cvs ann[otate] [main.c]

1.29 revision이 뭔가요?

파일 하나하나에 붙어 있는 버전 번호를 말합니다.
$ cvs st README
......
   Working revision:    1.1
......

1.30 tag가 뭔가요?

여러 파일이나 모듈에 버전을 표시하기 위해 한꺼번에 붙여둔 표시입니다.
$ cd moniwiki/
$ cvs st -v README
......
   Existing Tags:
        moniwiki-1_1                    (branch: 1.1.2)
        RELEASE_1_0_5                   (revision: 1.1)
......

1.30.1 tag는 어떻게 붙이나요?

$ cvs tag TAGNAME

1.31 branch는 또 뭔가요?

  • Development Branch
  • Release Branch
  • Maintenance Branch

  • Vender Branch

  • (Main) Trunk
  • HEAD

매뉴얼에서 빌려온 그림
                                                     +-------------+
                          Branch 1.2.2.3.2 ->        ! 1.2.2.3.2.1 !
                                                   / +-------------+
                                                  /
                                                 /
                 +---------+    +---------+    +---------+    +---------+
Branch 1.2.2 -> _! 1.2.2.1 !----! 1.2.2.2 !----! 1.2.2.3 !----! 1.2.2.4 !
               / +---------+    +---------+    +---------+    +---------+
              /
             /
+-----+    +-----+    +-----+    +-----+    +-----+
! 1.1 !----! 1.2 !----! 1.3 !----! 1.4 !----! 1.5 !      <- The main trunk
+-----+    +-----+    +-----+    +-----+    +-----+
                !
                !
                !   +---------+    +---------+    +---------+
Branch 1.2.4 -> +---! 1.2.4.1 !----! 1.2.4.2 !----! 1.2.4.3 !
                    +---------+    +---------+    +---------+

1.31.1 branch는 어떻게 만들죠?

$ cvs checkout project; cd project
$ cvs update foo.c
$ cvs tag release-1 .
$ cd ..; cvs release -d project

$ cvs checkout -r release-1 project
$ cvs release -d project

$ cvs rtag -b -r release-1 release-1-patches project
$ cvs checkout -r release-1-patches project
$ cvs commit -m "Fixed printf bug" foo.c
$ cd ..;  cvs release -d project

cvs를 사용할 때 Branch를 해서 버젼을 만들고 메인 버젼이 올라가면 다시 메인버젼과 머지를 하고.. 등의 작업을 수행할 때, 먼저 브랜치를 할 파일들에 태그를 달아주고 태그를 기준으로 브랜치를 만드는 것이 편한 것 같습니다.

명령어는 다음과 같습니다.

cvs rtag -r arab -b arab_xxx ggg

이렇게 하면 ggg라는 프로젝트에서 arab 태그가 붙은 것을 arab_xxx 브랜치로 작성하겠다. 라는 의미가 됩니다. 태그는 먼저 달아주어야 하겠지요.

그리고 태그와 브랜치는 다르다는 점을 미리 아시면 좋겠고.. 만일 wincvs를 사용하신다면 graph를 보시게 되면 tag는 검정색 얇은 선 브랜치는 파란색 굵은 선으로 나뉘는 것을 알 수 있습니다. --최성우 / eatingstars.com

브랜치를 쉽게 만드는 방법입니다.
$ cvs tag -b BRANCHNAME
이 명령을 실행한 작업소는 앞으로 이 브랜치로 작업을 하게 됩니다.

1.31.2 merge는 어떻게 하는 겁니까?

$ cvs checkout -j release-1-patches project
$ cvs commit -m "Merged patch"

1.32 과거 특정 시점에 소스가 어땠는지 보고 싶습니다.

태그를 붙여 두지 않았다면, 날자와 시간을 써서 다음과 같이 작업하는 것도 가능합니다.
$ cvs rtag -b -D "2000-01-01  00:00" first-millenium-release project
$ cvs get -D "3 month ago" myproj
$ cvs get -D "1999-11-23  09:00" oldproj

CVS가 지원하는 날자/시간 지정 형식 몇 가지는 다음과 같습니다.
"1971-04-30  04:35" (ISO format)
"30  Apr  1971  04:35" (Internet format)
"Tue Jan 25 08:45:45 UTC 2000"
"3/31/92 10:00:07 PST"
"January 23, 1987 10:05pm"
"22:00 GMT"
"1 month ago"
"2 hours ago"
"400000 seconds ago"
"last year"
"last Monday"
"yesterday"
"a fortnight ago"

1.33 CVS 서버에 어떤 module이 있는지 어떻게 알 수 있나요?

CVS에서 제공하는 명령어를 통해 정상적으로 알아낼 수 있는 방법은 없습니다. :-( 그렇지만 꼭 필요한 경우에 흔히 사용되는 방법이 몇 가지 있습니다.

  1. 프로젝트 관리자에게 물어보세요 :-)
  2. 프로젝트 관리자가 수동으로 CVSROOT/modules 에 등록해 놓으면 다음 명령으로 module의 목록을 볼 수 있습니다.
      $ cvs co -c
      
  3. 잘 관리되는 프로젝트라면 일반적으로 cvsweb 이나 viewcvs 같은 웹 인터페이스를 제공할 것입니다. 그걸 이용하세요. 만약 없다면 서버 관리자에게 그런 프로그램을 설치해 달라고 요청하세요.
  4. 위 방법이 모두 안된다면, 다음 스크립트를 써서 간접적으로 알아낼 수도 있습니다.
      $ cvsls.sh HEAD .
      
    #!/bin/sh
    
    # lists files and directories in the module(s) on the server without
    # checking them out
    
    # cvsls BranchName modules...
    # for main trunk use 'cvsls HEAD modules...'
    
    branch=$1; shift
    
    cvs rdiff -s -D '01/01/1971' -r $branch "$@"  2>&1 \
        | sed -e 's/File.//' \
                      -e 's/is new; current revision./      (/' \
                      -e 's/(\([0-9][\.0-9]*\)/(\1)/' \
                      -e 's/cvs server: Diffing/cvs server: Listing/'
    
    


1.34 CVSROOT/modules에 모듈 등록은 어떻게 하나요?

cvs co CVSROOT 하여서 modules 파일을 수정하신 후에 commit 하셔야 합니다. 이때 위와 같은 목적으로 활용하실 계획이라면 간단하게 다음과 같이 적으시면 됩니다.
module_A  module_A
module_B  module_B
위의 내용은 module_A라는 것이 repository root에 존재하는 경우 입니다.

1.35 CVSROOT/passwd에 사용자를 어떻게 추가하나요?

몇 가지 방법이 있지만, 가장 간단한 방법 가운데 하나는 apache 패키지에 들어 있는 htpasswd 명령을 이용하는 것입니다.

  $ htpasswd -b passwd username password

1.36 익명 사용자는 어떻게 등록하나요?

$ cat $CVSROOT/CVSROOT/readers
cvs
cvsguest

1.37 CVS가 /root 아래 파일을 찾으려 듭니다! 이게 뭔가요?

pserver 설정을 해줄 때 아래와 같은 에러가 나는 경우가 있습니다.

cvs server: cannot open /root/.cvsignore: Permission denied

이럴 땐 inetd 나 xinetd 설정을 해줄 때 cvs에 넘겨줄 인수에 '-f' 옵션을 추가해주면 해결됩니다. xinetd 라면 /etc/xinetd.d/cvspserver 내용을 아래와 같이 해 주면 됩니다.

# default: on
# description: cvs pserver
service cvspserver
{
        disable         = no
        flags           = REUSE
        socket_type     = stream
        wait            = no
        user            = root
        server          = /usr/bin/cvs
        server_args     = -f --allow-root=/home/cvs pserver
        log_on_failure  += USERID
}

1.38 Repository를 다른 기계로 옮기고 싶습니다.

Q : 만일 A 서버에 있던 repository 를 B 서버로 옮기고 싶다면 그냥 디렉토리를 통채로 복사하면 되려나요? 그게 안 된다면 죄다 update 후 새로 import 를 하라는 얘기인데... -_-;;

A : 네 그냥 옮기면 됩니다. 완벽한(?) 이전을 위해서라면 조금 신경써야할 것들이 더 있긴 하지만, 디렉토리를 통째 tar로 묶어서 새 기계게 풀어준 다음 permission 조절만 해줘도 웬만큼 됩니다.

1.39 CVS 서버에 있는 repository를 미러링할 수 없나요?

단순한 백업 이상을 의미하는 것이라면, CVS는 기본적으로 단일 repository를 바탕으로 설계되었기 때문에 자체적으로는 불가능합니다. 대규모 프로젝트 같은 경우에 전세계 곳곳에 미러를 하기 위해 CVSup 같은 보조도구를 이용하거나, 단순히 rsync 같은 미러링 툴을 이용하기도 합니다. 그러나 이 경우 하위 repository에 commit 한 내용을 다시 상위(upstream)로 merge 하는데 기술적인 어려움이 따릅니다. 그렇지만 경우에 따라 효과적인 개발 브랜치나 로컬 개발자 그룹 지원을 위해서는 꼭 필요한 기능이기 때문에, CVS가 가지는 근본적인 제약을 극복하고자 새로 개발되는 프로그램이 있습니다. 만약 꼭 계층적 repository를 구축해야 하는 상황이라면, 다음 프로그램을 사용하는 것을 고려해 보세요.

최근에 XFree86 프로젝트를 arch를 이용해 fork한 사례가 있습니다. : http://www.xouvert.org/

1.40 module들을 공유할 수 있는 방법이 있나요?

Q : 예를 들어서 libx라는 모듈이 있고, proj_a와 proj_b가 이를 모두 사용합니다. 이때 이 두 프로젝트가 유사하여서 libx를 한쪽에서 수정하면 다른 한쪽에서도 영향을 받아야 하는 경우라면 어떻게 해야 할까요? 서버에서 symbolic link를 걸어주거나, 클라이언트측에서 proj_a, proj_b에 모두 libx를 checkout해주면 되겠지만 다소 불편함이 없지 않아 있을것 같아서 여쭤 봅니다.

A : 가능합니다.

CVS에서는 프로젝트 관리를 위해 어떤 모듈을 checkout할 때 하위 모듈을 선별적으로 checkout하거나 가상 모듈을 만들어 실제 모듈을 여러개 동시에 checkout하는 것 등을 지원합니다. 기본적으로는 CVSROOT/modules 파일을 적절히 구성해서 프로젝트에 참여하는 개발자들이 필요한 부분을 잘 골라 받아갈 수 있도록 관리해줘야 합니다. 한가지 짚어두고 싶은 것은, CVS는 소스 버전 관리 프로그램이지 어떤 특정 프로젝트 구조를 정해둔게 아니기 때문에 실제 해결 방식은 진행하는 프로젝트 구성 및 정책에 따라 달라집니다.

간단하게 두가지 경우를 예로 들어보지요.

1. proj_a 와 proj_b, 그리고 libx를 더 큰 proj 으로 묶을 수 있는 경우

CVSROOT/modules 내용은
proj    proj  proj_a proj_b libx
proj_a  proj  proj_a libx
proj_b  proj  proj_b libx
libx    proj  libx
와 같이 되고, checkout을 하게 되면 proj 디렉토리가 먼저 생기고, 그 아래에 각 모듈이 생깁니다.

2. proj_a 와 proj_b 는 별개 프로젝트이고 libx 도 별개로 관리하는 경우

CVSROOT/modules 내용은
proj_a  -a  proj_a libx
proj_b  -a  proj_b libx
libx    libx
이렇게 되고, 예를 들어 cvs checkout proj_a 를 하게 되면 proj_a와 libx라는 모듈이 각각 생성됩니다. 이 경우 libx에 autotools(libtool)을 채용하든가 proj_a와 proj_b 빌드하는데 연결되도록 적절히 구성해줘야 하겠죠.

두가지가 무슨 차이냐? 라고 혹시 생각하는 분이 있을지 모르겠는데, 전자에서는 최상위 디렉토리에 라이브러리를 포함한 빌드 시스템을 구축 관리할 수 있기 때문에 성격이 많이 달라집니다.

또, 경우에 따라
proj    proj
proj_b  proj  proj_a
proj_a  proj  proj_b
libx    libx
이런 식으로 구성하는 경우도 생기겠지요.

심볼릭 링크를 걸어주는 것도 편법으로 가능은 하지만, 모듈이나 라이브러리 관리라는 측면에서 본다면 그다지 바람직하지는 않습니다. 물론 불가피한 상황이 있을 수도 있으나 대개는 '라이브러리'라는 것 자체가 해당 코드를 별개로 독립시켜야할 만큼 여러 곳에서 쓰는 경우에 한해 만드는 것이므로 위에서 예를 든 두 가지 경우를 적절히 섞어서 구성하고, autotools 등을 잘 이용하면 해결할 수 있습니다. (DeleteMe 이 주제는 CVS/FAQ라는 범위를 벗어나는 것 같아 이정도만 적습니다.)

1.40.1 간단한 방법

단순히 어떤 모듈을 가져올 때 특정 하부 모듈을 같이 가져오도록 하려면 다음과 같이 하면 됩니다.
proj_a proj_a &libx
proj_b proj_b &libx
libx libx
이렇게 하면 proj_a를 체크아웃할 때 proj_a 디렉토리 아래에 추가로 libx 디렉토리가 생깁니다.

1.41 Source file에 강제로 revision을 지정할 수 있나요 ?

Q : 예를 들어서 어떤 소스의 revision #가 1.12라고 할 때 어떤 계기로 인해서 이 번호의 제일 앞자리 숫자를 바꾸려고 하면 어떻게 하면 되나요 ?

A : 가능합니다.
cvs ci -m "revision set to 2.0" -r2.0 ohmysrc.c
해당 프로젝트/모듈 전체를 한번에 바꾸려면, checkout 받은 모듈 최상위 디렉토리에서
cvs ci -m "revision set to 3.1" -r3.1
와 같이 하면 됩니다.

그러나

가능하다고 해서 반드시 이렇게 하는게 좋다는 것은 아닙니다.

그러므로

Tag나 Branch를 써야하는 경우가 아닌지 다시 한번 생각해보세요.

1.42 CVS도 VSS처럼 배타적 락(Exclusive Lock)을 걸어 놓고 사용할 수 있나요?

cvs admin -l filename
을 이용하시면 됩니다. 이 경우 해당하는 사람이 lock을 제거하기 전까지는 commit이 불가능하게 됩니다. 하지만 이렇게 하는 것은 대부분 문서에서 그다지 권장하지 않더군요. cvs watch 이용하기를 권장하고 있습니다.

보통은 cvs edit를 써서 원하는 효과를 얻을 수 있습니다. cvs edit는 동시에 edit하는 것을 방지하지 않지만, cvs edit -c filename 을 모든 사람이 이용하게 된다면 그 순간에는 한 사람만이 작업을 할 수가 있게 됩니다. -c 옵션을 준 것을 reserved edit라고 하며, 이 경우에도 누구나 commit은 가능합니다.

1.43 Repository에 Attic 이란게 있던데 이건 뭔가요?

사용자가 지운(cvs rm) 파일을 보관해두는 곳입니다. Attic이 우리말로 하면 "다락"인데, 자주 쓰지는 않지만 버리긴 아깝고 혹시 필요하게 될지 모르는 물건을 저장한다는 점에서 보면 상당히 잘 지은 이름 같습니다.

사용자가 cvs rm을 해서 파일을 지우게 되면, 해당 파일들이 완전히 삭제되는게 아니라 Attic 아래에 옮겨집니다. 그리고 과거 버전을 checkout 하거나 할때 끄집어내서 쓰는 거지요.

1.44 Unicode file을 지원하지 못하는가요?

Q : 이러한 메시지를 만났습니다.
cvs import: Remote server does not support Unicode files.  Checkin may be invalid.
여러개의 파일을 한꺼번에 import할때 나왔으며, 이를 다시 수정하여 ci할때에도 나타났습니다. 음.. 첫번째 파일에서 이러한 문구가 나타났는데, 평범한 C++ code라서 다른 파일이 아닌가 합니다. 아울러 -ku라고 나타나는 메시지도 무엇인지 모르겠네요.
cvs commit: Remote server does not support Unicode files.  Checkin may be invalid.
Checking in ***.cpp;
cvs server: internal error: unsupported substitution string -ku
/***.cpp,v  <--  ***m.cpp
new revision: 1.2; previous revision: 1.1
done
해당 파일 안에 유니코드로 된 텍스트가 들어있나요? 혹시 RCS keyword substitution 으로 쓰이는 내용이 들어있나요?

1.45 이미 Text로 업로드 된 파일을 Binary로 바꿀 수 있는가요?

바이너리로 업로드하려면 -kb옵션을 사용합니다. 예를들어,
$ echo '$Id: CVS_2fFAQ,v 1.99 2005/08/19 01:21:43 kss Exp kss $' > kotest
$ cvs add -kb -m"A test file" kotest
$ cvs ci -m"First checkin; contains a keyword" kotest
입니다.

만약 실수로 -kb옵션을 빠뜨리고 (텍스트로)업로드 했을경우, 바이너리로 복구하려면 cvs admin 옵션으로 아래의 예처럼 바꾸면 됩니다.
$ echo '$Id: CVS_2fFAQ,v 1.99 2005/08/19 01:21:43 kss Exp kss $' > kotest
$ cvs add -m"A test file" kotest
$ cvs ci -m"First checkin; contains a keyword" kotest
$ cvs admin -kb kotest
$ cvs update -A kotest
# For non-unix systems:
# Copy in a good copy of the file from outside CVS
$ cvs commit -m "make it binary" kotest

1.46 이미 Binary로 업로드 된 파일을 Text로 바꿀 수 있는가요?

한글이 들어있는 파일을 WinCVS를 통해서 add/import를 하게 되면 binary를 권장합니다. 이때, 실수로 Binary로 add/import하게 되면 merge기능을 지원하지 않아 불편하게 되지요. 이럴 때, 위의 Text->Binary와는 반대의 작업이 필요하게 되는데, 위의 내용과 같고, 옵션만 -kb가 아닌 -kkv로 해 주면 됩니다.
$ cvs admin -kkv kotest

-- DeleteMe 이것으로 한참 고민하고 이것 저것 해 본 결과 알아 냈습니다만, 여기서 말하는 keyword라는 게 정확하게 의미하는 바를 모르겠습니다. 아시는 분은 설명 부탁드립니다. (-kkv의 help에는 Generate keywords using the default form.라고 되어 있습니다.) barmi

1.47 로그를 잘못 적었는데 고칠 수 없을까요?

$ cvs admin -m1.2:"new log" myprog.c

태그가 붙어 있는 경우라면
$ cvs admin -mV_1_0:"massive new log"
이렇게 한번에 바꾸는 것도 가능합니다.

1.48 Tag에 comment를 붙이는것은 가능한가요

AnswerMe 질문이 조금 애매한것 같습니다. 제목만 보고는 어떤 상황인지 정확히 알 수 없어 답변이 두루뭉실합니다. 조금더 상황을 설명해 주시지요?

tag를 붙이면서 거기에 대한 로그를 어딘가에 기록해둘 수 없냐는 얘긴가요? 그런거라면 대답은 불가능하다 입니다. CVS는 파일 별로 로그를 붙이게 돼 있는 RCS를 계승하기 때문에 각 checkin 별로 기록을 할 수 없다는 단점이 있습니다. 그래서 Subversion 같은 경우 아예 파일별 revision이 아니라 per-checkin revision을 모듈 단위로 붙여주는 방식을 채택했습니다.

만약 tag 자체에 대해 어딘가에 기록을 남기고 싶은 거라면 ChangeLog 나 README 등에 내용을 적어두는 것으로 대체할 수도 있습니다.

질문자입니다. 말씀해 주신 내용이 정확합니다. 제가 보기에도 file 단위로 log message를 남기는 것 같아서 여쭤 보았던 것입니다. 아직 익숙하지 못해서인지 좀 불편한 점으로 생각되어서 질문을 했던 것입니다. :)

http://www.cvstrac.org/ CVS mod인것 같은데 check-in 단위로 기록을 남길수 있습니다. http://www.sqlite.org 에서 사용 하는걸 보면 괜찮아 보입니다.

1.49 Unknown command 라는 에러가 납니다.

Q: 접속시에
cvs [login aborted]: unrecognized auth response from 127.0.0.1: Unknown command: `/home/cvs'
라고 나오네요.. 강좌대로 했다고 생각했는데.. passwd file 문제인가요? redhat 9.0을 쓰고 있읍니다.

A: -d 옵션 (CVSROOT) 줄 때 사용자@서버명:과 /디렉토리/경로 사이에 빈 칸이 들어가 있는 것 같습니다.
$ cvs -d :pserver:anonymous@anonymous.com:/cvsroot
이렇게 전부 붙여줘야 합니다.

1.50 항상 최신버전의 소스를 유지하고 싶어요

항상 최신의 버전을 유지하지 않고 작업을 하니 Commit시 자주 Conflict가 발생합니다. WinCVSTortoiseCVS를 써 보았는데 최신 버전으로 유지해 주는 기능을 안 보이던데요. 덧붙여 update시 발생하는 conflict를 줄이고 싶습니다. update시 merge를 선택적으로 할 수는 없나요? 예를 들어서 '이 파일은 더 최근의 것이 존재합니다. merge할까요? (Y/n)' 이런식으로요.

* WinCVS에서 우선 update합니다. 그럼 merge나 conflict 되어 있을겁니다. 다시 update하면서 update settings중 Get the clean copy를 체크하시면 됩니다.
Clean copy를 받고 싶은게 아니라 local modify 파일은 update를 받고 싶지 않은 경우를 말씀 드렸답니다. ^^ 그리고 update 명령을 자동으로 수행할 수 있는 방법이 있으면 좋겠다는거였습니다. 2가지가 상충된 질문을 드려서 헷갈리셨나 봅니다. _ 감사합니다.
그런 경우 Update query 해서 저장소에 변경된 파일을 확인한 후 그 파일들만 선택해서 업데이트 하시면 됩니다. 스크립트 하나 만들어 보시는 것도 좋을듯 합니다. :)

1.51 이전버전으로 되돌리고 싶어요(Rollback)

http://bbs.kldp.org/viewtopic.php?t=28936

1.52 CVS를 쓸까요 Subversion을 쓸까요?

Q : 이제서야 CVS라는 것에 대해 알게 되어 배워볼까 했더니 CVS의 불편한 점을 개선한 Subversion이 나왔다고 하네요. 처음 배우는 사람은 바로 Subversion을 익혀야 하나요? 아니면 CVS 를 먼저 익혀야 하나요?

A : 대부분의 오픈소스가 CVS로 진행 되니 CVS를 먼저 익히는것이 좋겠죠. Subversion이 안정적이라고 하긴 하나 공식적인 stable 버전은 언제쯤 나올지는... 요즘 한달에 두번씩 버전이 올라가는데 업데이트 해주기 좀 귀찮더군요. CVS에 불만이 생기면 그때 슬슬 바꾸시면 됩니다.

A : SubVersionCVS의 불편한 점을 개선했다기 보다는 완전히 다른 프로그램으로 보는게 맞습니다. 상호 호환성도 없고, 단지 SubVersion에서 기존에 CVS로 운영되던 프로젝트를 import할 수 있게 해놨을 따름입니다. revision/version 관리 모델 자체도 전혀 다릅니다. 시기상 나중에 만들어졌기 때문에 CVS가 가지는 단점들을 상당 부분 개선한 것은 사실입니다만, 개발 모델 자체에 대한 접근 방식이랄까 철학이랄까 그런게 다른 부분이 있어 보여서 제 경우엔 조금 관망하는 중입니다. 버전 컨트롤 프로그램을 전혀 써보지 않은 사람 입장에서 어느 쪽이 더 익히기 쉽다든가 하는 건 잘 모르겠군요. SubVersionCVS를 쓰던 사람은 쉽게 옮겨갈 수 있다고 얘기합니다만 그거랑은 별개라서 말이죠. --verotas

2 help 사용법

버전 확인
$ cvs --version
Concurrent Versions System (CVS) 1.11.2 (client/server)

그냥 cvs만 치면 help 사용법이 자세히 나온다.
$ cvs
Usage: cvs [cvs-options] command [command-options-and-arguments]
  where cvs-options are -q, -n, etc.
    (specify --help-options for a list of options)
  where command is add, admin, etc.
    (specify --help-commands for a list of commands
     or --help-synonyms for a list of command synonyms)
  where command-options-and-arguments depend on the specific command
    (specify -H followed by a command name for command-specific help)
  Specify --help to receive this message

The Concurrent Versions System (CVS) is a tool for version control.
For CVS updates and additional information, see
    the CVS home page at http://www.cvshome.org/ or
    Pascal Molli's CVS site at http://www.loria.fr/~molli/cvs-index.html

특정 명령어 옵션을 자세히 보려면
$ cvs -H update
Usage: cvs update [-APCdflRp] [-k kopt] [-r rev] [-D date] [-j rev]
    [-I ign] [-W spec] [files...]
......

사용할 수 있는 명령어 생략형은 다음과 같다.
$ cvs --help-synonyms
CVS command synonyms are:
        add          ad new
        admin        adm rcs
        annotate     ann 
        checkout     co get
        commit       ci com
        diff         di dif
        export       exp ex
        history      hi his
        import       im imp
        log          lo 
        login        logon lgn
        rannotate    rann ra
        rdiff        patch pa
        release      re rel
        remove       rm delete
        rlog         rl 
        rtag         rt rfreeze
        status       st stat
        tag          ta freeze
        update       up upd
        version      ve ver
(Specify the --help option for a list of other help options)

3 용어

repository working file working directory (or area) checkout commit (checkin) RCS file modules revision tag branch "the trunk" HEAD / BASE merge conflict

4 문서를 만들면서

개인적으로, 몇 년 전 CVS를 처음 배우면서 제일 어려웠던게 간단한 소개 문서는 한글로 된게 있었지만 조금만 더 상세한 걸 찾아보려면 제대로 된 (영어든 한글이든) HOWTO 같은게 있지도 않았고, (지금도 있는지는 모르겠지만) Faq-O-Matic 으로 된 영어 FAQ 사이트가 레퍼런스로 쓸만한 유일한 곳이었습니다. 그래서 그때부터도 처음 오픈소스 세상을 접하는 개발자에게 CVS라는 장벽을 뛰어 넘는데 보탬이 되는 문서 같은게 꼭 필요하다고 느끼고 있었습니다.

그동안 CVS를 다룬 책도 출간되었고 CVS 다음 세대가 될만한 다른 프로그램들도 나왔고 해서 하려고만 든다면 상대적으로 자료 찾기나 배우기가 더 쉬워진 면도 분명 있습니다. 그렇지만 본래 좋은 HOWTO 들이 그러하듯이 처음 시작하는 사람이 딱 그 문서 하나만 찍어서 옆에 두고 손으로 짚어가며 따라하면 일단 ''시작'은 어떻게든 해볼 수 있는 글이 아쉬웠고, 글 서두에 밝혔듯이 현재 존재하는 한글로 된 CVS 관련 문서들은 담고 있는 정보가 가지는 유용성에 비해 집약도(?)가 떨어지고, 사용자에게 필요한 내용과 관리자에게 필요한 내용이 잘 구분이 되어 있지 않아 결과적으로 처음 접하는 사람에게 문턱을 낮추는 역할에 충실하지 못한 부분이 있다고 생각합니다.

장기적으로는 이런 것들을 해결할 수 있는 좋은 글이 나와야 하겠지만, 아쉬운 대로 "KLDP에 있는 문서를 보고 따라하다 보니 이런 문제에서 걸리는데 어떻게 하면 되는 거냐" 하는 질문에 대한 답 정도라도 생각나는 대로 정리해 보자 라고 생각해서 시작하게 됐습니다. 앞으로도 생각나는 대로 항목들 추가해 나가면서 정리해 나갈 생각입니다. --verotas

Thanks to 권순선, 쫑아, voxel, IrIz, Advanced

5 관련 자료

Posted by 1010
98..Etc/Etc...2008. 9. 5. 12:53
반응형
Posted by 1010
98..Etc/Etc...2008. 9. 5. 09:13
반응형
Posted by 1010
반응형
 스크립트 목적
  - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 Popup Object)로 자동 변환

* 주요 기능 및 특징
  - 기존 셀렉트박스 태그의 수정 없이 스타일 시트에 정의하는 것만으로 모든 셀렉트박스 변환 가능
  - 셀렉트박스를 기준으로 아래위의 여백을 비교하여 옵션 항목 창의 출력 방향 결정
  - 기존 셀렉트박스처럼 변환된 셀렉트박스도 포커스를 가질 수 있음
    <script>document.getElementById('SelectBox_Name').focus();</script>
  - 변환된 셀렉트박스가 포커스를 가지고 있을 경우 휠을 움직이거나 키보드의 Home, End, Page Up, Page Down,
    Up Arrow, Down Arrow 등을 누름에 따라 값의 변경이 가능
    또한 열려진 옵션 항목 창에서도 가능함
  - 위의 이벤트 시에 문서의 스크롤을 제어하여 문서의 움직임이 없음
  - 아이프레임 및 프레임에 삽입된 상황에서도 프레임에 영향을 받지 않고 정상적으로 출력
    (Layer가 아닌 Popup Object를 이용)
  - 셀렉트박스의 항목이 동적으로 변경할 경우를 위한 메소드 제공
    <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script>
  - 옵션 항목 창에 출력될 항목의 갯수를 지정(setDisplayCount() 메소드 이용)할 수 있으며 항목이 출력될
    갯수보다 많을 경우 자동으로 스크롤바 생성 (기본값은 10)
  - 셀렉트박스 및 옵션 항목에 대해 툴팁 메세지 설정 가능
  - 특정 셀렉트박스의 색상 및 화살표 이미지 변경 가능
  - 변환된 레이어를 텍스트처럼 취급 (연속적인 출력이 가능, 하단 여백 없음)
  - HTC 가 지원되는 브라우져에서만 변환 (HTC는 5.0 이상에서 가능하나 createPopup() 메소드가 5.5부터
    지원되어 IE 5.5 이상에서만 변환)
  - 옵션 항목 창 출력시 일시적으로 문서가 길어져 스크롤바가 출력되는 일이 없음

* 사용 방법
  - 스타일시트에 미리 정의하는 방법
  <style>select{ behavior: url('./selectBox.htc');}<style>
  - 특정 SelectBox 폼필드에만 적용하는 방법
  <select style="behavior: url('./selectBox.htc');"></select>


* 셀렉트박스 포커스 처리
  - 일반적인 SelectBox와 동일하게 처리 -> <script> document.getElementById('selectbox').focus();</script>
  - 셀렉트박스가 포커스를 가진 상황에서 휠을 움직이거나 Home, End, Page Up, Page Down,
    Up Arrow, Down Arrow 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
  - 동적 처리 ->

<body onLoad="document.getElementById('selectbox_focus').focus();">
1번 항목

* 셀렉트박스 동적 변경 처리
  - 셀렉트박스의 항목을 동적으로 변경할 경우 reInitializeSelectBox() 메소드를 이용하여 재변환 가능
  - 셀렉트박스의 항목을 동적으로 추가 및 삭제할 경우 변환된 셀렉트박스를 제거 후 다시 변환함
    <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script>

<script>
function addItem(selected_index){
  var objSB = document.getElementById("selectbox_dc_1");
  for(i=0; i<10; i++){
    objNewOption = new Option();
    objNewOption.text = "추가된 "+i+"번째 항목";
    objSB.add(objNewOption,objSB.length);
  }
  if(selected_index) objSB.selectedIndex = selected_index;
  objSB.reInitializeSelectBox();
}
</script>

2번 항목

<script>
function changeItem(selected_index){
  var objSB = document.getElementById("selectbox_dc_2");
  for(i=0; i<10; i++){
    objSB.add = new Option("변경된 "+i+"번째 항목",i);
  }
  if(selected_index) objSB.selectedIndex = selected_index;
  objSB.reInitializeSelectBox();
}
</script>
2번 항목

* 색상 및 화살표 이미지 설정
  setColor="일반폰트색상,일반배경색상,롤오버폰트색상,롤오버배경색상,일반보더색상,롤오버보더색상"
  setImage="./arrow_image.gif" (14*16 이하 사이즈)
<select> (기본형)
1번 항목
<select setColor="#000000,#FFFFFF,#000000,#E6E4E4,#C0C0C0,#000000">
1번 항목
<select setColor="white,red,black,white,blue,yellow">
1번 항목
<select setImage="./arrow_image2.gif">
4번 항목
setColor와 setImage 동시 적용
3번 항목

* 툴팁 메세지 설정
  - 셀렉트박스 및 옵션 항목에 툴팁 메세지를 설정하는 것이 가능 함
  - 셀렉트박스 태그 및 옵션 항목 태그에 tooltip="툴팁 메세지" 와 같이 프로퍼티 추가

    <select name='selectbox_tooltip' tooltip='필수 항목이니 꼭 선택하세요'>
     <option value='1' tooltip='첫번째 항목'>1번 항목</option>
     <option value='2' tooltip='두번째 항목'>2번 항목</option>
     <option value='3' tooltip='세번째 항목'>3번 항목</option>
     <option value='4' tooltip='네번째 항목'>4번 항목</option>
     <option value='5' tooltip='다섯번째 항목'>5번 항목</option>
    </select>
3번 항목

* 최대 출력 갯수 설정
  - 옵션 항목 창에 출력될 항목의 갯수를 설정 가능
  - setDisplayCount="출력될 갯수" 를 이용하여 설정

<select name="selectbox_count_1" setDisplayCount="5">
1번 항목
<select name="selectbox_count_2" setDisplayCount="10">
10번 항목
<select name="selectbox_count_3" setDisplayCount="15">
1번 항목

* SelectBox의 넓이 설정
  - style="width:200px" 와 같이 설정 가능
  - 별도의 넓이 설정이 없을 경우에는 변환 전의 셀렉트박스의 넓이 값(this.style.offsetWidth)으로 설정 함
    (offsetWidth 값을 못 읽을 경우 이전 버전에서 사용하던 문자열의 넓이를 픽셀로 구하는 함수 이용)

<select style="width:200px" >
스타일을 200px로 설정함
자동 설정 ( 옵션 내용이 한글만 )
옵션 텍스트가 한글만 있을 경우
자동 설정 ( 옵션 내용이 영문만 )
This option text is english...
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 )
한글 + English + 1234567890

* 테이블 안에서의 정렬
  - 테이블 안에서 셀의 정렬에 따라 자동 적용

왼쪽 정렬
왼쪽 정렬
중앙 정렬
중앙 정렬
오른쪽 정렬
오른쪽 정렬

* onChange 이벤트 처리
  - 일반적인 SelectBox와 동일하게 처리

<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)">
1번 항목
<select onChange="location.href=this.options[this.selectedIndex].value;">
:: 검색 사이트로 이동 ::

* 스크롤바 및 레이어 위치 테스트
  - 셀렉트박스의 문서에서의 위치에 따라 옵션 항목 창을 위로 보여주거나 아래로 보여줌.
  - 또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨.
  - 기본적으로는 셀렉트박스를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 옵션 항목 창이 출력되나
    공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴
  - 단, 하단 여백이 204px보다 적을 경우에도 하던 여백과 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨
  - 문서를 스크롤하여 아래의 셀렉트박스를 기준으로 아래위의 공간을 조절한 후 셀렉트박스를 클릭하면 알 수 있음

테스트용 1 (항목이 2개)
1번 항목
테스트용 2 (항목이 5개)
1번 항목
테스트용 3 (항목이 10개)
1번 항목
테스트용 4 (항목이 15개)
1번 항목
테스트용 5 (항목이 100개)
1번 항목

* 아이프레임 테스트
  - 아이프레임 또는 프레임 안에 셀렉트박스가 있을 경우 옵션 항목 창이 아이프레임 및 프레임을 넘어서 정상적으로
   출력 가능함



Posted by 1010
반응형

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" href="/css/admin.css" type="text/css">
<script language="javascript">
<!--
function Category(value, name, parent, depth) {
  this.value = value;
  this.name = name;
  this.parent = parent;
  this.depth = depth;
  this.length = 0;
}

function addCategory(category, value, name, parent, depth) {
  category[category.length] = new Category(value, name, parent, depth);
  category.length++;
}

var category = new Category();
var category1 = new Category();

addCategory(category, '00', '자동차계약', '01', '1');
addCategory(category, '01', '개인용', '01', '2');
addCategory(category, '02', '업무용', '01', '2');
addCategory(category, '03', '영업용', '01', '2');
addCategory(category, '04', '플러스 개인용', '01', '2');
addCategory(category, '05', '플러스 업무용', '01', '2');
addCategory(category, '06', '참좋은 개인용', '01', '2');
addCategory(category, '99', '기타', '01', '2');
addCategory(category, '00', '자동차보상', '02', '1');
addCategory(category, '01', '대인Ⅰ', '02', '2');
addCategory(category, '02', '대인Ⅱ', '02', '2');
addCategory(category, '03', '대물', '02', '2');
addCategory(category, '04', '자손', '02', '2');
addCategory(category, '05', '자차', '02', '2');
addCategory(category, '06', '무보험', '02', '2');
addCategory(category, '07', '상해', '02', '2');
addCategory(category, '08', '타차', '02', '2');
addCategory(category, '99', '기타', '02', '2');
addCategory(category, '00', '보장사업', '03', '1');
addCategory(category, '00', '장기계약', '04', '1');
addCategory(category, '01', '재물', '04', '2');
addCategory(category, '02', '운전자', '04', '2');
addCategory(category, '03', '저축성', '04', '2');
addCategory(category, '04', '상해', '04', '2');
addCategory(category, '05', '연금', '04', '2');
addCategory(category, '06', '질병', '04', '2');
addCategory(category, '99', '기타', '04', '2');
addCategory(category, '00', '장기보상', '05', '1');
addCategory(category, '01', '재물', '05', '2');
addCategory(category, '02', '상해', '05', '2');
addCategory(category, '03', '질병', '05', '2');
addCategory(category, '04', '연금', '05', '2');
addCategory(category, '05', '저축성', '05', '2');
addCategory(category, '06', '운전자', '05', '2');
addCategory(category, '99', '기타', '05', '2');
addCategory(category, '00', '일반보상', '06', '1');
addCategory(category, '01', '화재', '06', '2');
addCategory(category, '02', '기술', '06', '2');
addCategory(category, '03', '근재', '06', '2');
addCategory(category, '04', '배상', '06', '2');
addCategory(category, '05', '종합', '06', '2');
addCategory(category, '06', '상해', '06', '2');
addCategory(category, '07', '기타특종', '06', '2');
addCategory(category, '08', '종합(物)', '06', '2');
addCategory(category, '09', '기타특종(物)', '06', '2');
addCategory(category, '99', '기타', '06', '2');
addCategory(category, '00', '융자', '07', '1');
addCategory(category, '00', '영업', '08', '1');
addCategory(category, '00', '기타', '09', '1');
addCategory(category, '00', '일반계약', '10', '1');
addCategory(category, '01', '상해', '10', '2');
addCategory(category, '02', '재물', '10', '2');
addCategory(category, '99', '기타', '10', '2');

addCategory(category1, '10000', '자동차계약', '00000', '1');
addCategory(category1, '20000', '장기계약', '00000', '1');
addCategory(category1, '30000', '고객서비스', '00000', '1');
addCategory(category1, '10100', '계약인수', '10000', '2');
addCategory(category1, '10200', '계약관리', '10000', '2');
addCategory(category1, '10300', '계약해지', '10000', '2');
addCategory(category1, '20100', '계약인수', '20000', '2');
addCategory(category1, '20200', '계약관리', '20000', '2');
addCategory(category1, '20300', '계약해지', '20000', '2');
addCategory(category1, '30100', '임직원', '30000', '2');
addCategory(category1, '30200', 'PA', '30000', '2');
addCategory(category1, '30300', 'PA 제기 불만', '30000', '2');
addCategory(category1, '30400', '대출', '30000', '2');
addCategory(category1, '30500', '콜센터', '30000', '2');
addCategory(category1, '30600', 'SOS서비스', '30000', '2');
addCategory(category1, '30700', '현장출동', '30000', '2');
addCategory(category1, '30800', '시스템', '30000', '2');
addCategory(category1, '10101', '증권, 약관, 영수증 미수령', '10100', '3');
addCategory(category1, '10102', '인수기준 불만', '10100', '3');
addCategory(category1, '10103', '계약정보 착오입력', '10100', '3');
addCategory(category1, '10104', '자동이체 갱신특약 안내미흡', '10100', '3');
addCategory(category1, '10105', '특약/보상범위등 상품안내 미흡', '10100', '3');
addCategory(category1, '10106', '계약자 동의없이 임의 계약체결', '10100', '3');
addCategory(category1, '10107', '기타', '10100', '3');
addCategory(category1, '10201', '수납방법 배서누락', '10200', '3');
addCategory(category1, '10202', '자동이체일/갱신/연체/실효안내 미흡', '10200', '3');
addCategory(category1, '10203', '특약/담보변경사항 안내 미흡', '10200', '3');
addCategory(category1, '10204', '기타 요청 배서 지연 및 누락', '10200', '3');
addCategory(category1, '10205', '자동이체 해지/수납방법 변경 후 계좌에서 자동이체됨', '10200', '3');
addCategory(category1, '10206', '차량대체착오', '10200', '3');
addCategory(category1, '10207', '신용정보 유출 여부', '10200', '3');
addCategory(category1, '10208', '기타', '10200', '3');
addCategory(category1, '10301', '해지환급금 불만', '10300', '3');
addCategory(category1, '10302', '관련서류안내착오', '10300', '3');
addCategory(category1, '10303', '해지후 보험료 이체', '10300', '3');
addCategory(category1, '10304', '기타', '10300', '3');
addCategory(category1, '20101', '증권(영수증) 미수령', '20100', '3');
addCategory(category1, '20102', '인수기준 불만', '20100', '3');
addCategory(category1, '20103', '계약정보 착오입력', '20100', '3');
addCategory(category1, '20104', '피보험자 선정 착오', '20100', '3');
addCategory(category1, '20105', '특약/보상범위등 상품안내 미흡', '20100', '3');
addCategory(category1, '20106', '계약자 동의없이 임의 계약체결', '20100', '3');
addCategory(category1, '20107', '기타', '20100', '3');
addCategory(category1, '20201', '자동이체 약정일 임의 변경', '20200', '3');
addCategory(category1, '20202', '영업조직 임의로 실시간 출금', '20200', '3');
addCategory(category1, '20203', '특약/담보변경사항 안내 미흡', '20200', '3');
addCategory(category1, '20204', '수납방법 배서누락', '20200', '3');
addCategory(category1, '20205', '자동이체일/갱신/연체안내/실효안내 미흡', '20200', '3');
addCategory(category1, '20206', '기타 요청 배서 누락', '20200', '3');
addCategory(category1, '20207', '자동이체 해지/수납방법 변경 후 계좌에서 자동이체됨', '20200', '3');
addCategory(category1, '20208', '신용정보 유출 여부', '20200', '3');
addCategory(category1, '20209', '기타', '20200', '3');
addCategory(category1, '20301', '환급금 불만', '20300', '3');
addCategory(category1, '20302', '관련서류 안내착오', '20300', '3');
addCategory(category1, '20303', '해지후 보험료 이체', '20300', '3');
addCategory(category1, '20304', '기타', '20300', '3');
addCategory(category1, '30101', '업무처리 미흡', '30100', '3');
addCategory(category1, '30102', '응대 불친절', '30100', '3');
addCategory(category1, '30103', '약속 불이행', '30100', '3');
addCategory(category1, '30104', '직업윤리 위반', '30100', '3');
addCategory(category1, '30105', '기타', '30100', '3');
addCategory(category1, '30201', '업무처리 미흡', '30200', '3');
addCategory(category1, '30202', '계약후 별도의 관리없음', '30200', '3');
addCategory(category1, '30203', '응대 불친절', '30200', '3');
addCategory(category1, '30204', '약속 불이행', '30200', '3');
addCategory(category1, '30205', '보험료 유용', '30200', '3');
addCategory(category1, '30206', '직업윤리 위반', '30200', '3');
addCategory(category1, '30207', '기타', '30200', '3');
addCategory(category1, '30301', '수당,수수료 관련', '30300', '3');
addCategory(category1, '30302', '조직이관,해촉', '30300', '3');
addCategory(category1, '30303', '영업관리상 불만', '30300', '3');
addCategory(category1, '30304', '기타', '30300', '3');
addCategory(category1, '30401', '대출이자 관련', '30400', '3');
addCategory(category1, '30402', '신용정보 유출 여부', '30400', '3');
addCategory(category1, '30403', '소득정산관련', '30400', '3');
addCategory(category1, '30404', '대출이자연체 안내미흡', '30400', '3');
addCategory(category1, '30405', '기타', '30400', '3');
addCategory(category1, '30501', '응대 불친절', '30500', '3');
addCategory(category1, '30502', '상품/보상/배서 관련 착오안내', '30500', '3');
addCategory(category1, '30503', '변경업무 처리 미흡', '30500', '3');
addCategory(category1, '30504', '기타', '30500', '3');
addCategory(category1, '30601', '정비서비스 불만', '30600', '3');
addCategory(category1, '30602', '부당요금 청구', '30600', '3');
addCategory(category1, '30603', '출동지연', '30600', '3');
addCategory(category1, '30604', '현장조치 미흡', '30600', '3');
addCategory(category1, '30605', '업체 불친절', '30600', '3');
addCategory(category1, '30606', '업체 횡포 (부당한 요구)', '30600', '3');
addCategory(category1, '30607', '직원 복장/태도 불량', '30600', '3');
addCategory(category1, '30608', '기타', '30600', '3');
addCategory(category1, '30701', '현장출동 미실시(지연)', '30700', '3');
addCategory(category1, '30702', '현장조치 미흡', '30700', '3');
addCategory(category1, '30703', '직원 불친절', '30700', '3');
addCategory(category1, '30704', '직원 복장/태도 불량', '30700', '3');
addCategory(category1, '30705', '기타', '30700', '3');
addCategory(category1, '30801', '이메일 및 핸드폰으로 불필요한 안내', '30800', '3');
addCategory(category1, '30802', '전산 등 시스템으로 야기되는 불만', '30800', '3');
addCategory(category1, '30803', '홈페이지 관련 불만', '30800', '3');
addCategory(category1, '30804', '기타', '30800', '3');
 

function initForm() {
    var frm = document.form1;
    var j = 1;
    var k = 1;
    for (i = 0; i < category.length; i++) {
        if (category[i].depth == "1") {
            frm.ins_type.options[0] = new Option(":: 보험종목 ::", "");
            frm.ins_type.options[j] = new Option(category[i].name, category[i].parent);
            j++;
        }
    }
    for (i = 0; i < category1.length; i++) {
        if (category1[i].depth == "1") {
            frm.codeA.options[0] = new Option(":: 대분류 ::", "");
            frm.codeA.options[k] = new Option(category1[i].name, category1[i].value);
            k++;
        }
    }
    frm.ins_type.selectedIndex = 0;
    frm.codeA.selectedIndex = 0;
    changeMiddle(frm.ins_type, frm.ins_s_type, "1");
    changeMiddle(frm.codeA, frm.codeB, "1");
}

function changeMiddle(obj, changeObj, depth) {
    var j = 1;
    var i = obj.selectedIndex;
    if (i < 0) i = 0;
    var value = obj[i].value;
   
    if (obj == document.form1.ins_type) {
        changeObj.options[0] = new Option(":: 보험종목세부 ::", "");
        for (i = 0; i < category.length; i++) {
            var parent = category[i].parent;
            if (parent == value && category[i].depth == "2") {
                changeObj.options[j] = new Option(category[i].name, category[i].value);
                j++;
            }
        }
    } else {
        if (depth == "3") {
            changeObj.options[0] = new Option(":: 소분류 ::", "");
        } else {
            document.form1.codeB.options[0] = new Option(":: 중분류 ::", "");
            document.form1.codeC.options[0] = new Option(":: 소분류 ::", "");
        }
        for (i = 0; i < category1.length; i++) {
            var parent = category1[i].parent;
            if (parent == value) {
                changeObj.options[j] = new Option(category1[i].name, category1[i].value);
                j++;
            }
        }
    }

    changeObj.selectedIndex = 0;
}

function submitForm(){
    alert(document.form1.ins_type.value);
    alert(document.form1.ins_s_type.value);
    alert(document.form1.codeA.value);
    alert(document.form1.codeB.value);
    alert(document.form1.codeC.value);
}

// -->
</SCRIPT>
</head>

<body onLoad="initForm();">

<h1>3단 동적 셀렉트 박스 예제</h1>

<form name="form1" method="get" action="#">
<select name="ins_type" onchange="changeMiddle(this, document.form1.ins_s_type, '2')"></select>
<select name="ins_s_type"></select><br>

<select name="codeA" onchange="changeMiddle(this, document.form1.codeB, '2')"></select>
<select name="codeB" onchange="changeMiddle(this, document.form1.codeC, '3')"></select>
<select name="codeC"></select>
</form>
<input type="button" value="submit" onclick="submitForm();">
</body>
</html>



 

Posted by 1010
06.Ajax2008. 9. 3. 14:39
반응형

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)

새로운 그래픽 툴로 Ajax와 XML을 사용하여 사이트 품질 높이기

developerWorks
문서 옵션
수평출력으로 설정

이 페이지 출력

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기

토론


제안 및 의견
피드백

난이도 : 중급

Jack D Herrington, Senior Software Engineer, Leverage Software Inc.

2007 년 5 월 02 일

Web 2.0은 사용자 경험을 강조하고 있습니다. 이것의 일환으로 고급스러운 방식으로 사용자와 인터랙팅 하고 사용자에게 정보를 제공하는 것입니다. 이러한 새로운 인터페이스들을 위젯이라고 하며, Asynchronous JavaScript + XML (Ajax)을 사용하여 서버와 통신합니다. 사이트와의 상호 작동을 향상시키는데 사용할 수 있는 다섯 개의 위젯에 대해 알아봅시다.

Web 2.0 혁명은 웹 사이트 상에서 고객과 상호 작동하는 독특하면서도 고급스러운 방식이 탄생했다. 이렇게 새롭고 혁신적인 많은 기술들은 서버와 통신하는 그래픽과 위젯을 사용하여 데이터를 가져오는데 까지 진화했다. 이 글에서는, 다섯 가지 위젯을 소개하겠다. 일부는 오픈 소스이고, 일부는 상용이며, 이러한 위젯들은 Ajax와 XML을 통해 서버와 통신한다.

  • carousel: 이 위젯은 작은 그래픽으로 나타난 아이템 리스트를 스크롤 하는데 사용할 수 있는 회전식 이미지 뷰어이다. 사용자가 해당 아이템을 클릭할 때 어떻게 할 것인지는 여러분이 정한다. carousel의 예로는 Flikr 사이트와 Apple의 iTunes 인터페이스가 있으며, 이는 무료로 사용할 수 있으며, 대중적인 jQuery JavaScript 기반이다.
  • SWF/Charts: Adobe Flash 기반 컨트롤은 서버에 있는 차팅(charting) 데이터 및 스타일링 옵션용 XML을 읽고, 데이터에 기반하여 차트를 디스플레이 한다. 인터페이스는 고급스럽고, XML 데이터는 생성하기도 쉬워서 페이지에 동적 그래픽을 빠르게 추가할 수 있다.
  • SWF/Gauge: SWF/Charts의 사촌격인 이 Flash 위젯은 서버에 있는 XML을 사용하여 완전히 커스터마이징 가능한 게이지 디스플레이를 구현한다. 게이지는 비행기 또는 차에 있는 것과 비슷하다.
  • In-place editing: 엄밀히 말하면 위젯은 아니지만, In-place editing 컨트롤은 매력적이고, 대화식으로 사용자에게서 정보를 가져온다. In-place editing 기능은 Scriptaculous 프레임웍에 포함되어 있고, 이는 prototype.js 라이브러리에 있다.
  • DHTML windows: DHTML window는 모델이 없는 윈도우를 페이지 콘텐트에 놓는 장치이다. 사용자들은 윈도우를 이동하고, 사이즈를 조정하며, 제거하기도 한다. 이 윈도우의 콘텐트는 페이지 상에서 JavaScript 코드에 의해 지정되거나, 서버에서 Ajax를 통해 읽힌다. 이러한 유형의 윈도우는 경고 장치로 사용하기에 알맞으며, 전체 페이지를 재 로딩 할 필요가 없는 작은 폼을 가져오는데 알맞다.

SWF/Charts 위젯부터 설명하겠다. 내가 생각하기에 이 위젯이 전개하기에 가장 쉽다. 노력에 비해 보상도 가장 크다.

SWF/Charts 위젯

"한편의 그림이 천마디 말보다 낫다"라는 속담을 무시할 수 없으며 특히, 그래프가 관여된 곳에서는 더욱 그렇다. 그러나, 웹에서의 그래프는 언제나 문제가 되며, 대부분의 웹 프레임웍들은 그래핑 툴이 부족하다. 따라서 여러분 스스로 그래프를 만들어야 한다.

XML로 인코딩 된 데이터를 그릴 수 있는 위젯이 있다면 정말 좋을 것 같지 않은가? 마침 SWF/Charts가 있다. 이 위젯을 사용하려면, 사이트에서 SWF 파일과 이 위젯이 사용하는 추가 SWF 파일들을 다운로드 하고 나서, 사이트에 파일을 설치하고, HTML 페이지 상의 SWF 위젯에 링크를 추가했다. (Listing 1)


Listing 1. Chart_page.html
                
<html><body>

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" 
  width="400" height="250">
<param name="movie"
  value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">

<embed
  src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" 
  width="400" height="250" 
  type="application/x-shockwave-flash" 
  pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

</body></html>

Charts.swf 는 두 개의 매개변수를 취한다. 라이브러리 디렉토리의 위치와 XML 데이터의 URL이다. XML 데이터 포맷은 매우 쉽다. Listing 2는 예제이다.


Listing 2. Chart_data.xml
                
<chart>
  <chart_type>bar</chart_type>
  <chart_data>
    <row>
      <null/>
      <string>2005</string>
      <string>2006</string>
    </row>
    <row>
      <string>Projected</string>
      <number>500</number>
      <number>700</number>
    </row>
    <row>
      <string>Actual</string>
      <number>600</number>
      <number>900</number>
    </row>
  </chart_data>
</chart>

이 파일은 차트용 데이터이고, 선택적인 비주얼 정보도 있다. 이 경우, 필자는 차트 유형을 바(bar) 차트로 지정했다. SWF 파일을 다운로드 했던 사이트에는 더 많은 옵션들과 그래프 유형들이 있다.

Firefox 브라우저에서 파일을 검색하면 그림 1과 같은 그래프를 볼 수 있다.


그림 1. Chart Widget
Chart Widget 보기

기본 컬러 스킴과 모습도 멋지며, 그래프는 중심축 값을 보기 좋게 처리했다. 적은 노력으로 전체적으로 큰 효과를 보았다.

분명히, graph_data.xml 파일을 동적인 웹 페이지로 대체할 수 있었다. 리턴된 데이터가 올바른 포맷으로 되어 있다면 그래프 컨트롤은 적은 부분만 신경 쓰면 된다. 이 글에 있는 대부분의 예제들이 이에 속한다. 사실, 웹 서버(Apache Tomcat 또는 IBM® WebSphere® Application Server)나 웹 프로그래밍 언어(PHP, Microsoft® ASP.NET, Java™ 2 Enterprise Edition [Java EE])를 사용하지 않고도 로컬 파일에 있는 웹 브라우저에서 이 예제들을 실행할 수 있다.




위로


SWF/게이지 위젯

데이터를 나타내는 또 다른 방법은 게이지로 표현하는 것이다. 개인적으로는 게이지에 대해서는 흥미가 별로 없다. 적은 정보를 나타내는 데도 많은 공간을 차지하기 때문이다. 하지만, 게이지는 전문 대시보드의 핵심 기능이기 때문에, 이들을 빠르게 생성하는 기능은 매우 유용하다.

하지만, 웹이 간단한 바 차트도 잘 수행하지 못한다면, 원형 게이지 역시 수행할 수 없다. 따라서, XML/Graph를 만들었던 회사에 문의했다. 그들도 게이지에 대한 솔루션이 있었다. 바로 XML/Gauge였다.

SWF게이지 위젯을 삽입하는 HTML 페이지로 시작하겠다. (Listing 3)


Listing 3. Gauge_page.html
                
<html><body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
  width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
  width="110" height="55" type="application/x-shockwave-flash"
  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed></object>

</body></html>	

gauge.swf 영화는 하나의 인자를 취한다. 데이터의 위치이다. 이 경우, 그 위치는 gauge_data.xml이다. (Listing 4)


Listing 4. Gauge_data.xml
                
<gauge>

<circle fill_color="888888" start="275" fill_alpha="100"
  line_color="555555" line_thickness="3" line_alpha="90"
  radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
  line_thickness="4" line_alpha="20" radius="45" x="55"
  end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="382" y="55"/>
<circle fill_color="666666" start="397" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
  radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
  radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
  line_alpha="0" radius="20" x="55" end="450" y="55"/>

<rotate start="280" shake_span="2" shadow_alpha="15"
  step="1" x="55" span="0" y="55" shake_frequency="20">
  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
    height="40" x="53" width="4" y="13"/>
</rotate>

<circle fill_color="111111" start="270" fill_alpha="100"
  line_thickness="5" line_alpha="50" radius="15" x="55"
  end="450" y="55"/>

</gauge>

여러분도 보듯, SWF는 이 위젯에 다른 방식을 취했다. 게이지(또는 그래프)용 데이터를 지정하는 대신, 원, 호, 직사각형 같은 그래픽 프리머티브에서 게이지를 구현한다.

솔직히, 필자는 데이터를 제공할 수 있는 기본 게이지를 선호한다. 하지만, 이 방식도 작동하고, 얼마든지 조정이 가능하다. 비록, 필자는 기본 예제들을 몇 개 더 사용했다.

내 브라우저에 있는 페이지로 갈 때, 그림 2와 같은 게이지를 볼 수 있다.


그림 2. Gauge Widget
Gauge Widget

그래픽 프리머티브를 지정하는 것으로는, 이 위젯에서 얻을 수 있는 것이 많이 없다고 생각할 수도 있다. 그렇지 않다. 이 프리머티브에는 간단한 애니메이션 기술도 포함되어 있어서 바늘과 소리도 넣을 수 있고 사용자가 이것을 클릭하면 브라우저를 검색하는 중요한 연결 영역을 만드는 기능도 있다. 게다가, 이 콘트롤을 게이지에 사용하는 것뿐만 아니라, 간단한 그래픽 프리머티브 언어를 사용하여 어떤 유형의 이미지와 간단한 애니메이션을 구현할 수 있다.




위로


In-place editing

사용자들은 이제 데스크탑 애플리케이션에서 In-place editing을 기대하지만, 이러한 기능은 아직까지는 웹에서는 찾아보기 힘들다. Web 2.0에서는 상호 작동이 우수하기 때문에, In-place editing 같은 기술은 보다 더 일반화 된다.

In-place editing을 구현하려면, 직접 작성하거나, JavaScript 프레임웍들 중 하나를 사용한다. 가장 대중적인 툴킷은 Scriptaculous 프레임웍인데, 이것은 prototype.js에 구현된다. Scriptaculous 라이브러리를 사용하면 In-place editing 컨트롤을 매우 쉽게 구현할 수 있다.

In-place editing용 HTML 테스트 파일은 Listing 5를 참조하라.


Listing 5. Inplace.html
                
<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>
</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>
<script>
new Ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>

Inplace.html에는 필요한 모든 JavaScript 소스 파일이 포함된다. 간단한 테이블에 In-place editing 가능한 데이터를 포함하고 있는 단락을 넣는다. 이 파일의 끝에, 이 단락의 InPlaceEditor 객체를 생성하는 스크립트를 삽입한다.

InPlaceEditor 컨스트럭터는 인자로서 단락의 ID와 편집을 수행한 후에 제출을 처리할 페이지의 URL을 취한다. 이 경우, 이 페이지는 submitted.html이다. 하지만 현실적으로, 이것은 ASP.NET, Java EE, 또는 PHP 페이지 또는 기타 동적 웹 기술이다.

Listing 6은 submitted.html 파일이다.


Listing 6. Submitted.html
                
<p>Name changed!</p>

이제 테스트 할 차례이다. 브라우저를 HTML 파일에서 연다. 이곳에서 원래의 텍스트를 보게 된다. 텍스트에 마우스를 갖다 대면, 노란색으로 변한다. (그림 3)


그림 3. in-place editing의 시작 포인트
in-place editing의 시작 포인트

노란색 하이라이팅은 이것을 클릭하여 필드를 편집할 수 있다는 사용자용 인디케이터이다. 따라서, 필자는 그 필드를 클릭하고 Name 필드, ok 버튼, cancel 링크를 만들었다. (그림 4)


그림 4. 클릭한 후 텍스트 편집하기
클릭한 후 텍스트 편집하기

텍스트를 수정하고 ok를 클릭한다. 이렇게 하면 데이터가 서버에 게시된다. (또는 이 경우 submitted.html page). 서버는 원래의 텍스트를 대체하는 HTML 페이지를 리턴한다. 이 경우에, 필자는 Name changed!를 보낸다. (그림 5) 실제로, 이것은 데이터의 새로운 값이 되어야 한다.


그림 5. ok를 클릭한 후 새로운 콘텐트
ok를 클릭한 후 새로운 콘텐트

이와 같은 간단한 인터페이스 업그레이드는 애플리케이션의 가용성에 차이를 만든다. 느린 서버에서 페이지 로드를 기다리는 것은 구식 인터페이스이다. In-place editing 같은 간단한 툴을 사용하면 구현 복잡성의 관점에서 볼 때 애플리케이션에 간단한 몸치장을 한 것과 같다.




위로


DHTML 윈도우

브라우저에서 윈도우를 웹 페이지에 구현하기 힘들다는 것은 좋은 일일지도 모른다. 하지만 가끔씩, 작은 윈도우도 좋은 것이 될 수 있다. 이는 경고를 디스플레이 하거나 작은 폼을 가져오는데 편리하며, 페이지의 내용을 덮어버리는 성가신 광고를 실행하기에 좋은 방법이다. 잠깐 기다려라. 마지막 말은 취소해야겠다.

어쨌든, 내가 말했지만 Dynamic HTML (DHTML) 페이지용 윈도우를 구현하는 것은 쉬운 일이 아니다. 그래서, Protoype.js 라이브러리에 기반한 매우 강력한 윈도우 패키지를 발견했을 때 너무 기뻤다. 사용하기 쉬울 뿐만 아니라, 인터페이스도 가볍고 모든 브라우저에서 잘 작동한다. Listing 7은 window.html 페이지 모습이다.


Listing 7. Window.html
                
<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>
<script>
var win = new Window( 'myPopup', {
   title: "Terms and Conditions",
   top:70, left:100, width:300, height:200,
   resizable: true, url: "terms.html",
   showEffectOptions: { duration: 3 }
  } 
);
win.show();
</script>
</body>
</html>

prototype.js와 window.js 소스 파일을 헤더로 가져온다. 그런 다음, 내가 좋아하는 매개변수(크기, 위치, 타이틀, 위젯이 콘텐트를 얻는 페이지의 URL)로 팝(pop) 객체를 구현한다. Ajax를 통해 페이지에서 콘텐트를 로딩하는 것은 콘텐트를 얻는 방법들 중 하나이다. JavaScript 코드를 통해 동적으로 설정할 수 있고 또는 기존 <div> 태그 주위에 윈도우를 래핑할 수 있다.

이 경우 필자는 terms.html 파일을 참조한다. (Listing 8)


Listing 8. Terms.html
                
<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>

내 브라우저에서 이 페이지를 실행하면 그림 6과 같은 윈도우를 보게 된다.


그림 6. 초기 윈도우
초기 윈도우

이것은 단지 두 개의 Mac 윈도우만은 아니다. Mac 처럼 보이는 DHTML 윈도우가 있고 그 밖에는 실제 Firefox 브라우저 윈도우이다. 하지만 어쨌든 같은 것으로 보여진다.

윈도우를 늘려 이동할 수 있다. (그림 7)


그림 7. 이동 및 크기 조정 후 윈도우 모습
이동 및 크기 조정 후 윈도우 모습

필자는 본 기술자료와 내 작업을 위해 여러 드물 윈도우 라이브러리를 검토했고, 이것이 가장 좋았다고 자신 있게 말할 수 있다. 다른 윈도우 패키지들은 실행 문제들이 있었고, 세그먼트에서 실행되며, 사이즈를 재조정 하면 형편없이 실행되었다. 브라우저 안에 갇힌 실제 윈도우처럼 보인다.




위로


carousel 위젯

많은 사용자 인터페이스(UI)를 다루어본 사람이라면 실제 상태를 나타내는 것이 중요하다고 말할 것이다. 꽉 찬 느낌을 주지 않고 주어진 공간에 최대로 담을 수 있는 데이터를 넣는 것이 중요하다. Apple iTunes의 carousel 컨트롤을 처음 보았을 때 깊은 감명을 받았다.

carousel 컨트롤은 고정된 공간에서 여러 이미지들을 보여준다. 이미지 블록의 왼쪽과 오른쪽은 왼쪽 화살표와 오른쪽 화살표이다. 화살표를 클릭하면, 이미지는 왼쪽 또는 오른쪽으로 이동하고, 새로운 이미지로 대체된다. iTunes 에서, 이 이미지는 앨범 커버였고, 각 장르마다 carousel 컨트롤이 있었다.

공간 절약은 중요하다. 세 개의 공간에 30 개의 앨범 커버를 넣을 수 있고, 각각 알맞은 크기로 보여줄 수 있다. 또한, 이 컨트롤은 매력적이다. 마치, 단순화 된 스크롤바 같다.

carousel의 단점은 구현이 쉽지 않다는 점이다. 특히, 이것의 특징 중 하나가 왼쪽 또는 오른쪽으로 이동하는 이미지의 애니메이션이기 때문이다. 따라서 jQuery JavaScript 프레임웍에 구현된 carousel이라고 하는 오픈 소스 carousel에 대해 알게 되었을 때 기뻤다.

필자는 웹 페이지에 간단한 carousel 위젯을 구현했다. ( Listing 9)


Listing 9. Carousel.html
                
<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope {  position: relative; width: 255px;
  -moz-border-radius: 10px; background: #D4D0C8;
  border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
  margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block;  outline: none;
  border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next {  position: absolute; top: 45px;
  right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
  left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
  right: 0px; display: none; }
</style>
<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
  if (available) { carousel.loaded(); return; }
  var cr = carousel;
  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};

function appendItemCallback( carousel, start, last, data ) {
  var items = data.match( /(\<img .*?\>)/g );

  for (i = start; i <= last; i++) {
    if ( items[ i - 1 ] == undefined ) break;
    var item = carousel.add( i, getItemHTML( items[i-1]) );
    item.each(function() {
      jQuery("a.thickbox", this).click(function() {
        var t = this.title || this.name || null;
        var g = this.rel || false;
        TB_show(t,this.href,g);
        this.blur();
        return false;
      });
    });
  }
  carousel.loaded();
};

function getItemHTML( item ) {
  var found = item.match( /href=\"(.*?)\"/ );
  var url   = jQuery.trim(found[1]);
  var title = jQuery.trim(found[1]);
  var url_m = url.replace(/_s.jpg/g, '_m.jpg');
  return '<a href="' + url_m +
	'" title="' + title +
	'" class="thickbox"><img src="' + url +
	'" width="' + 75 + '" height="' + 75 +
	'" alt="' + title + '" /></a>';
};

var nextOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };

var nextOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };

var nextDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };

function nextButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
  }
}

var prevOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };

var prevOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };

var prevDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };

function prevButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
  }
}

jQuery(document).ready(function() {
  jQuery().ajaxStart(function() { jQuery(".loading").show(); });
  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
  jQuery("#mycarousel").jcarousel({
    itemVisible: 3, itemScroll: 2, wrap: true,
    loadItemHandler: loadItemHandler,
    nextButtonStateHandler: nextButtonStateHandler,
    prevButtonStateHandler: prevButtonStateHandler
  });
});
</script></head><body><div id="mycarousel">
<div class="loading">
<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>

이전 예제들 보다 방대하다. 하지만 코드 대부분이 그래픽을 설정하고 서버에서 리턴된 Ajax 데이터를 인터프리팅 하는 것이다. 사실, 이 글에 소개된 대부분의 코드는 다운로드에서 제공하는 예제를 기반으로 하고 있다. 따라서 이 콘트롤을 사용하기 위해 많은 부분을 배우거나 문서를 읽을 필요가 없었다.

이 carousel용 데이터는 Listing 10에 나와있다.


Listing 10. Data.xml
                
<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>

이 경우, 파일은 <images> 태그와 각 이미지의 URL을 포함하고 있는 <img> 태그 세트들을 갖고 있는 XML 포맷으로 되어있다. 어떤 포맷을 사용하든지 간에, 이 컨트롤은 기본적으로 Ajax 위젯이 아니다. 필자는 XML을 인터프리팅 하는 코드를 작성 중이고, 각각의 슬라이드 엘리먼트를 carousel에 구현하고 있다. 결과는 그림 8과 같다.


그림 8. 이미지 carousel
이미지 carousel

이미지를 클릭하고 그 이미지가 있는 페이지로 갈 수 있다. (또는 내가 지정한 URL로 간다.) 또는, 오른쪽/왼쪽 화살표를 클릭하여 carousel 주위를 스크롤 하여 더 많은 이미지들을 볼 수 있다. 효과는 매우 좋다.




위로


결론

웹 상에서 사용할 수 있는 무료/상용 위젯과 툴들을 소개했다. 이 글을 쓰면서 보았던 많은 툴들이 Ajax를 사용하지 않았고, 이 주제에도 잘 맞지 않았다. 하지만, 그 자체로도 주목할 만한 가치가 있었다. 특히, 필자는 고급의 오픈 소스 WYSIWYG 에디터를 다운로드 할 수 있다는 것에 놀랐다. 사용자들은 자신들의 사이트에 있는 콘텐트에 볼드체, 이탤릭체, 링크, 이미지 등을 사용하려면 텍스트 박스에서 HTML을 사용해야 하는 것에 많이 좌절했다. 이러한 에디터들은 모든 HTML을 숨기고 사용자에게 워드 프로세스 애플리케이션과 비슷한 느낌으로 편집할 수 있도록 해준다.

WYSIWYG 에디터 외에도, 프로그래스 바, 탭 다이얼로그 박스, 아코디언 컨트롤, 클락, 데이트 피커(date picker), RSS, Outline Processor Markup Language (OPML) 리더용 솔루션도 있다. 심지어 대화형 터미널 윈도우용 솔루션도 있다. DHTML 또는 Flash 컨트롤을 직접 구현하기 전에, 인터넷에서 (무료로) 무엇을 사용할 수 있는지 찾아봐야 한다. 이러한 위젯들을 사용하여 많은 노력을 들이지 않고도 사이트에 역동성을 부여할 수 있다.

기사의 원문보기



참고자료

교육

제품 및 기술 얻기

토론


필자소개

Jack D. Herrington은 20년 경력을 지닌 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks 의 저자이다. 30개 이상의 기술자료를 기고했다. (jherr@pobox.com)


Posted by 1010
02.Oracle/DataBase2008. 9. 1. 17:45
반응형
Posted by 1010
90.개발관련문서2008. 9. 1. 13:33
반응형

대략 5분동안 자신의 컴퓨터를 손 봄으로써 인터넷 속도를 빨라지게 할수 있다.
다음과 같이 해서 좀 더 빠른 내 컴퓨터로 인터넷을 활보해보자.

- 내 네트윅에서 이웃 컴퓨터 빨리 찾기:
윈도우의 좌측 하단 "시작" 버튼을 누른후 "실행"을 찾아 "regedit"을 입력한후 확인을 누른다.
"regedit"창에서 다음 항목으로 들어간다.
HKEY_LOCAL_MACHINE/Software/Microsoft/Windows/CurrentVersion/Explorer/RemoteComputer/NameSpace.
최종 namespace에서 다음 항목을 삭제하면 된다. {D6277990-4C6A-11CF-8D87-00AA0060F5BF}.

- 웹페이지 빨리 열기:

다음 Tweak 설정이 웹페이지를 빨리 열게해주지만 다운로드 속도에는 영향을 미치지 않는다.

윈도우의 좌측 하단 "시작" 버튼을 누른후 "실행"을 찾아 "regedit"을 입력한후 확인을 누른다.
"Regedit"에서 다음 항목으로 이동한다.

윈도우즈 XP & 2000의 경우HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\ServiceProvider

윈도우즈 98, 98SE & ME 경우HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\VxD\MSTCP\ServiceProvider

각 항목으로 이동하면 오른쪽 창에서 다음 엔트리들의 값을 헥사데시말(HEXIDECIMAL)의 값으로 1을 만든다.

DnsPriority = 1
HostsPriority = 1
LocalPriority = 1
NetbtPriority = 1

값을 바꾸기위해서는 각 엔트리에서 오른쪽 마우스 버튼을 눌러야한다.
값을 변경한후 변경된 것이 적용되게 하기 위해서는 컴퓨터를 다시 시작해야한다.

사용자 삽입 이미지

- 인터넷 익스플로러 제대로 설정하기

도구>인터넷 옵션의 일반 탭의 임시 인터넷 파일의 설정 버튼을 누른다.

사용자 삽입 이미지

임시 인터넷 파일 폴더 섹션의 사용할 디스크 공간의 크기를 100MB이하로 설정한다.
사용자 삽입 이미지

연결탭에서 LAN설정 버튼을 눌러 다음 화면의 모든 사항을 선택 해제한다.
사용자 삽입 이미지

개인정보 탭에서 고급 버튼을 누른후 다음 그림과 같이 설정한다.
사용자 삽입 이미지

임시 인터넷 파일의 용량을 100MB로 설정하고 주기적으로 일주일에 한번씩 임시 인터넷 파일을 삭제하라.


- 모뎀 주기적으로 다시 시작하기
모뎀은 하루 24시간 계속 연결되어 있기 때문에 일주일에 한번 정도는 파워를 15초 정도 끈후 다시 연결한다.


- DNS CACHE 수정

윈도우즈 2000 과 xp는 기본적으로 DNS 캐쉬 서비스에서 제대로 된 DNS 정보 또는 잘못된 DNS 정보를 저장하고 있다. 잘못된 DNS정보를 제거하는 기능을 높임으로서 접속 속도의 저하를 제거한다.
다음 엔트리에 있는 값을 모두 0 으로 만든다.
 

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Dnscache\Parameters]
"NegativeCacheTime"=dword:00000000
"NetFailureCacheTime"=dword:00000000
"NegativeSOACacheTime"=dword:00000000


- 스파이웨어를 주기적으로 체크해서 제거하기.

- 이더넷 드라이버와 펌웨어를 가능한 최신의 것으로 업데이트하라.


- 필요없는 프로트콜 제거하라.

윈도우지 2000이나 xp의 네트윅 연결에서 필요없는 프로토콜을 제거하라. 집에서 컴퓨터 한대만을 쓴다면 필요한 프로토콜은 TCP/IP만 있으면 된다.

- TCP/IP 제대로 설정하기

XP에서 TCP/IP 인터페이스 메트릭을 1로 설정하라.
파일또는 프린터 공유를 하지 않는다면 Netbios over TCP/IP 사용하지 않기로 설정하라.

사용자 삽입 이미지
Posted by 1010
98..Etc/Etc...2008. 8. 28. 11:45
반응형

무버블타입에 FCKeditor 장착 플러그인

Go to English entry


이 플러그인은 Movable Type내에서 FCKeditor라는 WYSIWYG 에디터를 쉽게, 또 간편히 커스터마이징시켜 사용할 수 있게 해주는 것입니다. 현재 많은 공개된 WYSIWYG 에디터가 존재합니다. 저는 그 중에서 HTMLArea와 FCKeditor를 조금 사용해 봤는데 둘다 매우 좋은 놈입니다. 물론 그 특성상 PC에 약간의 부하를 주긴 합니다만, 이 자체가 이의 사용여부를 가늠할 잣대로서의 비중은 점점 줄어들거라 봅니다.

alogblogMTinterface 플러그인은 매우 많은 대체 MT 템플릿을 이용합니다. 따라서 사용자가 개인적으로 W~G 에디터를 삽입하고자 하거나 혹은 이를 위한 다른 플러그인(EnhancedEntryEditing같은)을 적용하고자 할 경우에, 이런 저런 문제를 겪을 가능성이 크다 봅니다. 그래서 EnhanceEntryEditing(이는 TinyMCE라는 에디터를 달아 줍니다.)라는 같은 류의 플러그인이 존재함에도 이를 새롭게 추가하게 되었습니다.

이 FCKeditor의 가장 큰 특징/장점 중의 하나가 바로 미디어 브라우져라고 불리는 기능입니다. 이를 이용해 간편하게 이미지 등을 엔트리 작성중에 업로드하고 이 주소를 바로 엔트리 상에 삽입해주는 기능인데, TinyMCE의 경우 이 기능이 별도의 플러그인으로 제공되는데...유료더군요. 유료다보니 기능 자체는 FCKeditor의 그것보다 좀더 좋은것 같습니다만, 당연 사용해보진 못했겠죠.

현재 이 페이지가 설명하는 플러그인은 원래 alogblogMTinterface라는 MT의 기본 인터페이스를 획기적으로(^^) 세련되게 변경해주는 플러그인의 업데이트 버전일 뿐입니다. 즉 현재 이 플러그인을 설치하면 FCKeditor만 MT의 기본 인터페이스에 추가시켜주는게 아니라, alogblogMTinterface라는 제 인터페이스위에 깔리게 됩니다. 이를 현재와 같이 별도의 페이지에 설명하는 것은, 이 FCKeditor사용에 좀더 중점을 두고 설명하기 위함입니다. 인터페이스 자체에 대한 의문 등은 원 페이지를 참조하시길 바람니다.

Requirement

  • Movable Type 3.2
  • PHP, FCKeditor의 미디어 브라우져/업로더 이용시

Features

  • 일반 textarea(FCKeditor창이 아닌)창의 크기를 동적으로 변경할 수 있습니다.
  • FCKeditor창의 크기를 커스터마이징할 수 있습니다.
  • 이모티콘과 업로드한 파일을 저장할 UserFiles 폴더의 경로를 커스터마이징할 수 있습니다.
  • MT시스템의 템플릿을 이용해 FCK에디터의 템플릿 기능을 쉽게 이용할 수 있습니다.
  • MT시스템의 템플릿을 이용해 FCK에디터의 스타일 기능을 쉽게 이용할 수 있습니다.
  • alogblogMTinterface의 "classic, sky, peach" 스타일에 맞춘 FCK 스킨을 이용할 수 있습니다.
  • FCKeditor의 미디어 브라우져/업로더를 쉽게 이용할 수 있습니다.

Installation

아래 내용을 차분히 따라 하면 됩니다. 실제 FCKeditor 사용만을 위해선 1번의 설치후에 5,9번 단계의 간단한 확인 조치만 하면 가능합니다. 나머지 단계는 FCKeditor의 템플릿/스타일 기능을 MT내에서 편하게 사용할 수 있도록 하기 위한 별도의 추가 조치입니다.

  1. 이 플로그인을 받아, (mt home) 폴더 밑에서 $ tar xvfz alogblogMTinterface_fck-3.2.04.tar.gz 등과 같은 명령을 통해 풀어줍니다.
  2. (mt home) 폴더 밑에서 $ perl   tools/add-default-templates 명령을 실행합니다.
    ( *** 만약 터미널 환경에서 이 명령을 실행할 수 없는 상황인 경우엔, 직접 이 명령이 하는 일련의 과정을 수행해주면 가능합니다. )

  3. (mt home)/mt-static/FCKeditor 폴더로 가서 $ chmod -R 777 UserFiles 등의 명령으로 모든 권한을 부여합니다.

Trial for verification

FCKeditor를 디폴트로 설정
"Create New Entry"을 눌러 새 엔트리 작성 화면을 열어 봅니다. 아마 FCKeditor가 나타나지 않을 겁니다. 그건 새로운 엔트리의 "Text Formatting" 이 "Convert Line Breaks"로 디폴트로 되어 있기 때문입니다. 디폴트로 FCKeditor를 사용하길 원한다면 블로그 설정에서 "New Entry Default"탭 메뉴에서 FCKeditor를 디폴트 텍스트 포맷팅으로 정해주면 됩니다.
링크/이미지/플래시 브라우져와 업로더
링크 브라우져라는 것은 엔트리 내에 a태그 즉 링크를 삽입할 때, 그 해당 자원의 주소href의 대상을 내 블로그 서버에 있는 어떤 자원을 가리키고자 할 때 사용하는 것입니다. 이미지/플래시도 마찬가지지만 각각의 파일타입에 맞게 제한되는 것만 다릅니다.

먼저 "이미지 삽입" 메뉴버튼을 클릭해 봅니다. 그럼 팝업창이 뜹니다. 여기에서 소위 "업로더"와 "브라우져" 두가지의 조금 다른 방식으로 파일을 서버에 올릴 수 있습니다. Uploader의 경우에는 특정한 서브폴더를 지정할 수가 없고 그냥 UserFiles밑의 특정 폴더밑에만 바로 올립니다. 만약 자신의 별도로 서브폴더를 나눠서 사용하지 않는 상황에서, 이미 올린 파일이 아니라, 지금 새로 올리면서 그 파일을 링크/이미지/플래시의 주소로 이용하고자 할 경우에 편리합니다.

그 팝업창에서 "서버 보기"를 클릭하면 소위 "브라우져" 기능을 이용하는 게 됩니다. 말그대로 해당 파일타입관련한 폴더 밑에다 새로운 서브 폴더를 생성할 수도 있고, 거기에 파일을 올릴 수도 있습니다. 이때 새로운 폴더생성이 되지 않거나, 파일 업로드가 안되면 100에 98, 폴더 퍼미션 문제입니다.

이제 시험삼아 이미지 폴더에 테스트 용으로 올려놓은 cat 이미지 파일과 플래시 파일을 한번 엔트리에 삽입해 봅니다.

FCKeditor의 템플릿/스타일 기능 사용을 위한 준비
지금껏 설치하고 설정한 단계만으로도 충분히 위지윅 기능을 바탕으로 에디터를 사용할 수 있습니다. 만약 지금까지의 단계로도 머리가 조금 복잡하다면, 이하 내용은 당장에 안보셔도 전혀 상관이 없습니다. 이 에디터를 익숙해질 정도로 사용하신 후, FCKeditor의 템플릿과 스타일 기능에도 관심이 생길 때, 아래 내용을 습득하셔도 됩니다.


지금까지의 사항만으로 위지윅 기능과 미디어 브라우져/업로더를 이용하여 편리한 블로깅 환경을 만들 수 있지만, 이것만으로는 FCKeditor의 고급기능과 또 이를 뒷받침하기 위한 이 플러그인의 기능을 다 이용하는 것은 아닙니다. 템플릿과 스타일 지정을 MT의 템플릿 메뉴에서 커스터마이징할 수 있다는 점이 이 플러그인의 최대 특징입니다. 아래 내용을 따라 준비를 합니다.

  1. 먼저 System Overview 아래의 "List Weblogs" 페이지로 가서 현재 생성되어 있는 모든 블로그를 선택한 후에, "Add Default Template(s)" 액션을 실행합니다.
  2. 현재 블로그의 "List Template" 페이지로 가보면, 세 개의 FCKeditor 관련 템플릿을 볼 수 있습니다. 그 각각을 열고 Rebuild 를 해줘서 output file을 만들어 줍니다.
  3. 현재 블로그의 스타일스트 관련(styles-site.css) 템플릿을 열고 그 맨 첫줄에 @import url(fck_editorarea.css); 를 한줄 추가/리빌딩합니다.

* 어쩜 MT의 인덱스 템플릿 목록창에 난데없이 세개의 FCKeditor관련 템플릿이 있어서 의아해 하실수 있을지 모르겠습니다. 이 3개의 템플릿은 이미 설치과정에서 "디폴트" 템플릿으로 MT에 기록시켰고 또 현재 생성되어 있는 모든 블로그에 추가를 마쳤기 때문에 나타난겁니다. "디폴트" 템플릿이 되었다는 것은, 향후에 새로운 블로그를 생성시, 위의 세 템플릿도 같이 생성되어 진다는 뜻입니다. 물론 TemplateRefesh같은 액션을 적용할 수도 있게 됩니다. 이게 먼 소린지 잘 모르시면 설치과정의 2단계에서 있는 addDefaultTemplate 플러그인 페이지를 보시기 바람니다.

FCKeditor 템플릿:
FCKeditor 메뉴바에 있는 "템플릿" 버튼을 클릭해 봅니다. 나타나는 팝업창에서 "Plugin Document"을 한번 선택해 봅니다. 이 템플릿 기능을 이용하면 해당 창에 있던 기존의 내용은 사라지므로, 항상 처음에 템플릿 기능으로 사용해야 합니다. 제가 만들어놓은 플러그인 문서에 맞는 템플릿이 창에 삽입이 되어 나타나면 설정이 잘되어 있다는 뜻입니다.

일반적인 신변위주의 블로그 엔트리의 경우 특별한 문서 템플릿이 필요없지만, 현재 보고 계신 제 플러그인 페이지처럼 특정한 목적을 위해 사용할 경우 보통의 워드프로세서같은 곳에서 흔히 사용하는 템플릿 기능이 많이 요구되어 지는데, 이때 사용하는 것입니다.

만약 이 템플릿 기능을 이용해 나만의 템플릿을 만들어 사용하고 싶다면, MT의 템플릿 메뉴로 가서 "FCKeditor Templates" 라는 이름의 인덱스 템플릿을 열고, 거기에 추가/변경해서 저장/리빌딩해주면 됩니다. 이때 그 출력파일명(fcktemplates.xml)은 변경하면 안됩니다. 열어서 그 내용을 대충 보시면, 어려울건 없습니다. 그 신택스는 매우 직관적이므로 한두번 훑어보면 알 수 있으리라 봅니다.

FCKeditor 스타일
FCKeditor 등과 같은 소위 WYSIWYG에디터의 가장 큰 단점은 바로 폰트의 크기/색상/종류 등을 font태그를 이용해서 마구잡이로 엔트리 내에 하드코딩시킨다는 것입니다. 물론 초보자의 경우엔 별다른 준비없이 간단히 원하는 표현을 즉석에서 사용할 수 있다는 장점으로 작용하지만, 일반적으로는 피해야하는 작성 습관/태그라 할 수 있습니다. 만약 자신이 특정한 표현을 자주 사용한다면 그것을 스타일로 지정해두고, FCKeditor의 스타일 메뉴로 해결하는 것이 좋습니다. 이때 원하는 스타일을 담고 있는 스타일시트는 당연히 FCKeditor에서도 참조하고, 또 실제 출력된 페이지에서도 참조할 것입니다. 이 역할을 MT내에서 쉽게 할 수 있도록 이미 설치과정에서 지겨움을 참고 끝마쳤으므로 실제 사용시엔 그냥 위의 템플릿과 동일한 과정으로 MT의 템플릿 목록에서 "FCKeditor CSS" 와 "FCKeditor CSS Mapping" 템플릿을 열어서 커스터마이징하면 됩니다. 맵핑 파일의 경우에도 마찬가지로 매우 직관적이라 쉽게 그 문법을 이해할 수 있을 것입니다.


테스트 엔트리 Publishing

이 플러그인에는 HTMLArea에 포함되어 있는 작은 형태의 이모티콘도 같이 넣었습니다. 이런 저런 다양한 아이템을 엔트리에 추가해보고(반드시 하나 이상의 스타일 적용해 볼 것) 그것을 퍼블리싱합니다. 이때 결과 페이지에서 특히 스타일이 FCKeditor상에 나타난 것이랑 같게 적용이 되나를 확인합니다. 이는 설치단계의 8번이랑도 연관이 됩니다. 혹 스타일이 제대로 결과 페이지에 나타나지 않는다면... 위 설치단계를 다시 한번 확인하세요.

선택적 개인화(customization)

FCKeditor 창의 높이

FCKeditor 창의 높이도 동적으로 변경할 수 있도록 관련 API를 찾아 보았지만 없어서, 대신에 MT의 각 블로그 아래의 플러그인 설정에서 본문/확장문 각각 창의 높이를 설정할 수 있도록 했습니다. 텍스트 포맷팅을 "none이나 Convert Line Break"로 사용시엔 동적으로 변경가능합니다.

이모티콘

이모티콘은 특히 W~G에디터에선 쉽고 비교적 자주 사용하는 아이템입니다. 이 이모티콘은 그 특성상 특정한 블로그에 전용하다기 보단, MT인스턴스로 생성한 모든 블로그에 공통된 자원입니다. 일단 기본으로 위의 설치 과정을 따르면 (path/to/mt)/mt-static/FCKeditor/emoticons/ 폴더 아래에 이모티콘 파일들이 존재합니다. 만약 여러분의 MT설치 특성상 그 설치 경로가 꽤 깊거나 혹은 이미 기존의 다른 폴더를 공통의 이미지파일 폴더로 사용하고 있어서 이를 계속 유지하고 싶은 경우에 이를 설정해 줄 수 있습니다. 먼저 위 디폴트 경로 아래에 있는 파일들을 원하는 다른 곳에 옮긴 후에 그 변경된 경로를 MT의 "System Overview"내의 플러그인 설정란에서 지정해주면 됩니다.(이모티콘은 모든 블로그에 공통된 자원이기 때문에, 이 경로설정을 개개의 블로그밑이 아닌 시스템밑의 플러그인 설정란에서 하는 것입니다.)

UserFiles

"UserFiles"이라는 이름은 FCKeditor에서 디폴트로 사용하는 폴더명입니다. 이 폴더 밑에 File,Image,Flash등의 서브 폴더가 생기고 그 각각의 아래에 해당 파일들을 업로드하는 식입니다. 위의 설치과정을 따르면 이 경로가 "path/to/mt/mt-static/FCKeditor/UserFiles/"로 됩니다. 이 의미는 무엇일까요? 하나의 MT인스턴스로 생성한 모든 블로그가 공통된 저 경로밑에 파일들을 업로드하고 관리한다는 소립니다. 머 그렇게 사용할 수도 있겠지만, 또 다른 경우에는 각각의 블로그마다 각기 다른 곳(이를테면 바로 각각의 블로그 루트 경로 아래에)에 UserFiles폴더를 두고 각기 독자적으로 관리하고 싶은 경우가 왜 없겠습니까? 이럴땐 마찬가지로 원하는 폴더를 만들어 주고(꼭 UserFiles라는 이름일 필요도 당연히 없겠죠, 다만 관례상 그런 이름을 사용하면 차후에라도 이 폴더가 FCKeditor랑 관련있는 거구나...정도 할순 있겠죠) 그 경로를 MT메뉴의 플러그인 설정란에서 해주면 됩니다. 당연히 이 경로는 블로그마다 설정해주는 개념이므로 각 블로그밑의 플러그인 설정페이지로 가야 되겠죠?

FCKeditor의 툴바 등 기타 변경

이미 에디터의 툴바를 제가 적절히 커스터마이징해서 배포하고 있지만, 사람 취향이 제각각, 분명 난 다르게 툴바를 배치/선택하고 싶다!라는 생각이 없을수 없겠죠. 만약 그런 위험한(^^) 생각을 하셨다면 (mt home)/alt-tmpl/cms/header.tmpl 파일 내에서 적절한 키워드로 찾아서 수정하시면 됩니다.

예를 들면, 폰트 종류/크기 등의 메뉴를 좀더 다양하게 늘려주고 싶다는 생각은 누구나 본능적으로 하게 될거라 봅니다. 버뜨! 참으세요. 앞서 말씀드렸다시파, font태그를 지저분하게(?) 삽입하는 것은 배보다 배꼽이 더 큰 불량 엔트리로 가는 길이기 때문입니다. 가능하다면 자주 사용하는 스타일을 MT템플릿상에서 간편히 만들어 효율적으로 사용하십시요. 이 방법만이 차후에 업데이트 혹은 이런 저런 이유로 재설치시 등마다, 또 다시 FCKeditor 소스를 침투해서 방황하는 무모한 짓을 번번히 되풀이 하지 않는 유일한 길입니다. 그럼에도 불구하고(^^;;;) 초심자를 위해 폰트의 종류/크기 등을 변경하고 싶다면 그 또한 타당성이 있어보입니다. 혹 그런 경우엔 앞선 header.tmpl 파일과 (mt home)/mt-static/FCKeditor/ 폴더 밑의 소스를 뒤져서 헤쳐나가시면 됩니다.

FCKeditor의 source/config 레벨에서 좀더 특화된 customization을 감행하실 경우엔 충분한 지식을 가지고 하시길 바람니다. 또한 그로 인한 어떤 문제에 대해 저에게 도움을 요청하진 말아 주십시요.^^

Trobuleshooting

  • FCKeditor를 플러그인화하면서 종종 에디터가 나타나지 않는 등의 문제가 생겼는데 그런 원인의 대부분이 바로 클라이언트측의 브라우져 환경에 기인하는 것이었습니다. 특히 팝업 필터같은 것을 요즘엔 많이 사용하는데 이것이 FCKeditor의 생성, 미디어 브라우져의 착동 방해 등의 주요원인입니다. 혹 그런 경우에는 필터를 끄거나 혹은 예외목록등을 이용하십시요.
  • 만약 FCKeditor의 브라우져를 원할히 사용할 수 없는 경우의 태반은 앞선 UserFiles/ 폴더 이하 서브폴더 등의 생성/저장 등의 권한 부족문제입니다.
  • 혹 Firefox/Mozillar 에서 엔트리 저장시 공백 페이지만 나타나고, 원 엔트리 작성 페이지로 돌아오지 않는 경우가 생기는 재수없는(^^) 경우를 겪을 수도 있습니다. 이의 직접적인 원인제공 소스는 잘 모르지만, 확실한 것은 MT의 리다이렉션 방법 때문이라는 것입니다. 물론 디폴트 상태의 MT에서는 문제가 없습니다. 대부분이 HTTP의 Location헤더 방법으로 리다이렉션하기 때문입니다. 그런데 만약 설치한 어떤 플러그인이나 기타 원인으로 리다이렉션을 HTML의 META 태그를 이용해 하는 경우에, Firefox + FCKeditor의 환상적 조합에서 약간의 불협화음을 낸다고 합니다. 이런 재수없는 경우가 혹 발생시엔, 이런 점을 중점으로 먼저 설치한 플러그인을 불활성시켜보는 등의 방법으로 공략하십시요. 특히 제가 만든 Cool IRI라는 매우 훌륭한(?) 플러그인이 바로 그 재수없는 케이스를 발생시켰었습니다. 혹 구버전을 쓰셨던 분중에 FCKeditor를 Firefox상에서 사용하실 분들은 신버전으로 업데이트하십시요. 일반적으로 흔치 않은 에러입니다.

Notes

앞서도 약간 말씀드렸다시피 FCKeditor의 기능에 대한 문의나 그 자체의 에러 등은 제 능력 밖이라는 말씀을 드립니다. 특히나 FCKeditor를 제가 제공한 기능 외에 한층 커스터마이징을 시키는 등에서 발생하는 문제는 더더욱 그러합니다. 물론 제가 공개/배포한 범위 내에서의 문제에 대해선 얼마든지 환영입니다. 이를테면, "Entry Body에서의 FCK는 잘 작동하는데 Extended Entry의 창에서 이런 저런 놈은 저런 이런 문제를 발생시킨다. 왜 그런가? (답: 새 컴퓨터를 구입하세요)" 라는 것이 전형적인 이 플러그인 관련한 질문의 한 예일 것입니다. FCKeditor 등의 W~G 에디터 프로그램은 매우 매우 복잡한 프로그램이면서 특히나 브라우져의 특성에 매우 민감한 것입니다. 이 플러그인을 만들면서 FCKeditor의 Wiki사이트 등을 눈팅하면서 느낀 건, 그 (재수없는 경우) 발생하는 원인 모를(더우기 답은 더 잘모를) 비정상적 작동의 경우의 수가 많다는 점이었습니다. 혹 그러한 경우엔 과감히 이를 눈물을 머금고 포기하시고, EnhancedEntryEditing 과 같은 조금 저수준(^^)의 다른 플러그인를 시도해보시길 바랍니다.

FCKeditor와 Movable Type을 연결해 주는 이 작은 플러그인이 맘에 드신다면, 주변분에게 알리는 간단한 엔트리 하나 로깅하시는 센스.

License

FCKeditor follows its own copyright.
Relased under the Creative Commons License.

Version History

  • 3.2.04: FCKeditor 2.1.1 newly added. / Error "Can't call method "preferred_language"..." fixed, thanks dusl for reporting it.
  • 3.2.03: Chinese CSS version added.
  • 3.2.02: Korean/Japanese CSS version added.
  • 3.2.01: for MT 3.2
  • 1.0 : Initial but not released, for MT3.17

  • google.co.kr (91)
  • link.allblog.net (2)
  • search.naver.com (35)
  • google.com (7)
  • search.daum.net (8)
  • kr.search.yahoo.com (1)
  • search.empas.com (10)
  • web.search.naver.com (2)
  • 192.168.0.4 (1)
  • google.co.jp (1)

TrackBack

TrackBack URL: http://alogblog.com/movabletype/korean_plugins/TCode.name/49. 1284914640

QuickPost/Bookmarklet 등과 같은 자동화 도구로 트랙백을 보내시면, 귀하의 트랙백은 이 사이트의 운영자가 승인할 때까지 이 페이지에 표시되지 않습니다. 혹 자동화 방법으로 보내실 경우, 트랙백이 표시되지 않아도, 반복적으로 보내진 말아 주십시요. 감사합니다.


Comments

새 포스트를 선택하면 error loading "http://www.pdaclub.org/blog/fckstyles.xml" 이라는 팝업창이 두번 뜹니다. entry body쪽은 줄만 한줄 보이는데 선택하면 메뉴가 보이긴 합니다. Extended Entry 쪽은 FCKeditor 메뉴가 잘 보이구요. 뭘 봐야 될지 알수 있을까요?

먼저 본문은 디폴트 상태에서 FCKeditor를 줄여놓았구요, 확장문에서는 펼쳐놓았습니다. 본문 창이 상대적으로 작기때문에 설정에서 그렇게 만든겁니다. fckstyle.xml 파일은 FCKeditor의 "스타일"을 엠티의 템플릿에서 일괄적으로 만들 목적으로 있는 겁니다. 아마 에디터에서 스타일 메뉴를 보면 아무것도 안나타날겁니다. 거기에 "Yellow Pen" 같은 스타일이 나타나야 됩니다. 그 이유는 템플릿에 새로 만들어진 관련 템플릿을 각각 리빌딩하지 않았기때문일겁니다. 기본적으로 블로그 루트에 각각 생성되어 있어야합니다. 만약 스타일이나 FCKeditor의 템플릿 기능을 그리 이용할것이 아니라면, 그냥 /blog밑에 fckstyles.xml이름의 가짜 파일을 하나 두면 에러창은 없어질겁니다. 물론 절대 권하는 방법은 아니구요...

저같은 경우는 blog 폴더안의 내용을 지울수도 있을 것 같아서, 이미지 폴러는 루트의 images, 데이터 파일은 루트의 data 폴더를 만들어 이용하고 있습니다. 이 툴은 사용자가 지정한 폴더 안에 Image 같은 폴더를 생성한 후에 사용자가 원하는 폴더를 만들수 있던데요.
File,Image,Flash 라는 폴더안에 사용자가 새로 폴더를 생성하지 말고 사용자가 지정한 폴더안에 새 폴더를 만들수 있게는 안되나요?
(FCKeditor 자체기능이 이런가 싶기도 합니다.)

각 블로그의 플러그인 설정 메뉴에서 UserFiles폴더를 설정할 수 있습니다. 다만 FCK특성상 이 유저파일 폴더 밑의 Image폴더밑에 그림이 저장됩니다. 그러니까 원칙상 웹루트밑의 /images에 FCK를 이용해 그림을 저장하긴 어렵겠죠. 아니면 UserFiles밑에 있는 Images 폴더를 삭제하고 $ ln -s /.../images Images 처럼 한번 링크를 걸어보세요 혹 되는지... 즉 기존에 존재하는 이미지경로에 대한 링크로 UserFiles밑에 Image를 만드는겁니다.

영문링크(http://alogblog.com/movabletype/plugins/tagging_on_the_fly/)에 보면 태그관련 글이 있던데요. 제 생각에는 카타고리를 여러개 만드는것보다, 카타고리는 간단하게 만들고, 각가의 글들에 태그를 붙여 포스트들을 자세히 부류시키면 좋을 것 같아요. 호찬님 블로그같이 태그플러그인을 써보고 싶은데 한글태그는 안되는것 같더군요. 태그까지 영문으로 기입하는것은 제 생각에는 의미가 없는것 같은데, 혹 한글 지원되는 태그app 아시는게 있으시면 추천 좀 부탁드립니다.
http://hochan.net/archives/2006/01/11@05:09AM.html

태그는 대내적/대외적 의미로 나눠 생각해 볼 수 있는데, 대내적으로는 그 성질이 기존의 카테고리와 똑같습니다. 그럼에도 태그(Tagging)라고 별도로 나온것은, 기존의 카테고리는 새로 만들어줄때마다 사용자가 별도의 생성행위를 했어야했지만, 태그는 그냥 keyword란에 원하는 분류를 간단히 써넣기만 하면 되는 즉석생성이랄까요? 하여튼 그런 편리성때문에 생겨나고 또 인기를 얻는거라 봅니다. 어쨋든 그 내부적인 존재의미는 글을 분류하는 것이라 카테고리와 똑같죠. 말자체도 카테고리(category)보단 태그(tag)가 쉽네요. 하지만 이런 즉석 생성의 단점도 있겠죠. 바로 비슷비슷한 분류에 대해 중복적으로 태그를 만들 수있다는 점입니다. blog, blogging, blogs, Movable Type, movalbetype 이런 예에선 설마...싶을 수 있지만, 시간이 갈수록 진짜 태그구름(tag cloud, 원의미는 이것이 아니지만)처럼 유사한 태그로 산재해 나타날 가능성이 있죠. 물론 이건 실제 태그 메타사이트인 technorati등에서도 실제 발생하는 문제라면 문제이기도 합니다. 카테고리를 이용하면 그럴 염려는 없다고 봐야겠죠.

태깅을 해주는(즉 쉽게 카테고리같은 가외의 분류를 해주는) 플러그인은 그 MT 내부적인 기능상으로 두가지 종류가 있는데요, 하나는 태그를 기존의 MT카테고리와 똑같이 취급하면서 DB 의 카테고리 항목을 그대로 이용하는 놈과, 플러그인 데이터를 이용해 별도의 디비로 관리하는 놈이 있습니다. 머 이또한 일장일단이 있겠군요.

대외적 의미로는 태그메타사이트에 자신의 글에 분류를 넣어서 광고한다는 의미겠죠. 제 FCKeditor 플러그인이 Tagging on the fly는 이 목적의 플러그인입니다. 이 목적으론 기존의 카테고리는 불가하다고 봐야죠. 그 불가이유는 태그관련 메타사이트들이 rel="tag" 링크 속성만 이용하기때문입니다. 대내적인 분류목적으로는 걍 카테고리 사용하고 대외적인 광고(?)목적으로는 걍 Tagging on the fly사용하는...
http://www.sixapart.com/pronet/plugins/ 플럭인 디렉토리에서 Tagging 섹션에 보시면 관련된 놈을 몇개 보실수 있습니다. 전 사용해본적은 없지만, 그중 tagwire라는 놈이 일본분이 만드신거라 Multilingual Tagging을 지원한다고 하니 한글도 되지 않을까 싶긴 합니다.

감사합니다. 많은 도움이 될 것 같습니다. 워드프레스에서 태그를 잠깐 써봤습니다. 알록님이 언급한데로 나중에 되려 태그들로 인해 제대로 분류가 되지 않을까봐 단어선택에 많이 고민하게 되더군요. 저 나름대로 태그로 선택할 단어의 표준화를 시켜야 겠죠. 태그메타사이트에서는 개인마다 선택하는 단어가 틀릴수 있으니 어렵긴 하겠네요.

처음으로 FCKeditor를 설치하였습니다.

다른 부분은 문제없이 잘 돌아가는데
이미지 삽입시 링크를 통한 삽입중 서버보기를 실행하면
이상하게 Explorer 스크립트 에러가 발생합니다.

대충 fckimage.html소스를 살펴보니
서버보기시 실행시키는 스크립트가 함수가 LnkBrowseServer() 인듯한데
혹 어떤 문제로 일어나는 것인지 알고 계신지요?

(에러는 359라인에서 처음 발생합니다)

안녕하세요
FCKeditor의 최대(?)장점이 미디어 브라우저이기 때문에 가능하면 사용이 되도록 설정하는게 좋겠죠.
일단 많은(?) 분들이 사용하신 결과 제 플러그인 자체에는 별 문제가 없어보입니다. 가장 문제가 많이 발생하는 부분이 바로 미디어 브라우저입니다. 툴바기능중에 가장 복잡한 것중에 하나이기 때문일겁니다.
제가 보기에, 서버상의 UserFiles 내의 퍼미션이나 혹은 FCKeditor 자체 파일들의 퍼미션이 부족해서 에러가 뜨거나(일반적인 경우) 브라우저 상에서 스크립트 수행을 이런 저런 이유로 막기때문에 생기는게 가장 흔합니다.(이 경우에는 다른 브라우저, 예를 들면 파이어폭스 등에서는 되는데 IE에선 안된다.. 이러기 쉽습니다.)
가장 난해(?)한 문제는 FCKeidtor자체의 문제입니다. FCK 자체가 워낙 복잡한 프로그램이고 또 크로스 브라우징을 목표로 짠거라 모든 경우들 다 완벽하게 지원하지 못하는 경우가 생기는데, 이런 경우에 걸리면 조금 복잡해집니다. 제가 보기에 윈도 서버를 사용하면 리눅스서버 계열보다 조금더 그럴 확률이 크지 않나? 경험적으로 그리 보입니다.
정확히 어떤 원인인지 바로 알기는 어렵지만, IE는 오류 메시지가 그리 자세하지 못해서 원인을 찾아가는데 별 도움이 안되도군요. 파이어폭스나 오페라 에서는 비교적 자세한거 같습니다. 그렇게 해서 특정한 메시지 등을 발견한다면 그걸 근거로 FCKeidotr 포럼을 검색해보는게 비교적 확실한 방법같습니다.
http://sourceforge.net/forum/message.php?msg_id=3637647 하나 검색해보니 이런 비슷한 경우가 나오는데 이게 정확한 케이스인지는 물론 확신못하겠구요...
뚜렷한 해결책을 못드려 죄송합니다. 문제가 있으면 언제든지 코멘트 주세요.

메일로까지 답변을 주셔서 너무나 감사한 마음입니다.

해당 문제는 저의 경우 기본적으로 IE가 관리하는 팝업방지 보안책이
서버 스크립트를 통해 팝업을 띄우는 것을 가로막았기 때문입니다.
팝업차단 사이트에서 해제하여 주시면 사용에는 별다른 지장이 없습니다.

또는 Cookie가 new window로 전달되지 못하는 현상과도 문제가 있을 수
있다고 소스파일의 해당부분 주석에 명시되어 있으나, 이 보다는
위의 문제와 더욱 연관이 있어 보입니다.

그럼 감사한 마음으로 ^^

Posted by 1010
01.JAVA/Java2008. 8. 28. 10:58
반응형
How do I resolve a java.lang.UnsupportedClassVersionError?
Abstract: How do I resolve a java.lang.UnsupportedClassVersionError?

Issue:

When I attempt to run my Servlet, I receive the following exceptions:

javax.servlet.ServletException: Error allocating a servlet instance
org.apache.coyote.tomcat5.CoyoteAdapter.service(CoyoteAdapter.java:185)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.process(ProcessorTask.java:653)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.process(ProcessorTask.java:534)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.doTask(ProcessorTask.java:403)
com.sun.enterprise.web.connector.grizzly.WorkerThread.run(WorkerThread.java:55)

root cause java.lang.UnsupportedClassVersionError: untitled1/Servlet1 (Unsupported major.minor version 49.0)
java.lang.ClassLoader.defineClass0(Native Method)
java.lang.ClassLoader.defineClass(ClassLoader.java:537)
java.security.SecureClassLoader.defineClass(SecureClassLoader.java:123)
org.apache.catalina.loader.WebappClassLoader.findClassInternal(WebappClassLoader.java:1774)
org.apache.catalina.loader.WebappClassLoader.findClass(WebappClassLoader.java:905)
org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1370)
org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1234)
org.apache.coyote.tomcat5.CoyoteAdapter.service(CoyoteAdapter.java:185)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.process(ProcessorTask.java:653)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.process(ProcessorTask.java:534)
com.sun.enterprise.web.connector.grizzly.ProcessorTask.doTask(ProcessorTask.java:403)
com.sun.enterprise.web.connector.grizzly.WorkerThread.run(WorkerThread.java:55)

How do I resolve this issue?

Solution:

This exception can occur when the source is built targeting a JDK that is not supported by the JDK attempting to run it. In the above example, if the servlet was built targeting only JDK 1.5, but the web server runs JDK 1.4, the above exception will occur.

Check, Project Properties | Build | Java | Target VM, and verify that the Target VM indicates a JDK compatibility that is appropriate for the JDK that is running it. It is recommended to set this field to 'All Java SDKs' for the most compatibility. The only reason you would want to specify a particular version is if your code uses language features that only appear in a particular verison of the JDK, and you want to ensure that users use only a compatible JDK.

Also check, Project Properties | Build | Java | Language Features, and verify that the Language Features are applicable with JDK that is running it.

--------------------------------------------------------------------------------------------------

java.lang
Class UnsupportedClassVersionError

java.lang.Object
  extended byjava.lang.Throwable
      extended byjava.lang.Error
          extended byjava.lang.LinkageError
              extended byjava.lang.ClassFormatError
                  extended byjava.lang.UnsupportedClassVersionError
All Implemented Interfaces:
Serializable

public class UnsupportedClassVersionError
extends ClassFormatError

Thrown when the Java Virtual Machine attempts to read a class file and determines that the major and minor version numbers in the file are not supported.

Since:
1.2
See Also:
Serialized Form

Constructor Summary
UnsupportedClassVersionError()
          Constructs a UnsupportedClassVersionError with no detail message.
UnsupportedClassVersionError(String s)
          Constructs a UnsupportedClassVersionError with the specified detail message.
 
Methods inherited from class java.lang.Throwable
fillInStackTrace, getCause, getLocalizedMessage, getMessage, getStackTrace, initCause, printStackTrace, printStackTrace, printStackTrace, setStackTrace, toString
 
Methods inherited from class java.lang.Object
clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait
 

Constructor Detail

UnsupportedClassVersionError

public UnsupportedClassVersionError()
Constructs a UnsupportedClassVersionError with no detail message.

UnsupportedClassVersionError

public UnsupportedClassVersionError(String s)
Constructs a UnsupportedClassVersionError with the specified detail message.
Parameters:
s - the detail message.

JavaTM 2 Platform
Std. Ed. v1.4.2

Submit a bug or feature
For further API reference and developer documentation, see Java 2 SDK SE Developer Documentation. That documentation contains more detailed, developer-targeted descriptions, with conceptual overviews, definitions of terms, workarounds, and working code examples.

Copyright 2003 Sun Microsystems, Inc. All rights reserved. Use is subject to license terms. Also see the documentation redistribution policy.
-------------------------------------------------------------------------

java.lang.UnsupportedClassVersionError

By Alvin J. Alexander, devdaily.com

You know what will really screw with your mind? When there is a 1.4.2 version of a java.exe file in the C:\Windows\System32 directory of your Windows XP system, and you're trying to compile and run a Java 1.5 program from the command line. I kept getting this error message and couldn't figure it out, even though I knew what it meant(!):

C:\Al\JavaProjects\AutomatedGUITester\deploy>java -jar xylocator.jar

Exception in thread "main" java.lang.UnsupportedClassVersionError: com/devdaily/
xylocator/XYLocator (Unsupported major.minor version 49.0)
        at java.lang.ClassLoader.defineClass0(Native Method)
        at java.lang.ClassLoader.defineClass(ClassLoader.java:537)
        at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:12
3)
        at java.net.URLClassLoader.defineClass(URLClassLoader.java:251)
        at java.net.URLClassLoader.access$100(URLClassLoader.java:55)
        at java.net.URLClassLoader$1.run(URLClassLoader.java:194)
        at java.security.AccessController.doPrivileged(Native Method)
        at java.net.URLClassLoader.findClass(URLClassLoader.java:187)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:289)
        at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:274)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:235)
        at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:302)

I knew that this error message was telling me that I was trying to run a Java program/class with a JVM version that was older than what I compiled it with, but I thought I had everything set up right, including my JAVA_HOME and PATH environment variables. (FWIW, after a little research it looks like the "Unsupported major.minor version 49.0" message refers to Java 1.5.0.)

Now, before you think I'm too crazy I compile my program with this batch file:

REM compile.bat
set JAVA_HOME=C:\jdk1.5.0_06
set PATH=C:\Windows;C:\Windows\System32;C:\jdk1.5.0_06\bin
set CLASSPATH=

javac com/devdaily/xylocator/XYLocator.java

Then I would create my jar file with this batch script:

REM createjar.bat
set JAVA_HOME=C:\jdk1.5.0_06
set PATH=C:\Windows;C:\Windows\System32;C:\jdk1.5.0_06\bin
set CLASSPATH=

jar cfm xylocator.jar Manifest.txt com/devdaily/xylocator/*.class

And finally, I would try to run it like this:

REM runjar.bat (BAD VERSION, NEED TO FIX PATH)

set JAVA_HOME=C:\jdk1.5.0_06
set PATH=C:\Windows;C:\Windows\System32;C:\jdk1.5.0_06\bin
set CLASSPATH=
set QTJAVA=

java -jar xylocator.jar

Now, once I realized that the #%$! java.exe file was in the C:\Windows\System32 directory the problem was easy to fix. I just had to put the Java 1.5 directory in the PATH before the System32 directory, like this:

REM runjar.bat
set JAVA_HOME=C:\jdk1.5.0_06
REM This works because the JDK is in the PATH before the System32
REM directory.
set PATH=C:\jdk1.5.0_06\bin;C:\Windows;C:\Windows\System32
set CLASSPATH=
set QTJAVA=

java -jar xylocator.jar

Now it works like a champ. FWIW, this Java program lets me determine the x/y coordinates of any point I choose on the screen. I basically take a snapshot of the screen, then display that snapshot as an overlay to the entire desktop, then use mouse click information to get the x/y coordinates. Some of this had to be done using Java 1.5.x, or native code, which I don't want to get into because I want this to work on the Mac as well as Windows.

------------------------------------------------------------------------
Posted by 1010