Ssemi Laboratory

Written by Ssemi™(semin Seol), www.Ssemi.net


일단 참 오랜만에(?) 블로깅입니다.
다시 일 관련(?) 블로그에 손을 대기로 마음 먹은 것은 다름이 아니라 최근 ASP.NET MVC 2 Framework로 신개념 온라인 상담 전문 고객센터 커뮤니티인 HELPst.com를 만들었기 때문이랄까요? 차근차근 ASP.NET MVC Framework에 대한 이야기를 나누도록 하고, 우선은 작업에 필요하다 보니까 쓰게되는 내용을 가지고 일단 썰을 풀고자 합니다.

일단 이번에 해볼 작업은 트위터 아시죠? 트위터!! 네 저도 트위터 계정이 있습니다. @ssemi
뭐 다들 트위터니 페이스북이니 미투데이니하는 SNS 하나 정도는 가지고 있자나요?? 개발자라면 여기서 또 API라고 하는 내용을 아시리라 믿습니다. 모르신다구요? API가 무슨 약자게요?? 응용프로그램 인터페이스 (API, Application Program Interface)라고 하는데, 사실 이건 뭐 처음 시스템 프로그래밍상에 있던 내용들이었고, 그 내용이 웹으로 오면서 약간 다른 의미로 쓰이긴 했어요. 

뭐 어쨋든 해당 사이트에 API가 제공된다면 어떤 개발자라도 해당 사이트에서 정보를 쉽게 가져오거나, 변경할 수 있다! 이겁니다.
앞에서부터 잡설이 기네요.

트위터랑 연동하고 싶은데 어떻게 해야 하는걸까? 고민하시는 분들. 일단 차근차근 step 1을 밟아나가시는 겁니다.
API가 뭔소리인지도 모르겠고, 인증은 어떻게 하는거며, 개발은 또 어떻게 해야 하는거야? 라고 생각하시는 분들을 위한 가장 좋은 예제가 될 수 있었으면 좋겠습니다.

Twitter Search API

이 포스팅은 MVC를 기초를 안다는 가정하에 작성되어 있습니다. 
ASP.NET MVC 2 + .NET Framework 3.5 + Visual Studio 2008로 작업했습니다.
Default로 제공되는 템플릿 ASP.NET MVC2 Web Application 템플릿을 생성해서 만든 내용입니다.

이번 내용은 간단하게 ASP.NET MVC로 트위터와 통신하고, 뿌려주는 식의 작업을 할 것이에요.
비인증 API를 사용하기 때문에 전혀 불편 없이 쓸 수 있어요. 

비인증 API가 뭐냐고요? 쉽게 말해서 트위터에 로그인 안하고, 그냥 가져다가 쓸 수 있다는거죠.
트위터 개발자 센터에 가면 API관련 레퍼런스를 볼 수 있는데, 어떤 문서들에는 Requires Authentication  - false 가 있는걸 볼 수 있습니다. 이런 속성이 들어있는 녀석들이 비인증이라는 것이죠. 물론 비인증에는 Rate Limited 즉 요청(Request)에 대한 제한(Limit)이 있죠.  뭐 그래도 어때요. 만들면 장땡이지. 후후후 s(-_-)z

