happyness

The Complete RRDTool-based Graphing Solution Part III

(좌충우돌) — Wed, 18 Jun 2008 20:05:33 +0900

이제 기본적으로 cacti가 실행될 환경이 만들어 졌다.
순서대로 cacti를 설치한다.

1. 설치전 작업

$ ln -s /usr/local/rrdtool/bin/rrdtool /usr/local/bin/rrdtool
$ ln -s /usr/local/php/bin/php /usr/local/bin/php

rrdtool: /usr/local/rrdtool 에 설치되었다 가정
php: /usr/local/php 에 설치되었다 가정.

2. cacti 프로그램 압축해제
웹서비스가 될 저장소는 /data4/httpdata 로 정한다.

$ tar -xvzf cacti-0.8.7b.tar.gz
$ mv cacti-0.8.7b cacti

3. PHP 설정
/etc/php.ini 파일을 열어서 extension_dir을 찾아 extension_dir = "./"을 extension_dir = /etc/php.d 로 입력 /etc 하위에 php.d 디렉토리 생성 후 mysql.ini , snmp.ini를 생성한다.

$ mkdir /etc/php.d
$ touch /etc/php.d/mysql.ini
$ touch /etc/php.d/snmp.ini

mysql.ini에 아래와 같이 추가

; Enable mysql extension module
extension=mysql.so

snmp.ini에 아래와 같이 추가

; Enable snmp extension module
extension=snmp.so

참고: PHP 4.3.5 또는 이하 버전을 사용하는 경우 아래 라인을 추가하며, 그 이상 버전의 경우 삭제한다.
session.save_path=/tmp

템블릿을 업로딩 할 경우 아래 업로드 옵션이 설정되어 있는지 확인한다.
file_uploads = On

3. Apache 설정
Apache와 PHP가 정상적으로 설치된 경우 별도 설정할 것이 없으며, DirectoryIndex 에 index.php가 설정되어 있는지 확인 한후 Apache를 재시작 한다.

4. MySQL 설정
cacti가 설치된 디렉토리로 이동하여 데이터 베이스를 설정한다.

$ cd /data4/httpdata/cacti
$ mysql -u root -p
mysql> create database cacti;
mysql> use cacti;
mysql> source cacti.sql;
mysql> GRANT ALL ON cacti.* TO cactiuser@localhost IDENTIFIED BY 'cacti';
mysql> flush privileges;

5. cacti 데이터 베이스 환경설정
다운받아 압축을 푼 cacti 디렉토리의 include/config.php 파일을 열어 위에서 생성한 접속정보를 넣어준다.

# Edit include/config.php and specify the database type, name, host, user and password for your Cacti configuration.
$database_type = "mysql";
$database_default = "cacti";
$database_hostname = "localhost";
$database_username = "cactiuser";
$database_password = "cacti";

6. crontab 설정
데이터를 수집하기 위해 /ect/crontab 을 열어 아래 라인을 추가한다. 5분에 한번씩 데이터를 수집한다.

*/5 * * * * httpdusr php /data4/httpdata/cacti/poller.php > /dev/null 2>&1

참고: httpduser는 Apache를 실행하는 사용자로 등록하였으나, 그렇지 않은 경우, rra 및 log 디렉토리를 httpduser가 쓰기 가능한 권한을 설정해야 한다.

7. cacti 시작
http://[yourdomain]/cacti 로 접속한다.
최초 접속하게 되면 기본 환경설정 페이지가 나타나며, 이 스텝을 완료하고 난후 cacti에 로그인 할 수 있다. 접속 계정은 admin/admin이며, 최초 접속시 암호를 변경해야 한다.

[Step 1: 최초 접속화면]

[Step 2: 신규설치 인지 업그레이드인지 선택, 여기서는 신규설치 선택]

[Step 3: cacti가 사용할 기본 프로그램 위치 설정]

RRDTool Utility Version은 1.2.x를 선택한다. 아직 1.3.0은 지원되지 않고 있다.

[Step 4: 첫 로그인 화면, admin/admin으로 로그인한다.]

[Step 5: 암호를 재설정하라는 메시지가 출력된다]

