제이쿼리(JQuery)에서는 간단하게 HTML객체의 스타일(Style)속성을 추가, 삭제가 손쉽게 가능해 정말 편한 것 같다. 이는 제이쿼리에서 제공하는 addClass함수와 removeClass함수를 이용하면 되는데, 이를 간단하게 아래예제를 통해서 알아 보도록 하자!

먼저, 실행되는 결과 모습을 보자면, 아래 그림과 같다.

 위 코드는 스크립트를 정의한 내용이다. 주석을 통해서 간단하게 설명을 달아 놨으니, 이해하는데 도움이 될것이라 생각이 든다. ".poem-stanza"는 스타일을 지정한 class명이다. 즉, ".poem-stanza"을 찾아서 addClass함수, 또는 removeClass함수를 통해 해당 "highlight"스타일로  추가/삭제하는 내용인것이다. 아래 HTML 페이지를 참고하면 이해가 쉽지 않을까 생각이 든다.

HTML

<div>  …중간 생략…   <div class="poem">             <h3 class="poem-title">                 JABBERWOCKY</h3>             <div class="poem-stanza">                 <div>                     'Twas brillig, and the slithy toves</div>                 <div>                     Did gyre and gimble in the wabe;</div>                 <div>                     All mimsy were the borogoves,</div>                 <div>                     And the mome raths outgrabe.</div>             </div>         </div>     </div>     <div style="margin:10px 0 0 0;">     <input type="button" value="스타일 적용" onclick="AddStyle();" />     <input type="button" value="스타일 삭제" onclick="RemoveStyle();" />

위 코드를 보면 버튼이 두개가 있고, 버튼을 클릭했을 때 해당 스크립트를 호출할수 있도록 되어있다. 그리고 하이라이트가 되어저야 할부분에 DIV태그로 감싸져있고, class명으로 "poem-stanza"로 선업되어 있다. 위에서도 설명했듯 버튼을 클릭하는 순간 해당 "poem-stanza"를 찾아 스타일을 추가/삭제하는 것이다.

기존에는 스타일을 적용하려면 여러가지로 귀찮게 스크립트를 짜주어야 했는데, 제이쿼리를 이용하니 간단하게 해결되어 편한것 같다.

 

정말 유용한 정보들이 많아요^^

이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!

[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)

---

ㅁ 플리커(Flickr) 인증된 사진 읽어 오기

 

 위에서 로그인 인증이 끝났다고 가정하고 내 사진을 읽어 오는 내용을 확인 해보도록 하자.

 

public class FlickrAPIHelper { // Flickr API 기본 URL private readonly string BASEURL = "http://api.flickr.com/services";       // Flickr API Key private readonly string APIKEY = "942f52t78731e43193733e57a9f3c281";       // Flickr API Password private readonly string SECRET = "7deb809rd20t748c";   // 내 포토 반환 URI를 반환합니다. public string GetMyPhoto(string token, string nsID, int currentPage, int count)     {             string temp = string.Format("{0}api_key{1}auth_token{2}extrasowner_name,date_upload,tagsmethodflickr.photos.searchpage{3}per_page{4}user_id{5}", this.SECRET, this.APIKEY, token, currentPage.ToString(), count.ToString(), nsID);             string apiSig = GetMd5String(temp);             string uri = string.Format("{0}/rest/?method=flickr.photos.search&api_key={1}&page={2}&per_page={3}&extras=owner_name,date_upload,tags&auth_token={4}&user_id={5}&api_sig={6}", this.BASEURL, this.APIKEY, currentPage.ToString(), count.ToString(), token, nsID, apiSig);             return uri;     } private string GetMd5String(string value) {             return MD5.GetMd5String(value); } }

[코드 5] FlickrAPIHelper 클래스

 