여기서는 비인증 API인 search를 가지고 만들어 보겠습니다.
보통 트위터에서 검색을 하고자 할 때 쓰는 페이지인 이곳에서는 일반적인 텍스트(text), 트렌드(trend), 아이디(@twitterID), 해쉬태그(#hash) 등등을 모두 검색하는 곳입니다. 이곳의 결과를 자신의 페이지에다가 보이도록 해보겠습니다.

우선 내용은 간단하게 아래와 같습니다.
Controller 에서 Search API의 내용을 atom 포맷으로 가져와서 그 내용을 Linq로 Model에 넣어줍니다. View는 Model을 보여주는 일 밖에 없구요.






일단 아래 소스를 붙여보세요.

/Models/AccountModels.cs
public class TwitterViewData { public string AuthorName { get; set; } public string AuthorUri { get; set; } public string Content { get; set; } public string Updated { get; set; } public string Link { get; set; } }
/Controllers/HomeController.cs   - ActionResult Index() { // 안에다가... }
var request = WebRequest.Create("http://search.twitter.com/search.atom?q=helpst&rpp=5") as HttpWebRequest; var twitterViewData = new List<TwitterViewData>(); if (request != null) { using (var response = request.GetResponse() as HttpWebResponse) { using (var reader = new StreamReader(response.GetResponseStream())) { var document = XDocument.Parse(reader.ReadToEnd()); XNamespace xmlns = "http://www.w3.org/2005/Atom"; twitterViewData = (from entry in document.Descendants(xmlns + "entry") select new TwitterViewData { Content = entry.Element(xmlns + "content").Value, Updated = entry.Element(xmlns + "updated").Value, AuthorName = entry.Element(xmlns + "author").Element(xmlns + "name").Value, AuthorUri = entry.Element(xmlns + "author").Element(xmlns + "uri").Value, Link = (from o in entry.Descendants(xmlns + "link") where o.Attribute("rel").Value == "image" select new { Val = o.Attribute("href").Value }).First().Val }).ToList(); } } } ViewData["twitter"] = twitterViewData;
/Views/Home/Index.aspx
<% var model = ViewData["twitter"] as List<TwitterViewData>; foreach (var item in model) { %>; <A href="<%= item.AuthorUri %>" target="_blank"><%= item.AuthorName %></A> <P><%= item.Content %></P> <IMG alt="Twitter Logo" src="<%= item.Link %>" /><br /> <br /> <% } %>
결과 화면 

이처럼 간단하게 인증 없이 트위터 검색 결과를 자신의 홈페이지에 뿌려줄 수 있습니다.

View 페이지에서는  단지 foreach로 화면에 출력만 할 뿐입니다. 수정하여 자신의 취향에 맞게 보여줄 수 있겠죠?
Model 페이지에서는 제공된 정보를 알맞게 가공하여 쓸 수 있도록 개체 클래스를 하나 생성하여 사용하였습니다.
가장 중요한 Controller 페이지에서는 왼쪽에서 보시다싶이 WebRequest로 http://search.twitter.com/search.atom 타입의 URI를 GET으로 요청하였습니다. 그 결과가 atom 타입으로 반환되었고, Controller에서는 그 결과를 Model에 가공된 데이터로 집어 넣었습니다.
트위터의 비인증 API를 사용하면 자신의 글을 이렇게 쉽게 나타낼 수 있습니다.

한번 해보세요. 뭐야? 이렇게 쉬운 것이었어? 라고 놀라실 수도 있습니다. ^^

See the table below for the differences.

IE Supported Code	Firefox Supported Code
Creating XML DOM object	Creating XML DOM object
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");	xmlDoc  = document.implementation.createDocument("","doc",null);
Make sure before loading the XML file you use the following lines of code	It is the same for Firefox
xmlDoc.async = false;xmlDoc.preserveWhiteSpace=true;	xmlDoc.async = false;xmlDoc.preserveWhiteSpace=true;
Loading an XML file	Loading an XML file
xmlDoc .load("XML Path");	xmlDoc.onload=function (){};xmlDoc .load("XML Path");
	Here Firefox does not support loading of XML directly. So we should use a dummy function and then load XML.
Selecting Single Node in an XML with conditions	Selecting Single Node in an XML
xmlNode=xmlDoc.selectSingleNode("//Path[@Attribute='condition']/remaining path");	selectSingleNode is not supported in Firefox. We can use XML Path to do our job as given below.
	function SelectSingleNode(xmlDoc, elementPath){   if (document.implementation && document.implementation.createDocument)      {         var nodes=document.evaluate(elementPath, xmlDoc, null, XPathResult.ANY_TYPE, null);var results=nodes.iterateNext();return results;       }    }
	To the above function we need to pass XML and the Element path like "//Path[@Attribute='condition']/remaining path" and access it as below
	xmlNode=SelectSingleNode(xmlDoc ,"//Path[@Attribute='condition']/remaining path");
For getting value of particular Attribute	For getting value of particular Attribute
xmlNode.getAttribute("Attribute Name");	Here we can use the code given below
	xmlNode.attributes["Attribute Name"].value;
To access the Text of the Single Node selected	To access the Text of the Single Node selected
xmlNode.text;	xmlNode.childNodes[0].nodeValue;
Selecting Nodes list based on condition	Selecting Nodes list based on condition
xmlNodes= xmlDoc.selectNodes(“Node name Path [@attribute=’condition’]”) For ex: var xmlNodes = xmlDoc.selectNodes("//xNode[@xid='test']");	xmlNodes=xmlDoc.getElementsByTagName[“Node name Path”];For ex: var xmlNodes = xmlDoc.getElementsByTagName[“xNode”];
Iterating through the Nodes List and selecting value of a particular Attribute	Iterating through the Nodes List and selecting value of a particular Attribute
for(var n=0;  n< xmlNodes.length; n++){var xid= xmlNodes (n).getAttribute("xid");} xmlNodes contains only the Nodes which has the Attribute xid and which has value ‘test’. If the Attribute value = ‘test’, then we are iterating through that Nodes only and retrieving the value of xid.	Here xmlNodes  contains all the list of Nodes which are having the Node Name “xNode”. for(var n=0;  n< xmlNodes.length; n++){  // For getting all the Attributes of the Node selected var getXmlAttributes = xmlDoc.getElementsByTagName("Node name ")[n].attributes; // For selecting Attribute value based on condition, we should first get the Attributes List which contains the Attribute we need as below. var selectXmlAttribute = getXmlAttributes.getNamedItem("xid").value; // For retrieving the value of the Attribute based on Condition. if (selectXmlAttribute =="test") {   var xid= getXmlAttributes.getNamedItem("xid").value;}
IE supports both () and [] braces while using document object	Firefox supports only [] braces while using document object.
Ex: document.forms(0); or document.forms[0];	Ex: or document.forms[0];
Use document.getElementById[“”] instead of document.all – Both are supported in IE  document.all is IE specific
In script tag never forget to mention type=”text/javascript”, as now a days all browsers implicitly know and support Java Script	For ex: <script language =”javascript” type = ”text/javascript”></script>
Don’t close the script tag like <script language =”javascript” type = ”text/javascript”/> as some browsers like IE loads the first script, and then continues to look for a closing </script> tag.	Use:<script language =”javascript” type = ”text/javascript”></script>

I followed the above standards of Browser and solved it..

Written by Ssemi™(semin Seol), www.Ssemi.net

Javascript가 발전함에 따라 그에 따라 개발도 많이 발전하게 되었어요. 하지만 개발에 따른 유지보수를 위해 디버깅이 필요하기 마련입니다. 예전부터 인터넷 익스플로러(IE)에서는 자바스크립트는 디버깅이 어려웠어요. 자세한 설명도 없이 줄과 문자 그리고 오류 밖에는 나타내주는 내용이 없어요. 아래 그림과 같이요.


그런데 요즘에는 많은 개발을 도와주는 애드온(Add-on)이나 써드파티프로그램(Third-Party Program)들과 디버깅을 쉽게 해주는 툴(Tool)들이 많이 있죠. 지금 소개하는 것도 사실은 아주 오래전부터 있었지만, 잘 사용안하고, 어떻게 사용할지도 잘 모르는 그런 프로그램이죠.

그래서 이참에 정리를 해보려고 합니다.

▶ Internet Explorer (IE) - 인터넷 익스플로러

인터넷 익스플로러는 가장 유명한 - 그러나 가장 쓸모 없을 수 있는 - Windows Script Debugger를 제공합니다.
MS에서는 Windows Script Debugger를 제공함으로서 IE의 스크립트 디버깅을 도와주고 있답니다.

메뉴 > 도구 > 옵션 > 인터넷 옵션 > 고급 > 탐색 으로 이동하셔서
스크립트 디버깅 사용 안함(다른응용프로그램)
스크립트 디버깅 사용 안함(Internet Explorer)
두가지를 모두 사용 해재 하시고 확인을 누르세요

 ★ Windows Script Debugger 설치하러 가기 Click!! ★ 

설치 후에는 디버깅이 필요한 페이지라면 아래와 같은 화면이 나오면서 디버거가 실행됩니다.

어떤 소스에서 에러난지 확인 후에 수정을 하실 수 있습니다. 보통 브라우저에서 부르게 되면 읽기전용으로 읽어지기 때문에, 어디서 에러가 나는지 확인을 한 후, 편집툴을 통해 에러를 수정하는 편이 편리합니다.

사실 인터넷 익스플로러는 Visual Studio(이하 VS)가 나온 이후부터는 VS로 디버깅의 기능을 대신하기 때문에 VS를 쓴다면 위 소개한 디버거 프로그램을 설치할 필요는 없습니다. 스크립트 디버거 보다 VS의 무겁지만 막강한 기능의 디버깅을 통해 보다 더 쉽게 디버깅을 할 수가 있는 것이죠. 사실 VS를 설치하지 않으면서 IE의 디버깅을 원할 때는 위 소개한 프로그램이 나름 유용하게 사용될 수 있는 것이지요.

★ IE용 콘솔 디버깅 - Companion.JS

파이어폭스 플러그인 Firebug의 콘솔 API와 비슷한 IE용 디버깅 도구인 Companion.JS가 있습니다. IE의 플러그인 형태로 설치되며, 도구에 추가된 아이콘을 클릭하여 페널을 열 수 있습니다. 이제 IE에서도 콘솔 API가 도입된 편리한 자바스크립트 디버깅을 구사할 수 있겠습니다.

해당 플러그인은 Windows Script Debugger를 설치한 후에 사용하셔야 에러를 내지 않고 기능을 발휘합니다.

▶ FireFox (FF) - 불여우

FireFox(불여우)는 각종 Extension을 통해 자바스크립트 디버깅이 가능하답니다. 그중에 가장 유명한 것은 FireBug 입니다. 파이어버그는 파이어폭스의 플러그인 형태로 설치할 수 있는 애드온 애플리케이션입니다.

정말 감히 최고라고 칭하는 디버깅 도구입니다.
익스플로러에서 자바스크립트 에러가 났을 경우에 파이어폭스를 시작한 후, Firebug를 통해 에러를 파악해서 수정한 후에  인터넷 익스플로러로 다시 보는 그런 서슴없는(?) 짓도 진행할만큼 정말 멋진 툴이라고 밖에는 설명할 수 없네요.

★ Firebug 설치하러 가기

예전에 자바스크립트 디버그는 참 어렵다고 느껴졌었고, 대소문자의 차이, 세미콜론 빼먹기, 작은 따옴표(sing quot)와 큰 따옴표(double quot)의 차이로 삽질의 시간을 보낸 과거가 생각납니다.
스크립트가 발전하고 브라우져가 발전하면서 위와 같은 좋은 애드온 프로그램이 개발되어서 웹개발시 좀더 편안한 환경을 제공하고 있습니다.

Written by Ssemi™(semin Seol), www.Ssemi.net

오랜만에 글을 쓰는 것 같습니다. 물론 몇가지 개발한 결과물이 있는데, 차마 이곳에 올리기가 부끄럽기에(!) 조용히 묻어두고 있습니다만 언젠가는 이 곳에 올라오겠지요.
오래간만에 ASP작업을 했습니다.

ASP를 사용해서 페이지를 엑셀 파일로 받고자 할 때, 아래 두 줄의 소스 코드를 통해서 엑셀로 변환을 시킵니다.
페이지 헤더(Header)에 아래 소스 코드를 삽입 시켜서 엑셀파일로 attach 받는 내용이죠.

Response.ContentType = "application/vnd.ms-excel"
Response.AddHeader "Content-Disposition", "attachment; filename=파일이름.xls"

일반적으로 엑셀로 받고자 하는 내용들은 보통 리스팅(Listing)된 출력 자료들이 대부분입니다.
모두 『표 형식』을 기준으로 리스트를 뿌려주게 됩니다.
표 라는 것은 HTML 에서 TABLE 태그를 통해 이뤄집니다.

일반적으로 리스팅을 위한 코드의 구성은
SQL 쿼리 -> 결과값 레코드셋으로 변환 -> 테이블안에 출력의 순서가 됩니다.

여기서 엑셀 출력을 위해서 기존 파일에 위의 두줄의 코드만 추가해도 되겠지만, 좀 더 광범위하게 쓸 수 있도록 엑셀 출력 파일을 만들고자 한번 만들어봤습니다.
여러개의 엑셀 출력을 할 때 이 소스는 큰 도움이 될 것이라고 생각합니다.

중요 포인트는 두곳입니다.

# 테이블 칼럼 타이틀은 배열을 통해 나타냅니다.
# 레코드셋의 칼럼의 갯수 만큼 나타냅니다.

2가지를 특징을 통해 이 코드는 어디에다가 써도 유동적이게 돌아간다는 것입니다.

<%
' Array 인자와 SELECT 순서가 같아야 함
Dim arrMenuName
arrMenuName = Array("아이디", "이름", "주소", "전화번호", "혈액형")
strSQL = "SELECT 아이디, 이름, 주소, 전화번호, 혈액형 FROM 테이블"
SEToRs = oCn.Execute(strSQL,,1)
%>
<html>
<head>
<title>엑셀출력</title>
<metahttp-equiv="content-type" content="text/html; charset=euc-kr" />
</head>

<body>
<table width="100%" border="1" cellspcaing="0" cellpadding="0">
<tr>
<%
' TH 로 bold 와 center를 한번에~
IF isArray(arrMenuName) Then
For i = 0 to UBound(arrMenuName)
    Response.Write "<th style=""background:#EEEEEE"">"& arrMenuName(i) & "</th>" & vbCrLF
Next
End IF
%>
</tr>     
<tr align="center">
<%
    SET oRs = oCn.Execute(strSQL,,1)
    IF oRs.State = 1 Then
        IF Not oRs.EOF Then
            Do While Not oRs.EOF 
%>
<tr align="center">
<% For i = 0 to oRs.Fields.Count - 1 ' Recordset Column Count 만큼 TD 생성!!%>
<td><%= oRs(i)%></td>
<% Next %>
</tr>
<%
                oRs.MoveNext
            Loop
        End IF
        oRs.Close : SET oRs= Nothing
    End IF
%>
</tr>
</table>
</body>
</html>
<%
    IF oCn.State = 1 then 
        oCn.Close 
        SET oCn = Nothing
    End IF
%>

oCn, oRs는 각자 알맞는 개체명을 사용하도록 하세요.

써 넣고 보니까, 엑셀 작업과 관련되었다기 보다는 HTML의 표(TABLE)에 들어갈 데이터 생성에 도움을 준 것 같군요.

Written by Ssemi™(semin Seol), www.Ssemi.net

이 프로그램은 아래의 링크에서 아이디어를 얻었습니다
프로그램의 본래 목적은 불여우 부가기능(Firefox Extension)과 자신의 서버로 올리는 특징 입니다.

Upload to my Server - Firefox Extension
▶ 웹 상의 이미지를 브라우져를 통해 자신의 서버에 쉽게 올릴 수 있게 도와주는 프로그램

▶ 다운로드(Download)

▶ 인스톨(Install)

◎ 자신의 서버 세팅
알릭님의 소스파일을 다운로드 후 아래와 같이 변경합니다.

17번째 줄의 패턴변수를  21번째 줄 처럼 변경해주시기 바랍니다. 

getImage.php를 함께 첨부 하여  자신의 서버의 적당한 곳에 놓습니다.
자신이 올린 곳의 주소를 기억하셨다가 아래 경로를 수정합니다. (IE)

◎ 인터넷 익스플로러 aka IE (Internet Explorer)
압축파일을 다운로드 후, 압축을 해제 하면
browser 폴더 아래에 IE 폴더 안의 ie-install.bat 배치 파일을 실행합니다.



◎ 파이어폭스 aka 불여우 (FireFox)
Firefox Extensions 불여우 부가기능을 설치 합니다.
동봉된 uptome.xpi를 불여우에 설치 합니다.

◆ 인스톨 후에는 브라우져를 모두 종료하신 후 재시작 시켜주십시오. ◆

▶ 사용법(How to use)

브라우져를 통해 웹서핑 중에 그림 파일에 마우스 오른쪽 버튼을 클릭하면
[그림 - 내 서버로 보내기] 메뉴가 있는 것을 발견하실 수 있습니다.

▶ 당부사항

자신의 서버로 올린 파일을 정확하게 알 수 있게 갤러리 소스를 활용하시면 좀 더 멋지게 파일들을 관리 하실 수 있으실 것입니다.
좀 더 보완하거나 더 좋은 아이디어가 있으신 분들은 언제든지 컨택해주세요!

Written by Ssemi™(semin Seol), www.Ssemi.net

예전에 미니위니에서 무화님의 『자신의 게시판에 새 글이 올라오면 알려주는...』 이라는 게시물로 프로그램 하나가 올라온 적이 있습니다.

당시에는 오우!! 괜찮다!!! 라고 생각해서 써먹어봤는데, 좀 애로사항이 꽃피더군요. 가장 큰 문제는 역시 ASP로의 변환 문제였었죠. check.php 안에서 해결해볼려니 여간 어려운게 아니더라구요. Source Code가 있는게 아니니까요~

그래서 직접 만들어봤습니다. 사실 필요에 의해서 만들게 되었어요. 고객의 요구랄까요? 제가 있는 곳에서 정말로 필요한 프로그램이었거든요.
사실 웹 프로그래밍은 어느정도 하겠는데, 시스템 프로그래밍은 경험이 없어서 꽤나 고전했습니다. 거의 소스도 악전고투 후의 느낌이네요. ^^;
간신히 asp, php에 돌아가게 만들고, JSP는 음.. asp랑 php만 보면 형식은 같으니 하나 그대로 만들어 쓰시면 되겠네요;; (나몰라라 배째모드) 

이 프로그램은 무화님의 프로그램을 좀 더 업데이트 정도 라고 생각하시면 될것 같아요. 거의 모방 수준이죠. 하핫 그래도 모방은...창조의 어머니(??) 일까요? ^^;


Tell me the Article!!! - with C#.NET
▶ 자신의 게시판에 새 글이 올라오면 알려주는 알리미 프로그램

▶ 다운로드(Download)

프로그램 파일 및 setup 파일, music 파일, check 파일 및 설명서가 함께 동봉되어져 있습니다.

▶ 미리보기(Preview)

서버에서 파일이 바뀌거나 하게 되면 [그림1] 과 같이 알려주는 프로그램입니다.
DB에 직접 요청을 해서 알려주는게 아니라, 파일을 이용해서 하기 때문에 asp나 php가 돌아가는 계정이면 됩니다.
타이머를 이용해서 계속 확인하는 방법입니다.

프로그램을 실행 하게 된 후 오른쪽 트레이에 그림과 같은 아이콘이 하나 생기게 됩니다.

▶ 사용법(How to use)

# 파일 다운로드 후 적당한 곳에 압축을 풉니다.
총 4개의 파일이 필요합니다. (*필수 파일)

# Check 파일 설정
일단 각 플랫폼에 맞는 Check파일을 선택하신 후, 서버로 파일을 올려줍니다.
파일은 퍼미션을 777로 바꿔줍니다. Windows 서버라면 IUSER_Machine 사용자에게 수정권한을 줘야 합니다.

해당 파일을 문서 편집기로 열어보면, 아래쪽에 현재 파일을 업데이트 할 수 있는 코드가 있습니다. 해당 코드를 가지고 글이 등록되거나 하는 부분에 추가합니다.

제로보드(php)를 예를 들자면
 1. check.php를 data 폴더에 복사
 2. write_ok.php 64번째 줄쯤에 touch(경로/check.php); 추가
하시면 됩니다.

asp를 예로 들자면
 1. check.asp를 복사
 2. insert into 쿼리가 실행되는 부분 다음에 Call CheckFileUpdate 프로시져 실행
(프로시져는 check.asp 안에 들어있음)

# Setup 파일을 설정합니다.
60
2
http://www.ssemi.net/check.php
http://www.ssemi.net
IE

1 : 서버에 접근하는 시간 (단위 : 초[second]) - 60초가 기본으로 1분당 1번씩 확인함
2 : 몇 분까지 알려줌 / 단위 : 분[Minute]  - Default 2분으로...
     새 게시물이 올라왔으면 2분(설정값)이내에 서버 접근을 시도(1번째 값) 하게 되면 알려주게 됩니다.
     본디 이 프로그램은 게시물을 봤는지, 안봤는지 확인 할 수 있는 신호가 없기 때문에 (DB에 직접 접근하지 않음)
     게시물이 올라왔을 시에는 주구장창!! 알려주게 됨을 방지하고자 시간을 설정해 둠
3 : 서버에 접근하는 주소의 경로 (check 파일이 있는 경로)
4 : 더블클릭시에 이동하고자 하는 주소  (게시판 주소 등등)
5 : 브라우져 설정 - 선택 값 (2종류) : IE, FF | 기본 : IE (인터넷 익스플로러)

# 트레이 아이콘 사용 방법
* 왼쪽 마우스 : [그림2]처럼 서버 시간을 알려줍니다.
* 더블 클릭 : setup에 넣은 주소로 브라우져 이동합니다
* 오른쪽 마우스 : 종료

▶ 필수조건(Important)

C#.NET으로 만들어서  .NET Framework 2.0 이 꼭 필요합니다.

▶ 당부사항

딱 적당히 만들었습니다;; 아이디어 있으시면 받겠습니다.
작년에 만들어 놓은 것을 좀 더 보기좋게 손 본 이후 버젼 업시킨후 공개합니다 ^-^)//

Written by Ssemi™(semin Seol), www.Ssemi.net

우리나라 실상에서 생각해 보자면, 개발자들은 자신이 하는 일이 멀티플레이어라고 생각할 때가 많습니다. 간단한 코딩일 부터 시작해서, 개발일 뿐만 아니라, 서버 관리 심지어는 디자인 까지도 개발자 한명이 모두 도맡아서 해야 할 경우가 많습니다.

이 이야기를 하는 저 또한 같은 심정으로 여러 일을 해보았는데, 그 중에 서버 관리를 하게 되었을 때 가장 지겨운 과정들이 몇몇 존재합니다.

바로 서버 세팅!!!! 그 지겨운 사이트 하나 세팅하는 과정이죠.
UNIX계열은 Shell Script 하나 짜서 실행시키면 여러 권한문제, 사이트 수정 부분 등등을 그런대로 편하게 진행할 수가 있는 반면에 IIS 서버는 윈도우 기반이어서인지는 몰라도 마우스로 클릭 클릭 하면 사이트 세팅이 쉽게 마무리 된다고는 하지만, 그 일도 몇 십번 해보면 지겹다는 것을 알게 되죠.

자아~ 거두절미 하고 이 프로그램(Script)은 바로 IIS 서버의 Log를 자동으로 Backup 해주는 스크립트입니다.
간단한 내용 설명과 함께 프로그램의 설명을 해드리겠습니다.

Windows IIS Log Backup Script

▶ 다운로드(Download)

VBScript 파일인 iisLogBackup.vbs 와 압축 프로그램 7-zip command line version이 함께 동봉되어져 있습니다.

▶ 정보 및 사용법

로그 파일을 압축 백업 한 뒤에 설정한 폴더로 옮기고, 설정에 따라 압축한 로그 파일들을 자동 삭제해주고 완료 되었다는 메일을 보내는 스크립트 입니다. 각각의 프로세스 안에는 리포팅을 할 수 있도록 만들어졌습니다

서버의 로그 설정 - day , week, month , force(강제) 과
압축할 타입 설정 - 일일, 주간, 월간, 강제 을 동시에 진행하여
가장 적합한 로그 파일 압축 생성과 불필요한 하드 공간을 차지하고 있는 로그 파일을 자동으로 지워줌으로서 서버 관리에 용의점을 살리고 있습니다.

※ 7-zip 정보
7zip - http://www.7-zip.org/
7zip 버젼은 4.42 입니다
◎ freeware


* CScript 가 실행 안될 때
Windows Script Host Version 5.6 을 Download 받습니다.

▶ 미리보기(Preview)

스크린샷 준비!!

▶ 당부사항

임의로 스크립트를 손봤다가 에러가 발생 했을시에는 책임이 없습니다.
주석(comment)에도 달아두었지만, 수정하실 수 있는 능력이 있으신 분들은 수정하셔서 더 좋게 사용하셔도 무방합니다 :)
좀 더 좋은 아이디어 있으신 분들 Contact 해주세요!!! 반영해드리겠습니다.

개발일을 하다보면 갑자기 쓰려고 하는 명령어가 생각이 안나는 경우가 많다. 나도 사람인지라 그런일은 비일비재 하다.

http://www.gotapi.com - quick developer reference for CSS, HTML, JavaScript, PHP, AJAX, SQL and more

GotAPI.com에서는 CSS, HTML, Javascript, PHP, AJAX, SQL , 기타 등등의 개발자 레퍼런스를 빠르게 찾아준다.
파이어폭스(이하 FF)에서도 Extension Tool로 해당 레퍼런스를 쉽게 알아봐주는 기능이 있는걸로 알고 있는데,
솔직히 나같은 경우는 습관적으로 IE를 위주로 쓰다 보니 그런 기능을 이용할 수가 없다.
이 사이트의 발견은 개발의 편리함을 더해주고 있다.

초기 사이트르 만들때부터 웹쪽에 더 관심을 집중한 케이스라 그런지, 웹쪽 API는 확실하고,
추가적으로 개발쪽 API를 만들어나가고 있는 중인 사이트이다.
추가되면 추가될수록 방대한 DB에 쌓이는 API들의 종류에 놀랄 뿐이라는 것.

앞으로 레퍼런스 책 따위는 살 필요가 없을 정도로 멋진 사이트가 되어가고 있음에 엄지손가락을 착! -_-)b 해드린다.