[Step 6: 환경설정이 모두 끝나 cacti의 첫 화면이 나타났다.]

The Complete RRDTool-based Graphing Solution Part II

(좌충우돌) — Sun, 15 Jun 2008 16:16:11 +0900

여기서는 cacti가 동작하기 위한 필요 팩키지 설치에 대하여 알아본다.
각 배포본에 따른 환경이 조금씩 다를 수 있으며, 오래된 배포본일 수록 설치된 팩키지를 업그레이드 해야 할 수도 있다.

본 설치환경은 Fedora Core 4이다.

리눅스에서 cacti 실행환경 및 의존성

cacti				cacti-0.8.7b.tar.gz
	Apache			httpd-2.0.63.tar.gz
		PHP		php-4.4.8.tar.gz
	MySQL			mysql-5.0.51b.tar.gz
	RRDTool			rrdtool-1.3.0.tar.gz
		cairo		cairo-1.6.4.tar.gz
			pixman	pixman-0.11.4.tar.gz
			freetype	freetype-2.3.6.tar.gz
			fontconfig	fontconfig-2.6.0.tar.gz
		pango		pango-1.21.0.tar.gz
			glib2	glib-2.16.3.tar.gz
	Net-SNMP			net-snmp-5.4.1.1.tar.gz
		beecrypt		beecrypt-devel-4.1.2-8.i386.rpm
		elfutils-libelf-devel		elfutils-libelf-devel-0.108-1.i386.rpm

프로그램 설치
1. 사전 작업
버전 업그레이드 및 설치시 라이브러리를 참조하지 못하는 팩키지는 삭제한후 소스를 다운받아 build한다.

fontconfig-2.2.3-13
freetype-2.1.9-2
freetype-devel-2.1.9-2
glib2-devel-2.6.6-1
glib2-2.6.6-1
pango-1.8.1-2

삭제 방법: 의존성으로 인하여 다른 팩키지를 삭제할 수 있으므로 --nodeps 옵션을 준다.

# rpm -e --nodeps fontconfig-2.2.3-13

2. 설치
컴파일시 라이브러리를 찾지 못 할 수 있으므로 아래와 같이 설정한다.

# export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:/usr/lib/pkgconfig

각 라이브러리는 의존성 및 버전에 영향을 받으므로 최하단 부터 설치한다.

rrdtool-1.3rc9
    cairo-1.6.4
        pixman-0.11.4
        freetype-2.3.5
        fontconfig-2.6.0
            - 소스 컴파일한 위치에서 fontconfig.pc 파일을 /usr/local/lib/pkgconfig로 복사
    pango-1.21.2
        glib-2.15.4

net-snmp-5.4.1.1
    컴파일시 Perl 버전과 매치되지 않아 메시지가 출력되면 아래와 같이 세팅한다. 
    버전을 맞추어도 된다.
   # export NETSNMP_DONT_CHECK_VERSION=1

    아래 패키지가 필요하다 다운받아 설치한다.
    beecrypt-devel-4.1.2-8.i386.rpm
    elfutils-libelf-devel-0.108-1.i386.rpm

    ./configure
    ./make
    ./make install

PHP
    net-snmp를 사용하려면 snmp 기능을 사용하기 위해 '--with-snmp' 옵션을 사용해야 한다.
    snmp 옵션이 사용되었는지는 phpinfo() 함수를 이용하여 알 수 있다.

3. 환경설정
net-snmp
컴파일후 소스 디렉토리에 있는 EXAMPLE.conf를 /usr/local/share/snmp에 snmpd.conf로 복사한다.

cp EXAMPLE.CONF /usr/local/share/snmp

/etc/init.d 에 snmpd 파일을 아래와 같이 생성한다.

#!/bin/sh
#
# Start snmpd
#
start() {
     export LD_LIBRARY_PATH=.:/lib:/usr/lib:/usr/local/lib
     echo "Starting SNMPD"
     /usr/local/sbin/snmpd -c /usr/local/share/snmp/snmpd.conf
}
stop() {
     echo "Stopping SNMPD"
     killall snmpd > /dev/null 2>&1
     killall snmpd > /dev/null 2>&1
}
restart() {
     stop
     start
}
case "$1" in
     start)
             start
             ;;
     stop)
             stop
             ;;
     restart)
             restart
             ;;
     cleanup)
             ;;
     *)
             echo $"Usage: $0 {start|stop|restart}"
             exit 1
