ToWis.net(블러그 정리중 40% 완료)

공동 작업을 하는 과정에서 파일서버를 공동으로 두고 작업 하는 경우가 있다.
이런 경우 네트워크드라이버를 통해 접속하는 경우가 많은데 웹으로도 화면 목록을 구현할 필요가 있을 경우 사용하면 괜찮은 프로그램이 있어서 올린다.

PHP로 만들어 졌으며 간단한 설정만 하면 서버상의 파일 목록을 웹으로 보여준다. 거기다... 찾기 기능까지 있으니 협업해서 파일서버 사용하는 경우 나름 쓸만한다. 물론 서버상에 파일, 디렉토리 목록을 웹으로 보여주는건 어렵지 않지만 막상 만들려고 보면 이것도 손이 가다보니...

http://autoindex.sourceforge.net/

사진 찍은 시간이 저녁5시가 약간 넘은 시간이다. 온통 어둡다. 러시아에 온지 1달이 되가는데 처음 왔을 때 며칠 빼고 도통 밝은 날을 볼 수 가 없다. 더구나 앞으론 더 심해 질 것 같은데 이러다 우울증 안 걸리려나 모르겠다. 그래도 다행인건 조금씩 적응이 되 가고 있다는 점이 위안이라면 위안일 듯…

더보기

아무튼 며칠 전에도 눈이 오긴 왔지만 이제 진짜 눈이 오려는 듯 몇 시간 안 왔는데 꽤 나 쌓였다. 그리고 오늘도 계속 눈만 온다. 물론 한국도 산간오지엔 엄청 오긴 하지만 한국처럼 햇볕이 별로 없으니 바람만 세게 불면 눈이 바닥에 쫙 갈려서 날라 다닌다. 꼭 사막의 모래들이 날아 다는 것처럼 보이다.

일단 요즘 근황은 이런 환경에서 적응 하려고 노력 하고 있는 중이다.

예제

 

위의 이미지는 예제를 위한 것이다.

일단 위와 같은 레이아웃이 있을 경우 각 엘리먼트를 클릭한 경우 해당 값 또는 인덱스를 알아 오고자 하는 경우가 있다. 이런 경우 jquery의 selector이용하면 쉽게 해당 값을 확인 할 수 있다.

간혹 설치된 PC가 그룹정책에 의해서 디스플레이 정보등이 막혀 있는 경우가 있다.
예를 들자면 화면보호기등이 없다거나, 설정이 변경 되어 있는 경우이다.

이런 경우 그룹정책에서 해당 정보를 변경 해서 바꿀 수 있다.

시작 > 실행 > gpedit.msc

위 이미지를 통해 알 수 있듯히 각 기능을 상세히 설정 할 수 있다.

참고: 혹시 저기서 변경을 해도 화면보호기가 작동을 한다면 레지스트에서 값을 변경해보자.
HKEY_CURRENT_USER\Control Panel\Desktop\ScreenSaveActive
1 -> 0 으로 변경

php버전입니다. javascript는 레이블(label)관련 부분을 찾아 보시면 됩니다.

for($i=0;$i<=10;$i++) {
    for($k=0;$k<=10;$k++) {
        echo $k."<br>";
        if($k==5) {
            break 2;
        }
    }
}

위와 같이 반복문에 반복문을 돌리던중 조건이 맞을 경우 반복문 전체를 빠져나와야 하는경우 사용합시면 됩니다.

만약 위와같이 안하고 일반적인 방법을 사용하게 되면 변수 하나를 써야 하는 상황이 발생됩니다.

예를 보여 드리자면 아래와 같습니다.

$isBreak=false;
for($i=0;$i<=10;$i++) {
    if($isBreak) break;
    for($k=0;$k<=10;$k++) {
        echo $k."<br>";
        if($k==5) {
            $isBreak=true;
            break;
        }
    }
}

이제 본겨적으로 개발모드로 들어가기 전에 소스 관리 등을 위한 윈도우 개발환경을 구축할 필요가 있었다. 지금 깔아둔 것이라고는 학교에서 제공되는 Visual Studio 2008 …