약간은 늦게 소개시켜드리는감이 있지만, 최근(이라고 말하고 약 한달전) 아주 쓸모있게 사용하고 있는 Library가 생겼어요. ^-^v

Prototype Window Class 라는 Javascript Library입니다.

자바스크립트를 통해서 페이지 안에 윈도우를 생성하는 클래스 라이브러리입니다.

몇가지 특징을 살펴보면, 우선 가장 중요한 사항으로 브라우져에 영향을 받지 않습니다. - 크로스 브라우징이라는 것이죠.
또한 페이지 안에서 다른 URL을 불러낼 수 있습니다. 마치 IFRAME 처럼 말이죠.
그것 뿐만 아니라 창 자체를 스킨(Skinnable)화 해버려서 CSS를 수정함으로서 멋진 스킨을 만들 수 있죠.
어휴 개발자가 정말 멋진 기술을 가지고 있는지 Debug 자체를 확장해서 모듈화 해버리는 바람에 코드 자체를 수정하면서도 필요한 기능을 적당히 수정할 수 있게 만들 수 있어요.

어휴~ 뭔소린지 이해가 안되요~ 라고 말씀하시는 사람들에게는 딱 이말만 전해드리겠습니다. 이것은 제가 생각하는 가장 큰 특징입니다.
쉽게 생각해서 IE에서만 지원되던, 모달리스 창을 Prototype Window Class를 통해서 쉽게 크로스 브라우징되는 모달리스 창으로 만들 수 있다는 것이죠.