esac
exit $?

이로서 cacti를 사용할 기본적인 팩키지를 모두 설치했다.
다음 Part에서 cacti를 설치해본다.

The Complete RRDTool-based Graphing Solution Part I

(좌충우돌) — Sat, 14 Jun 2008 01:03:42 +0900

시스템 모니터링 툴로 MRTG를 대체하는 RRDTool이 있고, 이것을 많이 사용하고 있다. 초보인 나로서는 RRDTool을 설치하고, 설정하여 그래핑하는 일은 쉬운일이 아니다.
이런 일련의 일을 보다 쉽게 시스템 상황을 그래프화 할 수 있는 cacti툴은 Apache, PHP, MySQL, NET-SNMP 기반으로 동작하며, MySQL을 이용한 데이터 소스 관리, RRDTool을 이용한 그래프 생성, 사용자 관리등을 지원한다. 특히 템플릿을 통한 데이터소스 및 그래프 지원은 cacti를 무한히 확장할 수 있도록 도와준다.

What is cacti

Cacti is a complete frontend to RRDTool, it stores all of the necessary information to create graphs and populate them with data in a MySQL database. The frontend is completely PHP driven. Along with being able to maintain Graphs, Data Sources, and Round Robin Archives in a database, cacti handles the data gathering. There is also SNMP support for those used to creating traffic graphs with MRTG.

Data Sources
To handle data gathering, you can feed cacti the paths to any external script/command along with any data that the user will need to "fill in", cacti will then gather this data in a cron-job and populate a MySQL database/the round robin archives.

Data Sources can also be created, which correspond to actual data on the graph. For instance, if a user would want to graph the ping times to a host, you could create a data source utilizing a script that pings a host and returns it's value in milliseconds. After defining options for RRDTool such as how to store the data you will be able to define any additional information that the data input source requires, such as a host to ping in this case. Once a data source is created, it is automatically maintained at 5 minute intervals.

Graphs
Once one or more data sources are defined, an RRDTool graph can be created using the data. Cacti allows you to create almost any imaginable RRDTool graph using all of the standard RRDTool graph types and consolidation functions. A color selection area and automatic text padding function also aid in the creation of graphs to make the process easier.

Not only can you create RRDTool based graphs in cacti, but there are many ways to display them. Along with a standard "list view" and a "preview mode", which resembles the RRDTool frontend 14all, there is a "tree view", which allows you to put graphs onto a hierarchical tree for organizational purposes.

User Management
Due to the many functions of cacti, a user based management tool is built in so you can add users and give them rights to certain areas of cacti. This would allow someone to create some users that can change graph parameters, while others can only view graphs. Each user also maintains their own settings when it comes to viewing graphs.

Templating
Lastly, cacti is able to scale to a large number of data sources and graphs through the use of templates. This allows the creation of a single graph or data source template which defines any graph or data source associated with it. Host templates enable you to define the capabilities of a host so cacti can poll it for information upon the addition of a new host.

Table for Layout vs CSS Layout

(좌충우돌) — Mon, 09 Jun 2008 00:41:03 +0900