 필자는 FlickrAPIHelper 클래스를 만들어서 사용하였다. GetMyPhoto 메소드는 플리커 API를 호출하기 위한 URL를 만들어 주는 부분이다. GetMyPhoto 메소드의 파라미터는 token(로그인 인증 토큰), nsID(로그인 인증), currentPage(읽어 올 페이지), count(읽어 올 데이터 수)로 구성이 되어 있다. [코드 5] 메소드를 통해서 반환 받은 URL를 호출해 보면 아래와 같은 XML 데이터를 받아 오게  되는데 이를 LINQ to XML로 파싱해서 데이터 클래스에 채워서 뷰에 바인딩 걸어 주면 된다.

 

<?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok">   <photos page="1" pages="1" perpage="20" total="12">     <photo id="3923974847" owner="36183292@N03" secret="29d7979bc9" server="3424" farm="4" title="안기승선생님" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061170" tags="" />     <photo id="3924760930" owner="36183292@N03" secret="ff6932aae5" server="2576" farm="3" title="펄마스터 커스텀" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061167" tags="" />     <photo id="3924760854" owner="36183292@N03" secret="bbef6bfa81" server="2560" farm="3" title="연주" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061165" tags="wooks" />   </photos> </rsp>

[코드 6] 플리커 API flickr.photos.search 반환 XML 데이터

 

private IList<FlickrPhotoModel> GetFlickrPhotoModels(string p) {     XDocument xDoc = XDocument.Parse(p);       var val = from item in xDoc.Descendants("photo")               select new               {                  PhotoId = item.Attribute("id"),                  OwnerId = item.Attribute("owner"),                  Secret = item.Attribute("secret"),                  Server = item.Attribute("server"),                  Farm = item.Attribute("farm"),                  Title = item.Attribute("title"),                  Ownername = item.Attribute("ownername"),                  Dateupload = item.Attribute("dateupload"),                  Tags = item.Attribute("tags")               };        List<FlickrPhotoModel> result = new List<FlickrPhotoModel>();        foreach (var item in val)      {        FlickrPhotoModel photoModel = new FlickrPhotoModel()        {              PhotoID = item.PhotoId.Value,              Dateupload = item.Dateupload.Value,              Farm = item.Farm.Value,              OwnerID = item.OwnerId.Value,              Ownername = item.Ownername.Value,              Secret = item.Secret.Value,              Server = item.Server.Value,              Tags = item.Tags.Value,              Title = item.Title.Value         };             result.Add(photoModel);      }      return result; }

[코드 7] LINQ to XML로 XML 데이터 파싱

 

위 코드 내용은 [코드 6]의 XML 데이터를 받아서 [코드 7]에서 FlickrPhotoModel 클래스(데이터 클래스)에 값을 채워주는 내용이다. LINQ to XML은 DB 쿼리를 만져 보신 분들이라면 쉽게 이해하고 사용 할 수 있을 것이라 생각이 든다. [코드 7]은 반환 값이 IList<FlickrPhotoModel>로 뷰모델에서 호출해서, 반환 데이터를 받아 ListBox 컨트롤에 바인딩이 되도록 짜놓았다.

(아래 MainViewModel 클래스 참고)

 

namespace Flickr.MyPhotoGallery {     public class MainViewModel : ViewModelBase     {  …중간 생략…   private IList<FlickrPhotoModel> _photoSource;         public IList<FlickrPhotoModel> PhotoSource         {             get { return _photoSource; }             set             {                 _photoSource = value;                 OnPropertyChanged("PhotoSource");             }   } public InstantCommand<object> SelectionChangedCommand { get; private set; }           public MainViewModel()         { } …중간 생략… } }

[코드 8] MainViewModel 클래스(Class)

 

PhotoSource 는 뷰에 ListBox 컨트롤(Control)이랑 바인딩이 걸려 있는 상태여서 뷰모델의 데이터(모델)가 변경이 되면 ListBox의 데이터도 변경이 된다.

 

[그림 5] 포토 리스트 화면

 

 위 그림처럼까지 나오게 했다면 이제 상세정보 보여주는 거는 정말 쉬울 것이다.

 

[코드 8]에서 보면 SelectionChangedCommand를 만들어 준 것을 보았을 것이다. 이는 위에서 LoginCommand와 같은 방법으로 ListBox 컨트롤에 붙어 넣어두고 EventName을 SelectionChanged로 설정해주자. 그렇게 되면 리스트박스에서 Selection이 일어 날 때 마다 해당 커맨드(SelectionChangedCommand)가 발생해서 뷰모델에서 선택된 데이터가 들어 올것인데, 이를 받아서 포토(사진)을 크게 보여주면 되기 때문에 상세 뷰도 쉽게 만들수 있을 것이다. 커맨드 파라미터 설정은 위에서 따로 설명하지 않았었데, 간단하다. Command 설정 밑에 CommandParameter를 설정할수 있도록 되어 있다.

[그림 6] CommandParameter 설정

 