위의 내용만이 전부가 아닌것은 당연히 알고 계시리라 생각합니다.
여러 예제를 보면서 응용할 곳을 찾아보는 재미도 쏠쏠 할 것 같아요 :)
가장 많이 쓰인다고 생각되어진 부분은, 에러 메시지를 내보낼때!(404와 같은 HTTP 에러가 아니라 프로그램에서의 에러) 좀 더 유연하고 이쁜 디자인 화면의 Window가 뜨게 되겠죠.

AJAX가 유행하면서 유명해진 Lightbox JS를 시초(?)로 background에 PNG파일을 넣어 Transparent 시켜버림으로서 배경이 아웃되고, 내용이 포커스-인 되는 방법이 유행을 하고 있는가운데 Prototype Window Class 또한 위 방법을 따르고 있습니다.

이 프로그램은 프랑스 개발자인 Sébastien Gruhier 아저씨가 만들었구요. 이 아저씨 경력이 많이 화려한 만큼, 코드도 정말 잘 짜셨더라구요. 라이브러리의 이름에서도 알 수 있다 싶이 Prototype을 기반(v1.5+)으로 하고 있고, script.aculo.us의 Visual Effect를 사용하고있어요.

제가 이렇게 설명하는 것보다는 여러분들이 직접 사이트에 가보셔서 놀라셔야 할 것 같아요.
소스코드는 해당 사이트에서 다운 받으시고, 예제들을 감상하세요. 감탄입니다!