웹에 종사하는 많은 사람들이 이미 웹표준에 대해 경험하고 실무에 적용하고 있다.
본인의 경우 웹표준에 대해 접하기 시작한 것은 작년 말부터 이며, 실제 실무에 적용하기 시작한 것은 그리 얼마 되지 않는다.
테이블 코딩에서 완전한 CSS로의 전환은 많은 시행착오를 필요로 했다. CSS가 여타 프로그램 언어처엄 에러를 명시적으로 표시해주지 않으니 디버깅 시간을 많이 필요로 했다. 하지만 아래의 글과 같이 많은 이점을 가져다 준다.
특히 고객에게 금전적 이익을 가져다 줄 수 있다는 것이다. 이부분에 대하여 많은 이야기가 있을 수 있고 사이트 성격에 따라 달라질 수 있겠으나(개발 공수가 늘어 프로젝트 비용이 증가할 수도 있겠다.) 본인이 관리하는 사이트의 경우 웹표준으로 전환하고 전체 페이지 사이즈가 78%나 준것을 경험할 수 있었다. 이것은 실제 네트웍에 흐르는 데이터가 이 만큼 감소한다는 이야기로 방문자가 많은 사이트 일수록 비용적 측면에서 확실히 이득이 된다.
꿈일 지도 모르나 전세게 웹사이트가 웹표준으로 이전을 한다면 전체 네트웍의 소통이 점더 원할하고, 투자비용도 아낄 수 있지 않을까 생각해 본다.

아래의 내용은 정찬명님의 포스팅한 글을 싣는다.

정찬명님의 글
http://naradesign.net/wp/2007/02/03/113/

약 1년 전 네이버 블로그를 사용하면서 동일한 실험을 했던 적이 있습니다. 그 당시에는 Table Layout과 DIV Layout을 비교한다고 말했었지만 사실 Table Layout 이라는 말과 DIV Layout 이라는 말은 모두 잘못된 표현입니다. Table Layout 이라는 용어는 Table이 격자형의 2차원 데이터를 마크업 하는 용도를 지니고 있다는 점에서 Layout 이라는 표현과 함께 사용한 것이 잘못된 표현이며, DIV Layout 이라는 용어는 DIV가 의미를 그룹짓는 용도를 지니고 있다는 점에서 역시 Layout과 결합한 것은 잘못된 표현 입니다. 결국 Layout 이라는 것은 화면배치를 위한 표현에 해당하기 때문에 어떤 (X)HTML 요소와도 조합하여 사용하는 것은 잘못된 표현이라고 할 수 있습니다. Table Layout 이라는 말은 사실 ‘Table for Layout’ 즉, ‘레이아웃을 위하여 사용된 테이블’ 정도로 밖에 표현할 수 없습니다. 두 가지 표현이 별반 차이가 없는 것처럼 느껴지는 분들도 계실테지만 사실 엄청난 차이가 존재합니다. 전자는 Table이 Layout을 위하여 사용되고 있고 또 그럴 수도 있다는 것을 전제 하지만 후자는 Table이 Layout 용도로 사용되는 것을 확실하게 경계하였기 때문에 사용되는 표현입니다. 어쨌거나 이미 네이버에서만 162분이나 스크랩을 하셨고 저는 1년이 지난 최근에서야 해당 포스트를 수정하였는데 1년동안 여러 분들께 잘못된 정보를 제공했다는 사실 때문에 약간의 죄책감을 가지게 되었습니다. 그것을 만회할 요량으로 다시 해당 코드를 손질하고 이곳에 올려놓습니다. 이제는 자수하여 광명찾고 싶습니다.

Table for Layout 예제보기	CSS Layout 예제보기

웹 표준 방식의 CSS Layout은 콘텐트가 논리적으로 선형화 됩니다.

상기 두 개의 이미지는 동일한 Layout을 제공하고 있지만 코드는 각각 다릅니다. 이미 짐작하고 계셨겠지만 이번에는 CSS를 제거한 상태로 한번 보여드리겠습니다. CSS를 제거하게 되면 콘텐트가 선형화 되는 모습을 시각적으로 확인할 수 있고 선형화 하였을 때 콘텐트의 나열 순서에 무리가 없다면 그것은 어떤 장치에서 보더라도 논리적으로 바르게 이해할 수 있습니다. 왼쪽은 화면배치를 위하여 Table이 사용된 페이지이며 오른쪽이 CSS를 이용하여 Layout된 페이지 입니다. Opera Mini와 같은 휴대용 웹 브라우징 장치는 웹 페이지를 렌더링 할 때 Table을 모두 걷어내고 CSS조차 제거된 상태로 표시합니다. 따라서 아래 두 가지 경우의 페이지 가운데 어떤 페이지가 논리적으로 선형화 될 것인지는 굳이 보지 않더라도 쉽게 추측이 가능합니다. 사실 이것은 CSS Layout의 영향이라기 보다는 Markup을 잘 했기 때문에 볼 수 있는 결과 입니다. 하지만 거꾸로 생각하면 표현요소가 Markup으로부터 완전히 분리되어 있기 때문에 이렇게 논리적으로 Markup 하는것이 가능해 집니다. Layout에 Table을 사용하는 경우는 마크업이 표현요소를 포함하고 있기 때문에 콘텐트를 논리적으로 배치하려고 시도하면 표현문제와 충돌하게 되고 결국 논리보다는 표현을 위한 용도로 마크업을 사용하게 되어 논리적인 배치와는 거리가 멀어지게 됩니다.