 Element Property를 선택 해당 리스트박스(ListBox)컨트롤을 선택후 파라미터를 SelectedItem으로 선택해주면 해당 커맨드가 일어났을 때 파라미터로 SelectedItem을 받을수 있게 되는 것이다.이렇게 받은 데이터를 상세 뷰에 바인딩 시켜주면 간단하게 상세 뷰페이지도 끝나는 것이다.

지금까지 내용이 처음 실버라이트를 접하신 분들에게는 약간은 힘들고, 무슨소리 하는 것 인지 어렵게 느껴졌을 수도 있을 것 같다. 하지만, 하나하나 직접 손으로 만들어 봐야지 실버라이트을 배우는데 수월할 것이다. 물론, 사람마다 배움의 방법은 다르겠지만 일반적으로 직접 만들어보고 익힌 것이 나중에 잊어버리지 않고 내 것이 된다는 것은 공감 할 것이다. 또한, MVVM , Command 패턴은 현재 실무에서도 많이 사용하고 있기 때문에 어떤 회사에 들어가건, 어떤 프로젝트를 맡건 간에 정말 유용하게 사용될 것이라고 필자는 확신한다.

Flickr.MyPhotoGallery.zip

※ 예제 파일을 첨부해 놓습니다!!

이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!

[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)

---

ㅁ Flickr API 키 발급 받자.

 

플리커(Flickr) API를 받는 방법은 간단하다. 기본적으로 우선 플리커에 가입을 해야 하며, 로그인후 API관련 페이지로 이동해서 키 발급을 신청하면 된다. (http://api.flickr.com/services/api)

 

[그림1] 플리커(Flickr) API 관련 페이지

 

위 그림은 플리커 API관련 페이지이다. App제작 링크를 클릭해서 넘어가면 API키를 발급 받을 수 있는 링크가 나올 것인데, 그 링크를 클릭해서 키 발급 절차에 따라 내용을 작성하면 정상적으로 플리커 API키를 발급 받을 수 있을 것이다. (App 제작 >> API 키 요청 >> 항목 작성)

 

ㅁ 프로젝트 구성 및 UI구성

 

-      프로젝트 구성

 

 키 발급이 끝났다면 이제 VS2008(VisualStudio2008)를 이용해서 실버라이트 프로젝트를 하나 만들자. 프로젝트 이름은 마음대로 짖도록 한다. (필자는 Flickr.MyPhotoGallery로 프로젝트를 만들었다) 그런 다음 위에서 설명했던 휴즈플로우(HugeFlow) CommandPattern 어셈블리(.dll)파일을 추가 해주어야 한다. 그리고 플리커 로그인은 로그인(인증)관련 파라미터(Parameter)를 넘겨줄 때 MD5로 암호화해서 보내줘야 하기 때문에 이를 위한 어셈블리파일을 추가해 주어야 한다. 어셈블리 파일은 아래 주소를 통해서 다운로드 받을 수 있을 것이다.

(http://cid-22bbf65162c68537.skydrive.live.com/self.aspx/.Public/Assemblies.zip 또는 위 블로그 주소 참고)

 

[그림 2] 프로젝트 구조

 

 위 [그림 2]는 프로젝트 파일구조를 보여주는 모습이다. 위에서 참조파일을 다운받았다면 위 그림에 References폴더와 같이 참조파일을 추가해 주자. 그리고 나머지 파일들은 이름만 봐도 대충 어떤 내용인지 짐작 할 수 있을 것이라 생각이 든다. 일단, 이렇게 구성이 되어 있구나 하고 봐주길 바란다.

 

 

-      UI구성

 

간단하게 UI디자인 해보자. 물론, 만들고 싶은 데로 디자인해도 상관없다. 필자는 개발자라 디자인 감각이 조금 떨어진다. 이상하더라도 이해해 주길 바란다!!

위 [그림 2]에서 View폴더가 있을 것이다. 그 안에 MainView.xaml 파일이 보일 것인데, 그 파일에 디자인 내용을 넣도록 하자. (디자인은 블렌드(blend)를 이용하면 편할 것이다.)

 

[그림 3] 디자인모습

 

 위 [그림 3]는 간단하게 디자인해 본 모습이다. 정말 간단하게 디자인 되어 있기 때문에 [그림 3]과 같이 디자인하기는 어렵지 않을 것이라고 생각이 든다.

 

ㅁ 커맨드(Command)연결

 

 위에서 우측을 보면 로그인 버튼이 있을 것이다. 이제 이를 클릭하면 해당 커맨드가 발생 하도록  해보자. 먼저 MainView를 만들었으므로 ViewModel도 만들도록 하자. 위 [그림 2]를 보면 View폴더에 MainViewModel.cs 클래스(Class)파일과 ViewModelBase.cs 클래스파일이 있는 것을 봤을 것이다. ViewModelBase 클래스는 ViewModel에서 있어야 하는 기본적인 코드는 넣어두고, 자식클래스에서 상속받아서 사용 할 수 있도록 하기 위해 만든 클래스이다.

 

[코드 1] ViewModelBase 클래스(Class)

 

 ViewModelBase 클래스에서 간단하게 INotifyPropertyChanged 인터페이스(Interface)를 상속받아서 OnPropertyChanged 메소드(Method)를 만들어 주었다. 이는 프로퍼티(Property)가 변경이 되면 바인딩요소가 변경이 될 수 있도록 알려주기 위해 이벤트를 발생시키는 메소드인 것 이다.

 

[코드 2] MainViewModel 클래스(Class)

 

 [코드 2]는 MainViewModel 클래스를 정의한 것이다. ViewModelBase클래스를 상속 받아서 OnPropertyChanged를 호출할 수 가 있다.

 

[코드 2]에서 보면 LoginCommand가 정의되어 있을 것이다. 이는 휴즈플로우 커맨드 패턴을 참조했기때문에 사용할수 있는 것인데, 휴즈플로우 커맨드에서 주로 StaticCommand와 InstantCommand를 사용할 수가 있다. StaticCommand는 이름 그대로 전역에서 이벤트를 받아야 할 때 사용하면 될 것이고, InstantCommand는 인스턴스가 생성이 되었을때만 사용할 것이면 InstantCommand를 사용하면 될 것이다. MainViewModel 클래스는 생성 될 때, 그리고 MainView에서만 커맨드를 받을 것 이기 때문에 InstantCommand를 사용했다.

이렇게 코드가 짜여졌다면 뷰와 뷰모델을 바인딩을 엮여주자.

 

[코드 4] MainView.xaml

 

 [코드 4]는 MainView XAML 코드이다. DataContext를 보면 MainViewModel이 바인딩 되어 있는 것을 알 수 있을 것이다. 이렇게 함으로서 뷰와 뷰모델이 바인딩 처리가 되었다. 이제 뷰모델에서 선언했던 LoginCommand를 이벤트 연결을 하도록 해보자.(블렌드를 이용하면 편리하다.)

 

[그림 4-1] Command 등록

 

 커맨드 연결하는 것은 비헤이비어 연결하듯 드래그해서 해당 객체에 붙어 주기만하면 된다.

 

[그림 4-2] 커맨스(Command) 속성 설정

 

 커맨드 속성 설정도 비헤이비어와 비슷하다. 먼저, SourceName과 EventName은 로그인 버튼을 선택하고, 어떤 이벤트가 일어났을 때 커맨드를 발생 시킬 것 인지를 지정하는 것이다. 그리고 Command를 현재 DataContext로 바인딩되어 이는 뷰모델에서 LoginCommand를 선택해주면 된다. 이렇게 하면 버튼 클릭했을 경우 해당 뷰모델로 이벤트가 들어 올 것인데, 그럼 그 이벤트를 받아서 로그인 관련 코드를 짜주면 되는 것이다.

 

 

이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!

[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)

---

지난 연재 내용을 통해서 비헤이비어(Behavior)에 대해서 간단히 알아 보았고, 예제를 통해서도 어느 정도 어떻게 사용되면 되는지 익혔을 것이다. 이는 실버라이트(Silverlight)를 처음 접하신 분들이라면 정말 편리한 친구이라는 것을 잘 실감할 수 없을 것 인데, 실버라이트2에서부터 계속 하셨던 분들이라면 정말 편이한 친구라는 것을 공감 할 수 있을 것이다.

 

 이번 시간에는 실버라이트3를 이용해 간단한 나만의 포토 갤러리는 만들어 보고자 한다. 이 내용은 2010년을 맞이하여 처음으로 실버라이트를 배우고자 하는 열정적인 분들에게 도움이 되는 자료가 되지 않을까 싶다. 물론, 기존에 실버라이트를 이용해서 개발하고 계신 분들에게도 조금은 유익한 정보도 있지 않을까 하는 생각이 든다.  다들 실무에서 잘 사용하고 있는 MVVM + Command패턴 이야기도 해보려 하기 때문이다. 또한, 지난 시간에 배웠던 비헤이비어(Behavior)도 같이 복습하면서 적용할 것 이기 때문에 기존 실버라이트 개발자들에게도 조금은 도움이 되는 자료가 있지 않을까 싶다.

 

 

ㅁ MVVM & Command 패턴

 

-      MVVM 패턴 ??

 

MVVM (Model-View-ViewModel)패턴은 MVC(Model-View-Controller)패턴과 비슷하다.

뷰(View)를 따로 두고, 뷰는 모델(Model)을 몰라도 되며, 모델 또한 뷰는 몰라도 된다. 뷰는 어디에도 종속적이지 않아야 하며, 모델 또한 그러하다. 뷰는 언제든지 변경이 가능하다는 것을 염두 해 두어야 하며, 그로 인해 Model이 영향을 주면 안 되기 때문이다. 이렇게 하면 좋은 점이 디자이너와 협업이 편리해 진다. 디자이너는 뷰만 신경 써서 이뿌게 디자인해서 결과물을 만들어 주면 되고, 개발자는 모델과 뷰모델(ViewModel)를 잘 관리해 주면 되기 때문이다. 나중에 개발자 또는 디자이너가 바인딩(Binding)만 잘 엮어 주면 정말 편리한 패턴이다. 또한, 유지보수하기가 편리해진다는 장점도 있다. 수정사항이 들어오면 디자이너는 뷰만, 개발자는 뷰모델만 확인해서 수정하면 될 것 이기 때문이다.

 

[그림 1] MVVM 패턴

 

 위 그림을 보면 이해가 더 빠를 것 이다. 우리가 XAML를 만들면 코드 비하인드(Code-Behind)와함께 XAML이 생겨 날 것이다. 보통은 XAML파일에서 디자인을 하다고 객체에 x:Name을 주어 코드 비하인드에서 여러 가지 코드를 작성했을 것 이다. 이렇게 되면 차후에 새로운 디자인 수정 요청사항이 나오면, 새 XAML파일에서는 꼭 x:Name으로  명시 한 객체가 있어야 하며, 개발 코드 또한 복사해서 붙어 넣기 하거나, 객체 이름을 찾아서 다시 값을 세팅해 주어야 할 것이다.  하지만, MVVM에서의 View는 XAML과 Code-Behind를 하나의 뷰로 본다. 그리고 모델은 DB또는 XML에서 가지고 온 데이터모델(DataModel)을 의미한다. 아까 위에서도 말했듯, [그림 1]에서도 보듯 뷰와 모델은 독립적이어서, 서로 연관되어 있지 않다. 다만 중간에 뷰모델만 있을 뿐이다. 그렇다면 뷰모델은 어떤 일을 하는 녀석인지 알아 보자!!

뷰모델은 모델이 생성되거나, 변경 되었을 때 바인딩으로 엮여져 있는 뷰에게 값을 변경시켜주는 역할을 한다. 뷰모델과 뷰는 바인딩(Binding)식으로 데이터를 주고 받기 때문에 뷰 객체에 x:Name을 지정해 줄 필요가 없다. 그럼 뷰에서 이벤트처리는 어떻게 할 것 인지에 대한 고민이 생길 것 이다. 이 해결 방법은 MVVM패턴과 찰떡궁합인 커맨드(Command) 패턴으로 해결 할 수 있다.

 

 

-      Command 패턴??

 

 커맨드(Command)패턴이란 주로 애플리케이션(Application) 전역에서 동일하게 받을 수 있는 사용자의 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드패턴은 특히 MVVM처럼 뷰와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 또한, 커맨드패턴은 실버라이트 3에서 새롭게 등장한 비헤이비어와 만나 조금 더 쉽게 이용할 수 있게 되었다. 이는 휴즈플로우(HugeFlow)에서 오픈 소스로 올려놓은 HugeFlow.CommandPattern 어셈블리 파일(.dll)을 이용하면 된다. 물론 소스까지 공개되어 있으니 받아서 변경해도 된다.

 

 그럼 이제부터 본격적으로 MVVM + Command 패턴, 비헤이비어를 이용해서 나만의 포토 갤러리를 만들어 볼 것인데, 코드 하나하나 다 설명하기에는 시간이 많이 걸리고 내용도 많아서 주요 내용만 알아보도록 할 것이다. 하지만, 필자가 만든 소스는 블로그를 통해 올려 놓을 것이니, 참고해서 만들어도 괜찮을 것이다.

 

우선 Flickr API 키를 발급 받도록 하자. 이 예제에서는 따로 DB나 서비스(Service)를 만들지 않고 Flickr API를 이용할 것이기 때문에 키 발급을 꼭 해야 한다.

ㅁ 국내외 인터넷 관련 기구

[ 국내외 인터넷 관련 기구표 ] 

  위 그림에서 노란색으로 체크되어 있는 ISOC , IAB , IANA가 최상위 표준 기구이며, 주요하게 알아야할 내용은 IETF , InterNIC , 한국 NIC 이다. 

 - ISOC(Internet SOCiety)
   . 1992년에 조직되어 전세계의 인터넷의 발전 및 진화와 관련된 기술을 위해 결정된 전문적 비영리 기구이다. 새로운 인터넷 어플리케이션 탐구에 대한 공개 토론의 장을 제공하고, 인터넷에 대한 관심과 바람직한 사용 및 발전을 진작시키기 위한 일을 한다. (http://www.isoc.org)

 - IAB(Internet Architecture Board)
  . 인터넷 발전에 관련된 기술적이고 정책적인 문제를 다루는 위원회로서, 인터넷 구조, TCP/IP 등의 프로토콜을 검토하고, IESG에서 동의할 만한 새로운 인터넷 표준(RFC)들을 제시한다. (http://www.iab.org)

 - IETF(Internet Engineering Task Force)
  .  인터넷 표준안을 제정하기 위한 기술 위원회로서, RFC의 실제 출판을 담당한다.(http://www.ietf.org)
  (RFC[Request For Comments]란?? 인터넷에 있는 모든 기술들은 문서화가 되어야 하는데, 이 문서를 RFC문서라고 한다. 이를 통해 IETF에 제출한다.)

[ RFC(Request For Comments) 문서]

 - IANA(Internet Assigned Numbers Authority)
  . 프로토콜의 변수들에 대해 값을 부여하는 것을 관장, IANA의 위임을 받은 InterNIC은 도메인 네임(COM,EDU, ORG, NET), IP 어드레스 배정 등의 임무를 맡고 있다. 

 - 한국인터넷정보센터(KRNIC)
  . 국내 IP 주소 할당, 도메인 네임 등록 등의 업무를 담당한다. (http://www.nic.or.kr)

ㅁ 인터넷 정의

 네트워크들을 연결해 놓은 네트워크 : Network of Network

 - Internet[대문자] / internet[소문자]
 1. Internet(고유명사)
   미국방성 주도의 ARPANET에서 출발한 TCP/IP을 사용하여 서로 연결된 네트워크
 2. internet(기술적 측면)
   상호 접속 프로토콜을 이용하여 네트워크와 네크워크를 연결한 네트워크를 의미하며, TCP/IP 프로토콜을 사용하는 Internet은 internet의 한 종류라고 할수 있다.

ㅁ 인터넷의 특징

 1. TCP/IP 프로토콜을 통해 연결되어 있는 클로벌 네트워크이다.
 2. 인터넷은 네트워크를 연결해 놓은 네트워크이다.
 3. 인터넷은 클라이언트/서버 시스템으로 동작한다.
 4. 패킷 교환망을 기반으로 동작한다.
 5. 중앙 통제기구가 없다.

ㅁ 인터넷의 역사

 1969년 : 미 국방성의 ARPA프로젝트의 일환으로 탄생.
   국방성의 중앙컴퓨터,UCLA와 스탠포트 대학, UCBS 및 유타 대학 등의 컴퓨터를 연결
 
 1974년 : TCP/IP 프로토콜 디자인
 
 1982년 : TCP/IP(de facto) 프로토콜로 채택
  de facto : 사람들이 많이 사용해서 표준처럼 되어버린 표준을 의미.
  dejure : de facto의 반대로 산업적 표준을 의미

 1984년 : Domain Name 시스템 개념의 도입

 1986년 : 미 과학재단(NSF)에 의해서 NSFNET개발

 1990년 : ARPANET 소멸, 기존의 군사용 네트워크는 MILNET로 존재

 1993년 : InterNIC 설립과 모자이크 개발

 1994년 : Netscape 개발

ㅁ 인터넷 접속도(국내입장)

 우리 나라에서는 인터넷에 접속하기 위해서 크게 두가지 네크워크가 있다고 보면 되는데 이는 아래와 같다.

 - 국내 학술 연구망 : 순수 연구의 목적으로 만들어짐.
  . 한국 통신의 HANANET
  . 서울대학교에서 운영 중인 교육전산망인 KREN
  . ETR에서 운영 중인 KREONET 등

 - 국내 상용망(ISP) : 돈을 내고 사용함.
  . KORNET
  . INET
  . 데이콤
  . 나우누리 등

                                                           [전세계 인터넷 접속도]

 1. IP주소(IP Address)
  . 사람들이 편지를 주고 받을 때 주소가 필요한 것처럼 인터넷 상에서도 송수신 컴퓨터의 주소가 필요.
  . 인터넷에서 사용하는 숫자로 구성된 주소.
  . 네트워크 주소(Network ID)와 호스트 주소(Host ID)로 구성.
  . 인터넷의 주소체계는 Dotted Decimal Notation(e.g 210.102.150.219)
    - Dotted Decimal Notation : 10진수로 되어있고, 점으로 찍혀있는 표기법.
  . KRNIC에서 주관

 
 2. Domain Name(Host Name)
  . IP 주소는 숫자로 구성되어 있기 때문에 사람이 기억하기 어렵다.
  . 숫자 대용으로 똑같은 주소 의미
  . 기관별, 국가별 등 최상위 도메인(domain)과 도메인(sub_domain)으로 구성

     - 기관별 최상위 도메인 :
 edu : 교육기관(mit.edu)
 com : 상업적 회사 혹은 기업체(microsoft.com)
 gov : 정부기관(whitehouse.gov)
 net : 네트워크 관련 기관(Internic.net)

     - 국가별 최상위 도메인 :
 au  : 호주
 uk  : 영국
 cn  : 중국
 us  : 미국
 fr  : 프랑스
 hk  : 홍콩
 jp  : 일본
 kr  : 한국

     - 국가도메인의 부 도메인
 co  : 회사(kotel.co.kr)
 re  : 연구소(etri.re.kr)
 ac  : 학술기관(skku.ac.kr)
 go  : 정부기관(bluehouse.go.kr)
 nm  : 네트워크(hana.nm.kr)

ㅁ DNS(Domain Name System)

 . 실제로 컴퓨터가 통신을 수행할 때 Domain Name은 사용할 수 없으므로 IP 주소로 변환해야 한다.
 . DNS는 자신의 도메인에 속한 IP주소에 대한 Domain name을 보유하고 있다.
 . 어떤 IP주소에 해당하는 Domain Name을 요청하거나 그 반대의 작업을 요청할 수 있다.
   (명령어를 통해 IP Address를 알아올수 있다. nslookup 도메인명)

 

ㅁ 정보통신의 개념

  데이터 :
   1. 사용자간에 합의된 임의의 형태로 형식화된 사실과 개념, 명령 등을 표현한 것이다.
   2. 컴퓨터 시스템의 관점에서 보면 데이터는 0과 1로 이루어진 디지털 2진 형택의 단위를 나타낸다.

  정보 :
   1. 수많은 데이터 중에서 사용자에게 유용한 데이터를 말한다.
   2. [예] "오늘 아침은 비가 온대" "오늘 약속시간이 저녁 6시야" 등

  통신 :
   - 정보 제공자(source)와 정보 수여자(destination)간의 정보의 이동현상으로 정의

  정보통신 :
   1. 데이터, 음성, 화상, 영상 등 멀티미디어 정보의 전달 및 처리하는 종합적인 기술
   2. 정보의 수집, 가공, 저장, 검색, 송/수신 및 활용과 관련된 일련의 활동과 수단

ㅁ 정보통신의 서비스 유형

 정보통신의 서비스를 나누는 방법은 전달되는 형태에 따라서 달라지는데, 음성통신, 데이터통신, 화상통신, 영상통신, 멀티미디어 통신으로 나눠진다.

 . 음성통신 : 교환서비스, 음성원격회의, 음성정보 서비스
 . 데이터 : 전자우편, 화일전송, 컴퓨터원격회의 (0과1로 보내는 통신 바이널이 통신)
 . 화상 : 팩시밀리, 그래픽전송
 . 영상 : TV 방송, 원격회의
 . 멀티미디어 : 원격교육, 원격회의(복합적인)

ㅁ 네트워크란? 

 1. 어떤 공동의 목적을 위해 다수 지점간에 상호 연결된 통신형태이다.
 2. 컴퓨터와 컴퓨터가 연결되어 있어서 서로 통신할 수 있는 통신체계이다.
 (어떤 목적을 지니고 그 목적을 위해서 서로 연결되어 있는 통신형태가 네트워크이다.)

ㅁ 네트워크 구성 방법

 1. 컴퓨팅 장치
    PC, 프린트

 2. 네트워크 인터페이스 카드(NIC)
    컴퓨팅 장치들에게 물리적 통신 기능 부여
    한 호스트에서 여러 개의 NIC 설치 가능
    LAN카드

 3. 케이블링 시스템
    TP케이블, 동축 케이블, 광케이블, 무선(Radio, microwave)

 4. 액세스 장치와 집중화기
    한 중심점을 통해 여러 장치들을 네트워크에 연결시키는 장치
    Hub

 5. 네트워킹 소프트웨어
    네트워크 관련 작업을 수행할 때 NIC에 접근 작업을 수행하는 S/W
    Network OS

 6. TCP/IP 네트워킹 소프트웨어
    TCP/IP 프로토콜
    이기종의 컴퓨터 네트워킹 환경에서, 서로 다른 운영 환경을 가지는 컴퓨터 간의 통신을 가능하도록하는 프로토콜.
    UNIX, Windows, 등

- 일시 : 2010년 03월 25일(목) 19시 00분 - 장소 : 포스코센터 5층 (한국마이크로소프트) - 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.) - 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx

세미나 Agenda

19:00~19:30 등 록 19:30-20:10 실버라이트 4를 통해 보는 RIA의 미래 / 공인석 20:10~20:20 휴식 20:20-21:00 선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연 21:00~21:10 휴식 21:10-21:40 누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규 21:40~ Q&A / 경품추첨

발표 내용 소개

실버라이트 4를 통해 보는 RIA의 미래 / 공인석 매년 열리는 MIX의 꽃은 바로 실버라이트죠. 올해, MIX10에서도 실버라이트 4가 베타 딱지를 떼고 RC로 공개되었습니다. 해마다 지칠줄 모르고 발전을 거듭하는 실버라이트! 이 세션에서는 실버라이트 4의 주요 기능을 소개하고 향후 리치 애플리케이션의 환경에 어떤 영향을 미칠지 예측해 봅니다. 선구언니와 함께하는 익스프레션 블렌드 4 / 김선구, 이은아, 장미연 실버라이트와 WPF 프로젝트를 수행할 때 블렌드는 선택이 아닌 필수가 되었습니다. 이번 MIX10에서 공개된 블렌드 4는 그 동안 디자이너 혼자서는 할 수 없었던 많은 기능이 추가되었습니다. 이제 블렌드로 더욱 인터랙티브한 애플리케이션을 만들 수 있습니다. 이 세션에서는 블렌드 전문가로서 디자이너에게 꼭 전해주고 싶은 기능과 활용법을 소개합니다. 누구도 얘기해주지 않았던 WPF 4 이야기, 그리고 그 비밀 / 전호진, 이동규 차세대 윈도우 리치 클라이언트 애플리케이션 개발을 지원하는 강력한 도구인 WPF 4! 아무도 해주지 않았던 WPF 4의 '비밀'스러운 이야기를 풀어봅니다. 쉿!

진행자 소개

공인석 / 실버라이트 시삽 HOONS닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다. 김선구 / 익스프레션 시삽 웹디자이너, 액션스크립터로 일해 왔다. 일찍이 UX 디자인의 중요성을 깨달아 ,Silverlight의 베타시절부터 Silverlight와 WPF 와 같은 기술로 향상된 UX 구현을 하는 인터랙티브 디자이너로 일하였고, 다수의 교육 및 강의을 진행하였다. 하얀코코의 예제로 배우는 익스프레션 블렌드 & 실버라이트(www.whitecoco.net) 를 운영중이며 마이크로소프트의 MVP이고 닷넷엑스퍼트의 UX컨설턴트로 일하고 있다. 장미연 / 익스프레션 시삽 Microsoft Blend MVP로 활동하고 있고 HOONS닷넷의 Expression 시삽을 맡고 있으며 각종 세미나와 교육을 진행하고 있다. 현재 바이널(http://www.vi-nyl.com/) 인터렉티브 사업부 VLab에서 근무하고 있으며 디지털교과서를 비롯하여 다양한 WPF & Silverlight 프로젝트를 진행하였다. "짱묜"이라는 닉네임으로 블로그(http://zzangmyon.com/)를 운영중이다. 이은아 / 익스프레션 시삽 현재 d'strict 에서 UX Designer로 서피스 프로젝트에서 디자인 구현을 하고 있다. Expression MVP이며 , HOONS닷넷에서는 Expression 파트의 시삽으로 활동하고 있다. 전호진 / WPF 시삽 현재 HOONS닷넷 커뮤니티 WPF시삽으로 활동하고 있으며 닷넷 전반적인 기술에 관심이 많다. 아는것은 설명하면서 늘어난다는 생각으로 개인블로그(Life is dynmic :: http://crynut84.tistory.com)를 운영하고 있으며, 특히 최근에는 동영상 압축(Codex)과 영상처리에 집중하고 있다. 또한 항상 긍적적인 마인드를 가지고자 '맨날맑음'이라는 닉네임을 사용한다. 이동규 / WPF 시삽 현재 MSP(Microsoft Student Partners)로 활동중에 있으며, 닷넷 기술에 매우 많은 관심을 가지고 있다. 새로운 신기술을 굉장히 좋아하며 그것을 바로 활용하여 새로운것을 만드는것을 좋아한다.

세미나 장소

한국 마이크로소프트 - 포스코 센터 5층

경품안내

Calmee Space 콤보 Plus 공인석 MVP 협찬 영화예매권 * 2 한진수 MVP 협찬 아이폰커버 Elecom 협찬     ? 상사에게 사랑받을 수 있는 절대 아이템 공인석 MVP 협찬 * 경품은 사정에 의해 동급의 다른 제품으로 제공될 수 있습니다.

스폰서안내

(출처 : http://hoons.kr/board.aspx?Name=gongji&BoardIdx=32797&Page=1&Mode=2 [훈스닷넷])

세미나 신청은 훈스닷넷에서 가능합니다^^

 ㅁ 관련 내용(참고)

 - Windows Phone 7 에플리케이션 개발!! 
 - Windows Phone 7 개발 툴킷!!! 
 - 윈도우폰 7 프로그래밍 프리뷰