아래는 제 블로그 www.ssemi.net에 적용한 Prototype Window Class의 화면입니다.

홈페이지에 있어서 메뉴는 과거에서 현재까지 레이아웃을 구성하는데 있어서 가장 기본적으로 생각해야 할 사항입니다.
요즘 웹표준 추세에 맞추어서 CSS의 중요성이 자리잡아가면서 기존에 단순 텍스트로는 안이쁜 메뉴들을 이미지로 만들어서 사용하는 것을 벗어나 메뉴들이 텍스트(Text)를 사용하되 CSS를 입혀서 이쁜 메뉴를 만들 수 있게 되었습니다.

간단하게 CSS의 기본기능만 가지고 메뉴를 만들 수 있지만, 약간의 이미지로 예쁜 메뉴를 만들 수 있습니다.
간단히 소개하는 CSS Tab Designer (Freeware) 는 CSS로 만들 수 있는 메뉴들의 표본(샘플)을 제공합니다.



위와 같이 CSS를 사용하여 이미지로 만든 메뉴가 부럽지 않게 이쁜 메뉴들을 만들어 낼 수 있습니다.

기본적으로 CSS메뉴는 UL(OL), LI 태그를 사용하여 메뉴를 구성하게 됩니다.
이 때, 텍스트로 만들어진 메뉴이기에 강조(Highlight)의 의미를 두기 위해 현재 메뉴에다가는 특별한 처리 - Bold, Coloring, Boxing, etc -를 해주게 됩니다.
이 때 이 특별한 처리를 쉽게 도와주는 것은 CSS의 Class Selector의 사용입니다.