CSS가 제거된 Table for Layout 예제보기	CSS가 제거된 Web Standard Layout 예제보기

보통 Table을 선형화 하더라도 콘텐트의 순서가 완전히 뒤죽박죽으로 인식되지는 않습니다. 왜냐하면 Table을 걷어내는 경우 좌측 상단으로부터 우측 하단으로 콘텐트가 선형화 되는데 그러한 순서에 맞게 페이지의 콘텐트를 배치하는 경우도 있기 때문입니다. 그러나 그것은 운이 아주 좋은 경우이며 대부분의 경우는 논리적인 순서에 문제가 생기게 됩니다.

CSS Layout은 Table for Layout에 비하여 파일의 용량을 50% 이상 절감해 줍니다.

무엇인가 원하는 위치에 표시하기 위하여 Table을 Layout에 사용하는 경우는 <table><tr><td>내용</td></tr></table> 형식으로 코딩 되지만 CSS Layout은 <div>내용</div> 형식으로 코딩 됩니다. 예제코드 전체를 보여드리겠습니다. 화면(또는 지면) 관계상 코드를 모두 담아내면 화면이 너무 커지므로 코드의 서체크기를 일부러 줄여 놓았습니다. 코드를 자세히 확인하시려면 그냥 복사해서 메모장에서 볼 것을 권합니다.

Table for Layout	CSS Layout
89 line	39 line
2,661 byte	1,027 byte
<!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”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr” /> <title>Table for Layout</title> <link href=”TableForLayout.css” rel=”stylesheet” type=”text/css” /> </head> <body style=”margin:0″> <p id=”moveTo”><a href=”CSSLayout.html”>Go to CSS Layout</a></p> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”20″> <tr> <td colspan=”3″ valign=”top” id=”header”>Table for Layout</td> </tr> <tr> <td width=”20%” height=”300″ valign=”top” style=”background:#666″><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”menu”> <tr> <th style=”height:30px; background:#999″>2Depth Title </th> </tr> <tr> <td>Menu1</td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Menu2</td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Menu3</td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Menu4</td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Menu5</td> </tr> <tr> <td class=”line”></td> </tr> </table></td> <td width=”60%” height=”300″ valign=”top” style=”background:#999″><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”pageTitle”> <tr> <th style=”height:30px”>3Depth Title </th> </tr> </table> <table width=”100%” cellspacing=”0″> <tr> <td id=”text”>Content </td> </tr> </table></td> <td width=”20%” height=”300″ valign=”top” style=”background:#CCC”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”5″ id=”links”> <tr> <th style=”height:30px; background:#666″>Links </th> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Link List 2 </td> </tr> <tr> <td class=”line”></td> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class=”line”></td> </tr> </table></td> </tr> <tr> <td colspan=”3″ valign=”top” id=”footer” style=”background:#333″><a href=”http://naradesign.net/”>naradesign.net</a></td> </tr> </table> </body> </html>	<!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”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=euc-kr” /> <title>CSS Layout</title> <link href=”CSSLayout.css” rel=”stylesheet” type=”text/css” /> </head> <body> <p id=”moveTo”><a href=”TableForLayout.html”>Go to Table for Layout</a></p> <h1>CSS Layout</h1> <div id=”center”> <div id=”menu”> <h2>2Depth Title </h2> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> <div id=”content”> <h3>3Depth Title </h3> <div id=”text”> Content </div> </div> <div id=”links”> <h3>Links</h3> <ul> <li>Link List 1</li> <li>Link List 2</li> <li>Link List 3 </li> </ul> </div> </div> <address id=”footer”> <a href=”http://naradesign.net/”>naradesign.net</a> </address> </body> </html>