소스관리가 필요하다. 나 같이 만들다가 갑자기 막 뜯어고치고 실패했을 때, 돌아가지 못하는 상황은 종종 발생된다. 그리고 끝도 없이 Ctrl + z 만 누르고 있다. 이제 그런 생활은 안녕! 소스관리모드 돌입!

1. VisualSVN  설치

역시 소스관리에서 제일 유명하신 Subversion을 설치할 예정인데 Apache 깔고 이럴러면 일이 너무 많기 때문에 한방에 해결해주는 VisualSVN Server로 결정!
재미있는 것이 VisualVCN Client는 유료인데, Server는 무료다.

Download : http://www.visualsvn.com/server/

부담없는 용량 약 4M의 프로그램을 다운 받아서 설치!

2. TortoiseSVN 설치

Subversion의 유명한 GUI 클라이언트 프로그램인 TortoiseSVN을 설치한다. 이 녀석은 윈도우의 쉘(explorer) 확장 프로그램으로 탐색기 팝업 메뉴에서 Subversion 작업을 할 수 있게 도와준다.

Download : http://tortoisesvn.net/downloads
한글언어팩 : http://tortoisesvn.net/translation_release_gui

위의 주소에서 부담없이 받을 수 있다. 역시 오픈소스 사랑해요!

설치를 완료하면 재부팅을 요구한다. 귀찮게 하지만 작업관리자-Task Manager(Ctrl+Alt+Del)로 들어가서 쉘(explorer.exe)만 종료한 뒤 프로그램을 시작할 수 있다. 언어팩은 귀찮으니깐 패스!


3. 저장소(Repository) 만들기

저장소는 VisualSVN으로도 만들 수 있고 TortoiseSVN을 이용해서도 만들 수 있다. 아래의 이미지를 참고해서편한 스타일로 만들도록 한다. 어차피 현재(2009.05.26) 저장소를 만들 때, 기본적인 파일시스템(Native FS,FSFS)의 방법으로 만들어졌다.

아래의 이미지는 MediaGestures 라는 프로젝트를 위한 저장소이다.




4. 저장소(Repository)의 설정

만들어진 저장소 안의 conf 디렉토리안에 설정과 관련된 파일들이 존재한다.

•svnserve.conf : svnserve를 사용한 저장소 서버를 구성할 때 사용
•passwd : svnserve에서 사용되는 사용자 ID/PW
•authz : svnserver, Apache에서 사용, 접근 권한 설정 파일
하지만 이런 설정을 Linux도 아닌 윈도우에서 GUI없이 한다는 것은 매우 불편하다. 그래서 역시 VisualSVNServer를 사용해준다.  Properties 로 들어가서 간단하게 필요한 User를 추가해주면 알아서 자동으로 된다. 자세한것은 알려하지 말자 머리아프다.

authz 설정은 Hooks 항목에서 설정할 수 있다. 필요하면^^;




5. 저장소(Repository) 기본 디렉터리 생성

기본적으로 필요한 trunk, branches, tags 디렉터리를 생성한다. VisualSVN Server로 저장소를 만들 때 기본으로 함께 만들 수도 있다.



•trunk : 개발이 이루어지는 디렉터리
•branches : 프로젝트 안의 작은 프로젝트
•tags : 릴리즈 버젼 보관 장소


6.  SVN에 접속하기

TortoiseSVN을 이용해서 SVN에 접속할려면 바탕화면에서 오른쪽 클릭 -> TortoiseSVN ->Repo-Browser을 클릭하고 URL(VisualSVN Server에 적힌 주소를 사용하면 된다) 입력하면 접속할 수 있다.



7. 프로젝트 Import 하기

저장소로 프로젝트를 Import하여 이제 사용하는 방법을 알아본다. 간단하게 탐색기에서 임포트할 프로젝트를 SVN > Import 하면 된다.





8. SVN Checkout 으로 프로젝트 받기