하나의 예제를 보겠습니다.

▶ 예제 실행

위의 예제에서는 active라는 Class Selector 를 하나 사용함으로서 현재 위치를 알려주고 있습니다.
강조(Highlight)는 어려운 것이 아니었습니다.

#navPyra {

    margin: 0;

    padding: 0 0 20px 10px;

    border-bottom: 1px solid #9FB1BC;

}



#navPyra li {

    margin: 0;

    padding: 0;

    display: inline;

    list-style-type: none;

}



#navPyra a:link, #navPyra a:visited {

    float: left;

    font-size: 10px;

    font-family:verdana,helvetica,sans-serif;

    line-height: 14px;

    font-weight: bold;

    padding: 0 12px 6px 12px;

    text-decoration: none;

    color: #708491;

}



#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {

    color: #000;

    background: url(./pyramid.gif) no-repeat bottom center;

}

<ul id="navPyra">

    <li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>

    <li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>

    <li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>

    <li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>

    <li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>

</ul>

오래전에 메뉴의 강조 문제로 서버측 스크립트를 통해서 해결한 경험이 생각납니다.
asp나 php를 통해서 GET으로 받은 변수에 따라 각각 해당 메뉴에다 출력해주는 방식은 불편하기 짝이 없지요.
새 메뉴가 생기면 또 그에 따른 변수를 하나 만들고, 그 변수명에 따라 바뀌는 IF문을 또 넣어줘야 하니까요.
하지만 이제는 그럴 필요가 없어요. 서버측 스크립트를 사용할 필요가 없어졌거든요. DOM의 활성화와 함께 많은 서버측 할 일을 클라이언트가 할 수 있게 되었거든요.