Table for Layout	CSS Layout
17 line	23 line
1,030 byte	1,771 byte
* { font-size:small; font-family:Arial} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position:absolute; top:4em; right:2em} #header { font-size:5em; color:#FFF; font-weight:bold; background:#000} #menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left} #menu td { font-size:small; font-weight:bold; color:#FFF} #menu td.line { height:1px; padding:0; background:#FFF} #pageTitle { margin-bottom:1em; background:#999} #pageTitle th, #link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #text { color:#FFF;} #links { margin-bottom:1em} #links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #links td { color:#FFF} #links td.line { height:1px; padding:0; background:#FFF} #footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF}	* { margin:0; padding:0; font-size:small; font-family:Arial} h1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px} h2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} h3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position:absolute; top:4em; right:2em} #center { position:relative; overflow:hidden} #menu { position:relative; width:20%; background:#666; float:left; height:300px} #menu ul { margin:20px; margin-top:0; padding:0} #menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none} #content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px} #content h3 { margin-bottom:1em} #text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana} #text table { border-left:1px solid #CCC; border-top:1px solid #CCC} #text table caption { font-weight:bold; text-align:left} #text table th { background:#666} #text table th, #text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center} #links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px} #links ul { margin:20px; margin-top:0; padding:0} #links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none} #footer { position:relative; clear:both; background: #333; font-family: Verdana; font-size:x-large; font-weight:bold; color:#FFF; padding:20px }

CSS Layout의 경우 HTML 파일의 용량은 50% 이상 절감됩니다. CSS파일의 용량은 약 70% 정도 증가하였지만 CSS파일은 웹 사이트 접속시 딱 한번 로드되고 로컬 PC의 캐시메모리에서 재활용 되므로 전송량에 미치는 부하는 무시해도 좋은 수준입니다. 이 실험에서는 비록 하나의 웹 페이지를 단순 비교하였지만 웹 페이지의 수가 증가하면 증가할 수록 웹 표준 방식의 CSS Layout Code는 경제적인 효과가 배가됩니다.

사람이나 로봇(컴퓨터)이 이해하기 쉬운 구조가 됩니다.

코드가 줄어들기 때문에 개발자들이 코드보기가 수월해 진다는 것은 쉽게 추측할 수 있습니다. 즉, 삽질을 줄여주죠. 하지만 그런 점은 겨우 부가적인 이점에 불과합니다. 웹 표준 방식의 HTML 코드는 모바일 장치를 포함한 어떤 종류의 웹 브라우저 장치에서 출력 되더라도 그것을 이해할 수 있는 수준으로 렌더링 됩니다. 또한 검색엔진으로부터 높은 점수를 받습니다. 특히 Title 태그와 h1~h6 등의 제목태그 및 alt 텍스트를 사용할 때 그렇습니다. 검색엔진의 접근성이 높아져서 피검색 될 확률이 높아집니다.

유지보수가 쉬워지고 유지보수 비용을 절감시켜 줍니다.

웹 사이트의 디자인만 개편한다고 가정할 때 Table 기반으로 Layout된 페이지들은 Layout을 변경하기 위하여 수천 페이지의 HTML 문서를 모두 열어서 수정해야 하는 고통이 따릅니다. 하지만 CSS 기반으로 Layout된 웹사이트는 HTML 파일은 열어볼 필요조차 없어집니다. 불과 몇개의 CSS파일을 수정하는 것으로 매우 간단하게 수천개의 웹 페이지 디자인을 개편할 수 있습니다. 표현요소를 CSS로 완벽하게 분리했다면 HTML파일을 수정해야 하는 상황은 오직 데이터가 업데이트 될 때 뿐입니다.

웹 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다.