이제 거의 끝났다. SVN에 있는 프로젝트를 받아서 바뀐 파일들을 쉽게 파악할 수 있도록 SVN Checkout을 클릭해서 원하는 위치로 받는다. 그럼 아래의 화면처럼 v(체크)표시는 바뀌지 않은 것들이고 !(느낌표)는 수정된 파일이기 때문에 commit이 필요하다는 것을 의미한다.

디자이너와 친해지기? 위한 자료...ㅡㅡ;

UI설계시 개발자도 한몫을 해야 하니... 알아 두면 좋을 듯... 우리 이제 클라가 화면 막 바꿔 달라고 하면 이런 과정을 거쳤으니 안된다 라고 해보자....

DIV태그에 text-align:center속성을 주고 TABLE태그를 둘 경우 IE에선 가운데 정렬이 되는데 FF(또는 dtd에 따른 IE8)에선 왜 안되냐 라고 물어 보는 분들이 있어 블러그에 올려 둡니다.

TABLE태그는 기본적으로  Block-level 엘리먼트로 정의 되어 있습니다.(http://htmlhelp.com/reference/html40/block.html)
따라서 이런 Block-Level 엘리먼트는 text-align:center로 중앙 정렬을 할 수 없습니다. 원칙적으로는 말이죠.


일단 이미지를 통해 내용을 확인하겠습니다.

이렇게 간단히 코딩을 하고 위와 같은 이미지를 기대 하셨을 겁니다. 그런데 이게 브라우저 또는 dtd에 따라서 다른 모양을 나타 낼겁니다.
혹시 에디트플러스를 켜놓고 html에 위의 내용을 작성 하셨다면 dtd문제로 브라우저 마다 다른 화면을 보게 될겁니다.

그 이유는 에디트플러스에서 제공하는 기본적인 dtd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">는 dtd가 아닙니다. 순수하게 문법오류만을 잡아낼뿐 dtd에 대한 내용이 없습니다. 뿐만아니라 HTML 4.0입니다. 이미 HTML이 4.1로 바뀐마당에 서언문 자체도 문제가 있죠. 아무튼 이건 기본적인 dtd일뿐입니다.


따라서 만약 DIV안의 TABLE을 중앙 정렬을 시켜야 한다면 아래와 같이 하셔야 합니다.

위와 같이 하는게 정상적인 방법인데, 만약 quirks모드로 화면을 구동 시킨다면 IE8이건 IE6이건 단순히 DIV에 text-align:center만 놓아도 됩니다.

사실 IE6이 문제라기 보단 IE가 가진 기본적인 quirks모드에 따라 화면이 달라 보이는 겁니다.
즉 위의 소스에서 보이는 DTD를 STRIC모드로 하였을 경우 TABLE에 style="margin-left:auto; margin-right:auto"(또는 margin:0px auto)속성을 줘야 합니다.


위의 속성으로 화면을 보게 되면 아래와 같이 나옵니다.


사실 이런 불편한 관계를 피하기 위해서는 기본적으로 DTD선언에 맞춰 화면을 개발 해야 하며, 기본적으로 엘리먼트의 속성을 파악 해줘야 합니다.

이런거 하나쯤 있었으면 했는데 역시나 있군요.
출력하거나 바탕화면에 설정 해 놓고 보면 괜찮을 듯 합니다.

출처 사이트에 가시면 아래 이미지 외에도 다른 이미지도 구할 수 있습니다.

날짜, 시간 계산은 사용할 일이 참 많은데... 사용할려고 보면 기억이 잘 안나기에 올려둔다.

오라클의 DATE형은 기본적으로 +.- 연산을 통해 더하거나 뺄수 있습니다.
1이 1일이므로 N/24를 하면 N시간만큼, N/1440 하면 N분만큼 N/86400하면 N초만큼 해당 날짜를 계산 할 수 있습니다.

계산 방법은 아래와 같습니다.
1/1 = 1일
1/24 = 24시간
1/1440 = 1분
1/84600 = 1초