현재 위치를 알려주는 Class Selector는 DOM을 이용하여 Javascript를 통해서 해당 탭메뉴를 클릭한 후, 클릭한 메뉴를 active시켜주는 스크립트를 짜보겠습니다.

▶ 예제 실행

위의 예제에서는 active라는 Class Selector 를 Javascript를 이용하여 페이지가 변경될때마다 active Class Selector를 Anchor태그에 각각 적용하는 코드입니다.

// 현재 페이지 이름과 Anchor태그에 href 속성의 값이 일치할 때, Anchor 태그에 active Class Selector를 적용합니다.

function findLocation()

{

    // HomeUrl 변수에 자신의 도메인 혹은 IP를 적습니다. ex) http://test.ssemi.net 

    // 서버측 스크립트를 이용하여 자동으로 만들 수 있습니다. <%= HTTP_HOST() %> - 아래에 별도 표기

    var HomeUrl = 'http://test.ssemi.net';

    var sUrl = document.location.href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();



    if (document.getElementById('navPyra'))

    {

        var menu = document.getElementById('navPyra').getElementsByTagName("A");

        var s;



        for (i = 0 ; i < menu.length; i++)

        {

            s = menu[i].href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();



            if (s.length > 2)

            {

                if (sUrl.indexOf(s) == 0) menu[i].className = "active";

            }

        }

    }

}