웹은 태어날 때부터 보편성을 전제하였습니다. 즉, 웹 표준만 지키면 누구나 접근할 수 있도록 이미 그렇게 설계 되어 있다는 의미 입니다. 가장 짧은 시간에 접근성을 크게 증진시킬 수 있는 방법으로서 image 요소에 대한 alt 텍스트를 강조하고 있는데 이것은 WCAG 지침이기 이전에 XHTML 표준 문법입니다. 실제로 WCAG 지침은 XHTML의 표준 문법 가운데 접근성 이슈만 추려내 놓고 그것을 지키라고 말하는 문장이 많습니다.

새로운 직업군 웹 퍼블리셔

(좌충우돌) — Tue, 03 Jun 2008 00:29:18 +0900

웹표준이라는 화두 속에서 웹퍼블리셔라는 직업군이 새롭게 등장하고 있다.
어떻게 보면 예전의 코더에서 퍼블리셔라는 것으로 진화한다고볼 수도 있겠으나, 코더 보다는 좀더 상위 개념으로 보는게 좋을것 같다는 생각을 한다.

현업에서, HTML을 XHTML로 전환하고 웹표준에 맞게 코딩하고 하는 일련의 작업을 진행하면서 느끼는 것은 어떻게 웹표준에서 말하는 구현, 동작, 표현을 분리하여 얼마나 구조적인 문서를 만드느냐, 외부 검색엔진(Google, Yahoo, ...)에 대한 대응, 접근성 향상, 크로스 브라우징등등 많은 것을 고려한다는 것은 그렇게 쉽게 다가오는 문제는 아닌것 같다.

이렇다 보니 나 스스로가 좀더 전문적인 지식을 습득해야 하거나, 전문적인 지식을 습득한 사람이 필요로 하게된다. 이런 것들이 좀더 발전하여 전문지식을 습득하고, 계획 및 통제, 관리를 할 수 있는 사람들을 웹퍼블리셔라 부르고 있다.

Sun ONE Web Server 6.1 에서의 301 Redirection 설정하기

(좌충우돌) — Sat, 24 May 2008 14:50:45 +0900

Sun ONE Web Server 6.1 의 경우 Administrator를 통해 Redirection을 설정할 수 있으나, 301이 아닌 302 코드를 클라이언트에 보내게 된다. 그래서 302코드를 301코드로 변경하여 클라이언트에 보내도록 설정해야 한다.

아래와 같이 config 디렉토리 및의 obj.conf에 코드를 삽입 후 서버를 재시작 한다.

<Object name="default">
...
...
..
<Client code="302">
Output fn="set-variable" error="301" noaction="true"
</Client>
</Object>

※ 주의: Object의 하단에 삽입한다.

위와 같이 등록한 후 NameTrans를 설정하면 클라이언트에 301 코드를 전송하게 된다.

Flash ImageGallery

(좌충우돌) — Thu, 22 May 2008 00:56:45 +0900

이번에 이미지 갤러리를 만들어 보기로 했다.

인터넷은 참 대단하다. 나처럼 플래시를 접한지 얼마 되지도 않은 사람에게도 원하는 프로그램을 할 수 있도록 도와주니 말이다.
아직은 이것 저것 많은 것을 알아가야 하지만, 또 다르게 하나 하나 알아가는 재미 또한 쏠쏠하다.

Thumbnail 이미지와 Large 이미지로 구성되는 갤러리 이다.
아직은 MovieClip 정도로 구현하였지만, 로드된 이미지 사이즈가 잘못된 겨우에도 지정된 이미지 사이즈로 표시될 수 있도록, 또한 로딩될때 로딩중 이라고 표시하는 부분을 더 보안할 점 들이다.

데모 플래시
http://www.htdocs.kr/ig/ImageGallery.html

구조와 동작의 분리

(좌충우돌) — Thu, 22 May 2008 00:52:50 +0900

웹표준에서 말하는 기본적인 철학이 구조와 동작, 표현의 분리이다.
아래 소스는 IE7, FF2에서 테스트 되었다.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Structure와 Behavor의 분리</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript">
//<![CDATA[
// window.onload 에 함수를 등록한다.
addOnLoadListener(addCountryEventListener);

