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)의 차이로 삽질의 시간을 보낸 과거가 생각납니다.
스크립트가 발전하고 브라우져가 발전하면서 위와 같은 좋은 애드온 프로그램이 개발되어서 웹개발시 좀더 편안한 환경을 제공하고 있습니다.