<body onload="findLocation()">

<ul id="navPyra">

    <li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>

    <li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>

    <li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>

    <li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>

    <li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>

</ul>

</body>

Function HTTP_HOST()



    Dim tmp

    tmp = "http://" & Request.ServerVariables("SERVER_NAME") 



    IF Request.ServerVariables("SERVER_PORT") <> "80" Then

        tmp = tmp & ":" & Request.ServerVariables("SERVER_PORT")

    End IF



    HTTP_HOST = tmp



End Function

2가지의 예제를 통해서 배울 수 있는 항목은 CSS Class Selector 와 Javascript를 이용해서 각 링크에 동적인 메뉴선택 효과를 줄 수 있다는 점입니다.
설명이 미흡할 수 있으나, 예제파일에 대하여 직접 소스를 보시면 쉽게 이해하실 수 있습니다.

---

이미지 메뉴를 사용하는데 있어서 가장 많이 쓰이게 되는 효과는 바로 롤오버(Roll Over)입니다.
롤오버를 사용하기 위한 방법은 자바스크립트로 효과를 주었던 방법이 있는데, 이제는 CSS만으로도 가능합니다.
복잡한 자바스크립트 코드를 사용할 필요가 없으니 시간을 번 셈이죠.

▶ 예제 실행

위의 예제에서는 CSS만으로도 이미지 롤오버(Rollover)가 되는 것을 보여주고 있습니다.

/* CSS만으로 가능합니다 */

A.rollover img { border-width:0px; display:inline; } 

A.rollover img.over { display:none; } 



A.rollover:hover { border:0px } 

A.rollover:hover img { display:none; } 

A.rollover:hover img.over { display:inline; }

CSS Rollover에 대하여 좀 더 다양한 정보를 얻고 싶으시다면 http://pmob.co.uk/을 방문해주세요