/*
   * 지정된 객체의 이벤트를 등록한다.
   * 참조: Document Object Model (DOM) Level 2 Events Specification
   * http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/Overview.html
   */
function addCountryEventListener() {
var country = document.getElementById('country');
if (country.addEventListener) {
// IE가 아닌 경우
country.addEventListener("change", setCountry, false);
} else if (country.attachEvent) {
// IE의 경우
country.attachEvent("onchange", setCountry);
}
}

function setCountry(e) {
if (!e) var e = window.event;

// IE의 경우 this 오브젝트를 사용할 수 없음.
var tg = (window.event) ? e.srcElement : e.target;

// IE의 경우 option value를 생략한 경우 선택한 값이 없으나,
// FF의 경우 데이터를 가져옴.
document.getElementById('form1').selectedCountry.value = tg.options[tg.selectedIndex].value;
}
//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<dl>
<dt>Select Country</dt>
<dd>
<select name="country" id="country">
<option value="Korea">Korea</option>
<option value="France">France</option>
<option value="German">German</option>
<option value="Italy">Italy</option>
</select>
</dd>
<dt>Selected Country</dt>
<dd>
<input type="text" name="selectedCountry" id="selectedCountry" />
</dd>
</dl>
</form>
</body>
</html>

아래의 파일을 다운받으면 예저를 볼 수 있다.

xhtml.zip

본문에 CSS 정의가 존재하면?

(좌충우돌) — Thu, 22 May 2008 00:51:10 +0900

웹 페이지를 작성하다보면 BODY 내에 CSS를 정의하는 경우가 많다.
페이지를 여러개로 쪼개는 경우 이런 일이 발생할 소지가 꽤 끄다고 할 수 있다.
하지만, 브라우져의 경우 본문을 파싱하다 정의된 CSS를 만나면 처음부터 다시 파싱한다. (어라 CSS정의가 또 있네? 내가 빼먹은게 있나?)
이럴경우 페이지내의 컨텐츠가 많다면 당연 로딩속도가 느려지게 된다. 많으면 많을 수록 더욱 느려지는 건 당연지사...

아래의 예는 P 태그를 바디 안에서 다시 정의했다. 이경우 전에 나온 P 태그 또한 동일한 스타일 시트가 적용되는 것을 볼 수 있다.

RHL9에 Weblogic 8.1 설치

(좌충우돌) — Thu, 22 May 2008 00:46:45 +0900

개발서버를 만들기 위해 Weblogic을 설치.
RHL9는 RedHat에서 제공하는 최신 Kernel로 Update 하였음.

root 계정 작업

1. JDK 1.4 설치 - java.sun.com 에서 다운로드
Java 2 SDK, Standard Edition, 1,4,1(JDK141_03) 이상.

2. JAVA_HOME, CLASSPATH 및 PATH 설정

3. weblogic 계정 추가
useradd -g appls -d /home/weblogic weblogic

weblogic 계정 작업

1. WebLogic Download (server815_linux32.bin)
   http://commerce.bea.com/index.jsp 에서 WebLogic Server 8.1을 선택한다.
   WebLogic Server Package Installer에서 Red Hat Enterprise Linux(Pentium)을 선택한나.
   - 자신의 Linux box가 다른 CPU를 사용한다면, 해당 CPU에 맞는 버전을 다운로드 한다.

2. 실행 모드 추가
   chmod a+x ./server815_linux32.bin

3. WebLogic 설치.
   설치 모드는 3개를 지원한다.

   a. Graphical mode
   b. Console mode - 여기서는 Console mode로 설치한다.
   c. Silent mode

./server815_linux32.bin -mode=console -log=./platform_install.log

※ 설치 디렉토리 : /usr/local/weblogic
설치가 끝나면 /usr/local/weblogic/bea 밑으로 프로그램이 설치 된다.
설치 후 도메인 생성은 /usr/local/domains 에 설치한다.

root 으로 /usr/local/weblogic 디렉토리를 생성한 후 weblogic 계정으로 권한 및 그룹을 설정한다.

※ 참고 : http://edocs.bea.com/platform/docs81/install/console.html#1044760