최고보다,최선을...

[메일발송] Gmail, Live SMTP를 이용한 메일 발송

drum-83 — Wed, 07 Oct 2009 15:08:19 +0900

보통 서버에 SMTP 설치/설정해서 .NET에서 지원하는 SmtpClient객체를 이용해서 메일을 보냈을 것 이다. 이렇게 해도 메일을 발송하는데는 별 문제가 없다. 하지만, 간혹 메일을 보내면 포탈사이트 메일을 사용하는 사용자들에게는 스펨으로 빠지는 경우가 있다. 그 이유는 메일보내는 도메인이 화이트리스트에 등록이 안되있어서 그런데 이를 해결하기 위해서는 KISA RBL에 등록을 해야한다. (자세한 내용은 사이트를 확인 바람.) 아무튼 귀찮은 작업이다.

이를 간단하게 해결하는 방법으로 Gmail과 Live(둘중 선택) SMTP를 이용하면 될 것이다. Gmail과 Live는 외부에서 접근이 가능하게 SMTP주소와 포트를 오픈해 놨다. 그래서 간단하게 예제 소스를 만들어 봤다.

Visual Studio를 이용해서 웹프로젝트를 하나 생성해서 Default.aspx에 아래 코드를 작성해 보자.

Default.aspx

<body>

<div>

ㅁ 메일 작성!!<br />

<br />

SMTP 선택 :

<asp:DropDownList runat="server" ID="ddlSmtpList">

<asp:ListItem Text="Gmail" Value="1" />

<asp:ListItem Text="Live" Value="0" />

</asp:DropDownList>

<br />

받는 사람 :

<asp:TextBox runat="server" ID="txtToMailAddress" /><br />

제목 :

<asp:TextBox runat="server" ID="txtTitle" Style="width: 560px" /><br />

<asp:TextBox runat="server" ID="txtBody" Style="width: 600px; height: 400px;" TextMode="MultiLine" /><br />

<asp:Button runat="server" ID="btnSend" OnClick="btnSend_Click" Text="전송" />

</div>

</form>

</body>

간단한 코드다. Gmail 또는 Live SMTP를 사용지에 대한 DropDownList와 수신자 메일을 지정할 텍스트박스, 제목을 적을 텍스트박스, 내용을 적을 텍스트박스 그리고 전송위한 버튼...간단하게 5개 컨트롤들을 지정해 봤다. 그럼 .cs 코드를 보자.

Default.aspx.cs

/// <summary>

/// Live smtp서버 주소

/// </summary>

private const string LIVESMTP_SERVER = "smtp.live.com";

/// <summary>

/// Gmail smtp서버 주소

/// </summary>

private const string GMAILSMTP_SERVER = "smtp.gmail.com";

/// <summary>

/// SMTP포트

/// </summary>

private const int SMTPPORT = 587;

protected void Page_Load(object sender, EventArgs e)

{

}

/// <summary>

/// 전송버튼 이벤트

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void btnSend_Click(object sender, EventArgs e)

{

MailAddress from = new MailAddress()

{

Email = "kdw8751@gmail.com",

DisplayName = "Dongwook"

};

MailAddress to = new MailAddress()

{

Email = txtToMailAddress.Text

};

bool isGmail = ddlSmtpList.SelectedValue == "1" ? true:false;

SendMail(txtTitle.Text, txtBody.Text, to, from, isGmail);

}

/// <summary>

/// 메일을 발송합니다.

/// </summary>

/// <param name="title">제목</param>

/// <param name="body">내용</param>

/// <param name="to">수신자</param>

/// <param name="from">발신자</param>

/// <param name="isGmail">Gmail Smtp 여부</param>

private void SendMail(string title, string body, MailAddress to, MailAddress from, bool isGmail)

{

// SmtpClient 변수 선언

SmtpClient smtp;

if (isGmail)

{

smtp = new SmtpClient(GMAILSMTP_SERVER, SMTPPORT);

// Gmail메일 ID/ Password 지정

smtp.Credentials = new NetworkCredential("Gmail아이디@gmail.com", "Gmail Password");

}

else

{

smtp = new SmtpClient(LIVESMTP_SERVER, SMTPPORT);

// Live메일 ID/ Password 지정

smtp.Credentials = new NetworkCredential("Live아이디@live.com", "Live Password");

}

smtp.DeliveryMethod = SmtpDeliveryMethod.Network;

smtp.EnableSsl = true;

MailMessage message = CreateDefaulMailMessage(from, to, title, body);

object userState = message;

// 비동기 이벤트

smtp.SendCompleted += new SendCompletedEventHandler(smtp_SendCompleted);

// 비동기 호출

smtp.SendAsync(message, userState);

// 동기호출

//smtp.Send(message);

}

/// <summary>

/// 비동기 호출 이벤트

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void smtp_SendCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)

{

if (e.Error != null)

return;

}

/// <summary>

/// 기본적인 메일 메세지를 생성하여 반환합니다.

/// </summary>

/// <param name="from">발신자 이메일</param>

/// <param name="to">수신자 이메일</param>

/// <param name="subject">메일 제목</param>

/// <param name="body">메일 본문</param>

/// <returns>메일 메세지 객체</returns>

private MailMessage CreateDefaulMailMessage(MailAddress from, MailAddress to, string subject, string body)

{

// 메일 메세지 객체 생성

MailMessage message = new MailMessage();

//// 보내는 사람

message.From = from.ConvertToBuiltInMailAddress();

// 수신자 지정합니다.

message.To.Add(to.ConvertToBuiltInMailAddress());

// 제목 인코딩

message.SubjectEncoding = System.Text.Encoding.UTF8;

// 제목

message.Subject = subject;

// 본문 인코딩

message.BodyEncoding = System.Text.Encoding.UTF8;

// 본문

message.Body = body;

// HTML 허용

message.IsBodyHtml = true;

// 우선순위

message.Priority = MailPriority.Normal;

return message;

}

/// <summary>

/// 메일 정보

/// </summary>

public class MailAddress

{

/// <summary>

/// 메일주소를 지정/반환합니다.

/// </summary>

public string Email { get; set; }

/// <summary>

/// 이름을 지정/반환합니다.

/// </summary>

public string DisplayName { get; set; }

/// <summary>

/// 빌트인 MailAddress 객체를 만들어 반환합니다.

/// </summary>

/// <returns></returns>

public System.Net.Mail.MailAddress ConvertToBuiltInMailAddress()

{

return new System.Net.Mail.MailAddress(this.Email, this.DisplayName);

}

위 코드에서 주석을 보면서 보면 이해하기 쉬울것 이다. 내용을 다 입력한후 전송버튼을 클릭하면 btnSend_Click로 이벤트로 들어 올것이다. 여기서 드롭다운리스트에서 선택되어 있는 SMTP주소를 지정한다. 그리고 제목, 내용, 수진자지정, 보낸 사람지정후 메일을 보내진다. 코드는 아주 간단하다. 실행해 보면 잘 될 것이다. (소스는 버리기 아까우니 첨부파일로 올려놓겠다.)

주요 내용은 Live SMTP주소가 smtp.live.com 이고, Gmail SMTP주소는 smtp.gmail.com 이다. 포트는 둘다 587로 되어 있다. 그리고 메일을 보내기 위해서는 Live, Gmail 계정이 반드시 있어야 한다.

참고 )
Live SMTP를 이용하면 메일을 발송할수 있는 건수가 제한이 되어 있다. 총 몇건인지 자세히 알아 보진 않았지만... 테스트로 20건 정도 반복해서 보내봤는데... 계정이 막혀버렸다. 그래서 Live에 다시 직접 로그인해서 풀어줘야하는 번거로운이 있엇다. 그에 비해 Gmail은 계정이 막히거나 그러지 않았다. Gmail의 메일 발송 한도는 아래 링크를 확인 하기 바란다.
(http://mail.google.com/support/bin/answer.py?hl=ko&answer=22839)

Localhost.zip

[MSDN 세미나] 멀티터치를 활용한 응용 프로그램 개발 가이드

drum-83 — Wed, 07 Oct 2009 09:25:28 +0900

개발자를 위한 Windows 7 세미나 시리즈
5탄- 멀티터치를 활용한 응용 프로그램
개발 가이드(10월 8일)

Windows 7의 가장 매력적인 기능인 멀티터치 기능을
알고 계신가요?
웹 애플리케이션과 WPF 프로그래밍에서도 쉽고 빠르게 활용할 수 있는 멀티터치를 MSDN 세미나에서
만나보시기 바랍니다.

일시 : 10월 8일(목) 18:30 ∼ 21:30
장소 : 한국마이크로소프트 5층 세미나실 (포스코센터 서관 5층) [약도보기]

AGENDA

18:30- 19:00	등록
19:00- 20:10	윈도우 7 멀티터치 개발의 세계로.. 윈도우 7의 새로운 기능 중에 가장 개발해보고 싶은 기능 1위 멀티터치. 윈도우 7의 멀티터치 개발을 소개해 드립니다. (샘플 코드는 주로 닷넷 프로그래밍 환경에서 작성되었습니다.)	오일석 MVP
20:10-20:20	휴식
20:20-20:50	실버라이트3, 웹을 멀티터치 하다. 실버라이트3와 윈도우 7을 통하여 웹에서도 멀티터치가 가능해졌습니다. 간단한 사용법은 물론, 멀티터치가 웹애플리케이션에 어떤 영향을 줄지 생각해 볼 수 있는 시간이 될 것입니다.	공인석 MVP
20:50-21:30	멀티터치 WPF 4를 주목하라. 출시예정인 비주얼 스튜디오 2010과 .NET 프레임워크 4.0에서는 멀티터치 가능한 WPF 컨트롤을 제공합니다. 쉽고 빠르게 멀티터치 가능한 WPF 응용프로그램을 만드는 방법을 소개해 드립니다.	오일석 MVP

강사소개
		오일석 MVP UX에 대한 열망으로 편한 길을 뒤로하고 d’strict way를 걷고 있다. 디스트릭트(http://dstrict.com) UX Technology 2 그룹에서 UX 솔루션 연구 개발에 몰두하고 있으며 주로 Microsoft의 UX 기술을 활용하고 있다. Microsoft MVP(Client App Dev.)로 훈스닷넷(http://hoons.kr)에서 시삽으로 활동하고 있다.

		공인석 MVP 훈스닷넷 실버라이트 분야 시삽을 맡고 있고, 실버라이트가 소개된 이래로 실버라이트에 매진해 왔다. 유령회사 공도소프트라는 블로그를 통하여 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 훈스닷넷을 비롯한 실버라이트 관련 커뮤니티 활성화에 기여하고 있다.


행사안내
> 행사 참석을 원하시는 고객께서는 반드시 사전등록을 해주시기 바랍니다. > 주차권이 제공되지 않으니 가급적 대중교통을 이용해 주시기 바랍니다. > 행사 종료 후, 추첨을 통해 소정의 경품을 드립니다.

행사문의처

전화: 02-531-9607 (담당:변재섭) E-Mail: msevent@wunderman.com

후원:

[웹 에디터] Xquared 에디터 붙이기!!

drum-83 — Tue, 06 Oct 2009 23:34:00 +0900

웹개발을 하다보면 간혹 에디터를 붙어야 하는 경우가 생긴다. 그럼 개발자는 어떤 에디터를 사용할까 많이들 고민할 것 이다. 나 또한 그랬으니깐…

그래서 내가 예전에 사용해서 봤던 Xquared를 이용해서 웹사이트에 전용시키는 방법을 공유하려한다. 이는 초보개발자들이 웹에디터를 적용할 때 도움이 되는 문서가 되지 않을까 싶다.

Xquared는 자바스크립트로만 작성되어 있어서 별도의 소프트웨어를 설치 필요가 없고, XHTML표준을 따르는 문서를 만들어 주며, 다양한 확장점을 통해 원하는 기능을 쉽게 추가할 수 있도록 구현되어 있다.

Xquared 소개에 보면 위와 같이 설명되어 있다. 자세한 소개는 Xquared에서 확인해 보길 바란다.

이제 사이트에 어떻게 적용할지 하나하나 확인 해보자!

아! 적용하기전에 먼저 에디터를 다운로드 받도록 한다. 다 받았다면 Visual Studio에서 웹프로젝트를 하나 만들도록 한다.

[그림 1]

난 Xquared_Editor라는 이름의 웹프로젝트를 하나 생성했다. 새로 생성하면 아마도 위 그림과 같은 모습일 것이다. 그렇다면 이제 아까 다운받았던 Xquared 에디터에서 images, javascripts, stylesheets 폴더를 프로젝트에 추가하자!!

[그림 2]

자 그럼 위 그림과 같이 구성이 되었을 것이다. 그럼 이제 에디터 설정을 하면 된다. 그럼 간단하게 Default.aspx파일에 스크립트 설정을 해보자. (물론 테스트 파일을 열어서 확인해도 편할것이다.)

Default.aspx

var xed;

window.onload = function() {

xed = new xq.Editor("xqEditor");

xed.setEditMode('wysiwyg');

xed.setWidth("100%");

};

//]]>

</script>

</head>

<body>

</div>

</form>

</body>

</html>

스크립트 이벤트인 onload 이벤트때 Xquared 에디터를 생성하는 것이 보일 것이다. 위와 같이 간단한 코드로 Xquared 에디터를 붙일수 있다. 지금은 테스트로 Default.aspx 페이지에 붙였지만, 실제 개발한때는 UserControl이나, Control로 잘만들어 놓으면 쓰기 편한 것 이다.

[그림 3 실행모습]

그럼 이제 Validation 체크관련 해서 알아보도록 하겠다. 테스트를 위해 버튼을 하나 만들어 보자.

Default.aspx

function Validation() {

alert(xed.getCurrentContent(true));

}

위 코드와 같이 간단하게 만들어 봤다. 버튼을 클릭하면 Validation라는 스크립트 함수를 호출하도록하고, Validation함수에서는 getCurrentContent함수를 통해 에디터의 내용을 반환해서 메세지를 뿌려주는 것이다. (getCurrentContent에 true를 주면 full-validation이 수행된다.)

[그림 4]

위 그림은 실행 모습이다. 이를 이용해서 Validation 체크를 하면 될 것이다.

자 그럼 이제 이미지 업로드 설정에 대해서 알아 보도록 하자. 지금 툴바에는 이미지 업로드 버튼이 안보일 것이다. 이는 에디터 생성할 때 설정을 해주어야 한다.

Default.aspx

window.onload = function() {

xed = new xq.Editor("xqEditor");

xed.isSingleFileUpload = true;

xed.addPlugin('FileUpload');

xed.setFileUploadTarget('/ImageUpload.aspx', null);

xed.setEditMode('wysiwyg');

xed.setWidth("100%");

위 코드를 보면 isSingleFileUpload, addPlugin, setFileUploadTarget 이 세가지 함수가 추가로 설정되어 있다. isSingleFileUpload는 한 개 파일 업로드를 하겠다고 설정한 것이다. (다중 파일업로드는 Xquared 사이트에서 확인 해보기 바란다. 지금은 SingleFileUpload에 관련해서만 설명하도록 하겠다.) addPlugin() 메소드를 사용해서 플러그인을 xed에 추가한다. setFileUploadTarget()메소드는 파일 업로드할 페이지를 지정한다. 그래서 난 ImageUpload.aspx라는 페이지를 하나 생성해서 추가해 두었다. 그럼 이제 ImageUpload 페이지에 파일 업로드 코드를 작성하도록 하자.

먼저 스크립트를 추가 한다.

ImageUpload.aspx

window.onload = function() {

if (window.parent.xed) {

window.parent.xed.fileUploadListener.onSuccess('<%= FileName %>','');

}

//]]></script>

스크립트는 간단하다 부모의 xed객체의 onSuccess메소드를 호출해 주는 것이다. 여기서 파일이름을 같이 전달해준다.

ImageUpload.aspx.cs

/// <summary>

/// 파일 이름을 지정/반환합니다.

/// </summary>

protected string FileName { get; set; }

protected void Page_Load(object sender, EventArgs e)

{

Save();

}

/// <summary>

/// 파일을 저장합니다.

/// </summary>

private void Save()

{

// 에디터에서 표시될 이미지 경로

string _imagehost = string.Format("http://{0}/FileUpload", Request.ServerVariables["HTTP_HOST"]);

// 이미지 파일 저장 경로

string UPLOADPATH = Server.MapPath("FileUpload");

// 정상적으로 처리가 되었는지 여부

bool isSuccess = false;

// 이미지 지정 경로

string imgPath = "";

// 업로드 파일이 존재 여부 확인

if (Request.Files.Count <= 0)

{

// Error 출력

Message(isSuccess, imgPath, "Error");

return;

}

// HttpPostedFile 인스턴스 생성

HttpPostedFile file = Request.Files[0];

// 파일 이름을 반환합니다. [고유한 파일명 반환]

FileName = GetName(file.FileName);

// 파일 이름이 null이면 error

if (string.IsNullOrEmpty(FileName) == true)

{

Message(isSuccess, imgPath, "Error");

return;

}

// 파일 저장합니다.

file.SaveAs(Path.Combine(UPLOADPATH, FileName));

// 정상처리

isSuccess = true;

// 에디터에서 보여질 경로 지정.

imgPath = String.Format("{0}/{1}", _imagehost, FileName);

// 메세지 출력

Message(isSuccess, imgPath, "");

}

/// <summary>

/// 메세지를 반환합니다.

/// </summary>

/// <param name="isSuccess"></param>

/// <param name="fileUrl"></param>

/// <param name="errorMessage"></param>

public void Message(bool isSuccess, string fileUrl, string errorMessage)

{

string result = string.Format(" success:{0}, file_url:'{1}', message:'{2}' ", isSuccess.ToString().ToLower(), fileUrl, errorMessage);

this.body1.InnerHtml = "{" + result + "}";

}

/// <summary>

/// 파일 이름을 반환합니다.

/// </summary>

/// <param name="fileName"></param>

/// <returns></returns>

public string GetName(string fileName)

{

// 불필요한 파일 이름 삭제

int lastCount = fileName.LastIndexOf(".");

string fileType = fileName.Substring(lastCount, (fileName.Length - lastCount)).ToLower();

string saveFileName = string.Empty;

// 해당 type이 아니면 null 반환

if (fileType == ".jpg" || fileType == ".gif" || fileType == ".png")

{

// 고유할수 있도록 간단하게 DateTime.Now.Ticks 사용함.

saveFileName = DateTime.Now.Ticks.ToString() + fileType;

}

return saveFileName;

}

.cs 코드는 따로 설명이 필요 없도록 코드에 주석을 달아 놨다. 이렇게까지 해서 Xquared 에디터 붙이기 성공을 했다. 간단하게 예제를 실행해 보고 파일이 정상적으로 폴더에 들어 갔는지 확인해 보자!!

[그림 5 Image 버튼 클릭후 파일 선택 모습]

[그림 6 Insert버튼 클릭후 모습]

[그림 7 저장파일]

정상적으로 잘 작동하는 것 같다~^^

이 프로젝트 소스는 첨부파일로 같이 올려 놓아요!

XQuared_Editor.zip

[월간마소] - 실전 Silverlight로 포토라이트(PHOTO LIGHT)만들기

drum-83 — Mon, 17 Aug 2009 15:17:00 +0900

지난 5월 16일에 전자신문사와 데브멘토에서 주최한 DTFE 행사의 훈스닷넷 세미나에서 마지막 세션으로 발표했는 포토라이트 만들기가 월간마소 8월호에 실렸네요^^.내용은 발표 내용과 비슷하면, 예제 소스를 통해서 포토라이트와 같은 이미지뷰어를 만들수 있습니다. (실버라이트를 처음 입문하는 개발자 분들에게 도움이 될 만한 자료가 되었으면 합니다.)
PPT자료와 소스는 DTFE2009 훈스닷넷 4세션 PhotoLight에 링크 걸려 있습니다.^^

내용은 아래 링크에서 확인 하실수 있습니다.
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=33529

[월간마소 8월호] Silverlight Programming -포토라이트(PHOTOLIGHT) 만들기 1

drum-83 — Wed, 05 Aug 2009 00:31:15 +0900

월간 마소 8월호에 기재된 내용 입니다. 지난 5월에 포토라이트 발표 내용과 비슷하면, 실버라이트를 처음 입문하는 개발자 분들에게 도움이 될 만한 자료가 되었으면 합니다.
PPT자료와 소스는 DTFE2009 훈스닷넷 4세션 PhotoLight에 링크 걸려 있습니다.^^

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(PHOTOLIGHT)편]

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

실버라이트에 관심을 갖는 개발자, 디자이너들이 계속해서 늘어나고 있는 추세이며, 이를 수용하기 위해 여러 커뮤니티에서 실버라이트 스터디 모임을 진행 중이다. 필자의 경우 훈스닷넷 시삽으로 실버라이트 스터디 모임에도 같이 참석해서 운영해봤다. 대부분의 인원들이 실무에서 실버라이트를 이용한 프로젝트를 진행 중이거나, 진행을 준비하는 인원들이 대다수였다. 이들 몇 분과 이야기를 나눠봤는데, 실무적인 이야기들 뿐이었다. 어떻게 만들어야 할지, 어떻게 진행해야 할 지 등등으로 많이 고민하고 있는 모습을 느낌 수 있었다. 그래서 필자는 포토라이트(PHOTOLIGHT)를 통해서 지금 열심히 실버라이트를 공부하고, 또한 실무에서 어떻게 만들어야 할지 고민하고 있는 분들에게 조금이나마 도움이 되는 자료가 되길 바라면, 포토라이트 만들기를 진행해 보려고 한다.

PhotoLight는 간단하게 애기하면 이미지 뷰어라고 할 수 있다. 사용자들이 쉽게 사용 할 수 있고, 사진을 보면서 즐거움을 느낄 수 있게 하는 이미지 뷰어 라고 생각하면 될 것 같다. 필자는 이런 의도로 포토라이트를 기획했음을 알아 주길 바란다. 또한, 실버라이트를 공부하고 있는 많은 개발자들에게 도움이 될만한 자료가 되길 바라기도 한다.

포토라이트를 어떻게 만들어 볼까 정말 고민이 많았다. 필자는 개발자라 획기적이고, 창조적인 생각이 팍팍 떠오르지 않는다. 그래서 여러 사이트들을 돌아 다니면서, 좋은 기능들이 있는 사이트들을 체크하고, 사용해 보고 그랬다. 그러던 중 스토리큐(http://www.storyq.net/)사이트를 방문해서 사용해보고, 이 와 비슷한걸 실버라이트로 만들어 봐야겠다 라는 생각이 들어 만들게 되었으며, 그 결과물이 포토라이트인 것이다.

ㅁ 디자인 협업

포토라이트의 디자인은 현재 훈스닷넷 익스프레션 시삽으로 활동중인 김선구 시삽님께서 도와주셨다. 다들 아실 것이다. 개발을 할 때 디자이너와의 협업이 중요하다는 것을… 하지만 선구님과 필자는 같은 회사에서 일하는 것도 아니고, 서로 바뿐 스케줄을 줄여서 만드는 거라 커뮤니케이션하는 거 조차도 쉽지 않았다. 그래서 필자는 아래 그림과 같은 방법으로 협업을 해 보기로 결정을 내렸다.

“선 개발 후 디자인”이란 포토라이트에서 사용될 기능들에 대해서 먼저 개발을 해두고, 나중에 디자인을 입히는 것이다. 이렇게 하면 개발자는 디자인을 고려한 개발을 해야 할 것이고, 디자이너는 사용자를 위한 디자인을 해야 할 것이다.

포토라이트는 우리가 많이 듣던 MVVM + Command 패턴을 이용해서 만들었다. 이는 디자이너와의 협업에서도 정말 편했다. 간단하게 MVVM패턴에 대해 애기하자면, 모델(Model)과 뷰(View)를 독립적이게 놔두고, 그 사이에 뷰모델(ViewModel)를 두어서 View와 바인딩으로 엮어 두고, Command를 이용해서 해당 이벤트를 뷰모델에서 주고 받게 되는 형식이다. Command는 주로 어플리케이션 전역에서 동일하게 받을 수 있는 사용자 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드는 MVVM처럼 뷰 와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 여기서 기억할 것은 어플리케이션 전역에서 동일하게 받을 수 있다는 것을 잘 기억해 두길 바란다.

[디자인 입히기 전/후]

위 그림에서 왼쪽은 디자인을 입히기 전의 모습이며, 오른쪽은 디자인을 입힌 모습니다. MVVM패턴으로 만드니깐 View를 변경하는 것도 정말 쉬웠다. 그냥 바인딩만 제대로 걸어두고 Command만 제대로 걸어 주기만 하면 되는 것이다. 그렇게 하니 30분도 안 되서 디자인을 입힐 수 있었다. 이러므로 디자이너와 협업이 편했다 할 수 있겠다.

이제 본격적으로 포토라이트의 작동 및 구현 코드에 대해서 알아 보도록 하겠다.

[월간마소 8월호] Silverlight Programming -포토라이트(PHOTOLIGHT) 만들기 2

drum-83 — Wed, 05 Aug 2009 00:31:06 +0900

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(PHOTOLIGHT)편]

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

ㅁ Photo Light 파일업로드 구현

파일업로드 어플리케이션 또한 실버라이트로 구현해 봤다. WCF서비스를 이용하니, 다중파일 업로드와 파일업로드 프로그레스바(Progress Bar)를 표시하는데 쉽게 구현 할 수 있었다. 일단 포토라이트에서 파일업로드가 어떤 식으로 작동이 되지는 아래 그림을 통해 순서대로, 간단하게 설명하도록 하겠다.

위 그림에서 노트북으로 표시가 되어 있는 쪽이 클라이언트 PC라고 가정을 하자.

클라이언트는 포토라이트에 파일을 올리기 위해서, 자신이 보유하고 있는 사진을 선택을 할 것이다. 선택이 된 파일은 사용자가 업로드 액션을 주게 될 때, 각 파일 별로 WCF서비스를 호출을 하고, 선택된 파일을 넘겨주게 된다.

WCF서비스에서는 이 파일을 받아서, 파일서버의 해당 루트에 저장을 하게 되는데, 그냥 저장만 시키는 것이 아니라, 쎔네일(Thumbnail) 이미지와 딥줌(DeepZoom)파일들도 만들어 같은 루트 안에 저장을 한다. 이제 대략적으로 포토라이트에서는 어떻게 파일업로드가 되는지 살펴보았으니 이제 실제 구현 코드를 보면서 애기하도록 하겠다

[ 파일업로드 동작 모습 ]

위 그림은 포토라이트의 파일업로드 어플리케이션의 모습이며, 프로젝트 구성내용은 아래 그림과 같이 만들어 봤다.

[ 파일업로드 프로젝트 구성 내용 ]

위 그림에서 Service References로 FileUploadService가 참조된 것을 볼 수 있을 거이다. 이 Service를 이용해서 파일을 서버에 업로드를 시킬 수 있는 것이다. Service구현에 대해서는 아래에서 다시 애기하기로 하고, 지금은 저 서비스를 통해서 파일을 업로드 한다고만 알고 있기만 하자.

각 폴더에 들어 있는 클래스들에 대해서 간단하게 애기하자면, Commands폴더에는 위에서 설명한 Command Pattern 내용 되로 파일업로드에 사용 될 Command를 지정해 둔 클래스를 만들어 두었고, Model폴더에는 파일에 대한 데이터클래스와 파일 업로드 프로바이더(Provider) 정의해 두었다. 그리고 View폴더에는 MVVM패턴 내용과 같이 View와 ViewModel를 만들어 넣어 두었다. 그럼 이제 파일 업로드에 관련된 주요 코드를 살펴 보도록 하겠다.

먼저, Command 관련 코드에 대해서 보도록 하자.

FileUploadCommands.cs

public class FileUploadCommands : Commands

{

public static FileUploadCommands Current { get; private set; }

public static Command FileChoice { get; private set; }

public static Command FileUpload { get; private set; }

static FileUploadCommands()

{

Current = new FileUploadCommands();

}

public FileUploadCommands()

{

FileChoice = CreateCommand("FileChoice");

FileUpload = CreateCommand("FileUpload");

}

코드를 보면 Commands를 상속받고 있는 것을 볼 수 있을 것이다. 이는

HugeFlow.CommandPattern.dll를 참조해야지만 상속받을 수 있으며, 이렇게 상속을 받으면 커맨드(Command) 생성을 할 수있게 된다. 필자는 FileChoice와 FileUpload 두개를 정적으로 생성해 두었다. FileChoice는 파일 선택을 클릭했을때의 커맨드이고, FileUpload는 파일 업로드 클릭했을때의 커맨드이다. 이제 이 커맨드들을 View에서 어떻게 엮어 주고 있는지 코드로 보도록 하겠다.

ImagePanelView.xaml

<UserControl x:Class="PhotoLight.FileUploader.ImagePanelView"

…. 중간 생량 …

xmlns:Command="clr-namespace:HugeFlow.CommandPattern;assembly=HugeFlow.CommandPattern">

…. 중간 생량 …

<Button HorizontalAlignment="Right" VerticalAlignment="Stretch"

Width="70" Margin="0,0,5,0" Content="추가" Command:CommandService.Command="FileChoice" Command:CommandService.CommandParameter="Insert" />

<Button HorizontalAlignment="Right" VerticalAlignment="Stretch"

Width="70" Margin="0,0,5,0" Content="삭제" Command:CommandService.Command="FileChoice" Command:CommandService.CommandParameter="Delete" />

</UserControl>

위 XAML코드를 보면 먼저 UserControl 엘리먼트(Element)에 CommandPattern 어셈블리를 설정을 해준다. 그래야 XAML코드에서 Command를 엮을 수 있기 때문이다. 필자는 추가버튼과 삭제버튼 컨트롤을 만들어 아까 위에서 지정한 FileChoice라는 커맨드를 엮어 주었다. Command:CommandService.Command에 미리 만들어 두었던 커맨드 이름을 지정해주면 되는 것이다. 그리고 필요에 따라 매개변수(Parameter)도 같이 지정 할 수가 있는데, 이는 Command:CommandService.CommandParameter에 문자로 지정해 줄 수 있다. 필자는 매개변수로 Insert, Delete라고 지정해 주었다. 이제 이 커맨드를 어디서 어떻게 받는지 알아 보자.

ImagePanelViewModel.cs

public ImagePanelViewModel()

{

FileUploadCommands.FileChoice.Executed += new EventHandler<HugeFlow.CommandPattern.ExecutedEventArgs>(FileChoice_Executed);

FileUploadCommands.FileUpload.Executed += new EventHandler<HugeFlow.CommandPattern.ExecutedEventArgs>(FileUpload_Executed);

}

ImagePanelViewModel이라는 클래스는 ImagePanelView.xaml의 ViewModel이다. ImagePanelViewModel의 생성자에서 커맨드 이벤트를 생성해 주었다. 위에서도 말했듯 커맨드는 전역에서 사용되어 질수 있으므로 ViewModel에 이벤트를 엮을 수 있다. 이제 커맨드를 어떻게 사용해야 할지 감이 왔을 것이다. 그렇다고 커맨드를 너무 난발하지는 말자. 즉, 무조건 커맨드를 만들지 말자는 애기이다. 예를들면 View에서 Visibility를 Collapsed 또는 Visible 하는데 커맨드까지 만들지 말자는 애기다. 이런건 View에서 형태만 바끼는 것이기에 View쪽에서 처리하는게 좋다. 꼭 이점을 주의해서 커맨드를 사용하길 바란다.

다음으로 파일업로드 코드를 살펴보도록 하자.

UploadAgent.cs

public void UploadFile()

{

if (file != null)

{

byte[] buff = new byte[4 * 4096];

int readbytes = this.file.FileStream.Read(buff, 0, buff.Length);

if (readbytes != 0)

{

this.sent += readbytes;

if (this.sent == this.total)

isLast = true;

FileUploadData filedata = new FileUploadData()

{

FileName = file.FileName,

FileData = buff,

DataLength = readbytes,

IsFirst = isFirst,

IsLast = isLast,

GroupName = file.GroupName

};

client.SaveFileAsync(filedata);

isFirst = false;

file.Uploaded = this.sent;

}

else

{

file.FileStream.Dispose();

file.FileStream.Close();

client.ChannelFactory.Close();

}

UploadFile메소드는 WCF서비스에 파일을 업로드하는 메소드이다. 코드를 보면 파일스트림을 읽어, 이를 쪼개서 서비스에 호출을 하고 있음을 알 수 있다. 서비스 호출후 Completed가 일어나면 에러가 없으면 다시 UploadFile메소드를 호출하여 아직 다올리지 않은 파일스트림이 있는지 체크후 다시 서비스를 호출한다. 이렇게 반복되서 파일업로드 진행바에 값을 계속해서 바꿔주게 되는 것 이다. FileUploadData클래스는 서비스에서 생성한 클래스로 업로드를 요청할 때 매개변수(Parameter) 사용이 된다. 즉, 이 클래스에 업로드파일 정보를 지정한후 SaveFileAsync를 호출하고 이 매개변수로 FileUploadData를 지정하면된다.

이렇게 해서 간단하게 실버라이트에서 파일 업로드 관련 코드를 알아 보았다. 그럼 이제 WCF서비스에서 어떻게 처리하는지 알아 보도록 하자.

[월간마소 8월호] Silverlight Programming -포토라이트(PHOTOLIGHT) 만들기 3

drum-83 — Wed, 05 Aug 2009 00:30:56 +0900

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(PHOTOLIGHT)편]

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

ㅁ Photo Light 파일업로드 구현

웹프로젝트에서 WCF파일을 하나 생성하자. 필자의 경우 아래 그림과 같이 FileUploadService 와PhotoViewService 두개를 만들어 두었다.

[ WCF Service 구성 내용 ]

PhotoViewService는 나중에 PhotoLight에서 사용되어 질 서비스이다. 이렇게 서비스 만들었다며

Web.config파일에서 endpoint의 바인딩을 basicHttpBinding로 지정해 주어야 한다. 이유는 실버라이트에서는 basicHttpBinding만을 지원하기 때문이다. 꼭 기억해 두어 나중에 삽질을 피하자!

이제 WCF서비스 코드를 살펴보자.

FileUploadService.cs

[OperationContract]

public void SaveFile(FileUploadData file)

{

provider.SaveFile(file);

}

FileUploadProvider.cs

public void SaveFile(FileUploadData file)

{

string uploadDir = CreateDirectory(file.GroupName);

string fname = file.FileName;

if (file.IsFirst)

{

if (File.Exists(Path.Combine(uploadDir, fname)))

File.Delete(Path.Combine(uploadDir, fname));

}

FileStream stream = File.Open(Path.Combine(uploadDir, fname), FileMode.Append);

stream.Write(file.FileData, 0, file.DataLength);

stream.Close();

if (file.IsLast)

{

CreateThumbanil(uploadDir, fname, file.GroupName);

CreateDeepZoomFile(uploadDir, fname, file.GroupName);

}

SaveFile메소드는 실버라이트에서 사용될 수 있도록 OperationContract라는 어트리뷰트를 적어주어야 한다. 해당 메소드는 FileUploadProvider클래스의 SaveFile메소드를 호출하고 있다. 실제 파일업로드가 처리되는 메소드는 FileUploadProvider클래스의 SaveFile메소드이다. 코드를 살펴보면 해당 파일정보가 올라오면 지정한 루트폴더에 파일을 저장한다. 그리고 파일이 완전히 다올라 왔는지 IsLast속성을 체크를 해서 파일이 다올라오면 썸네일 이미지와 DeepZoom파일을 생성을 한다.

- Deep Zoom Composer API 활용

업로드된 이미지파일을 딥줌(DeepZoom)파일로 변환하기 위해서는 DeepZoom Composer API를 이용해야 하는데, 이를 사용하기 위해서는 먼저 서버에 DeepZoom Composer를 설치를하고,

DeepZoomTools.dll 를 프로젝트에 참조 추가를 해야한다. 참조를 하게 되면 ImageCreator라는

함수가 있는데, 이 함수를 이용해서 간단하게 딥줌파일을 생성 할 수 있다.

DeepZoomHelper.cs

public void CreateDeepZoomImage()

{

ImageCreator imgCreator = new ImageCreator();

imgCreator.ImageQuality = 0.95;

imgCreator.TileSize = 256;

imgCreator.TileOverlap = 1;

imgCreator.Create(ImgageFileName, SavePolder);

}

위 5줄의 코드면 딥줌파일이 생성이 되는 것이다. ImageCreator함수를 생성을 하고, ImageQuality 속성과 TileSize 속성, TileOverlap 속성만 지정해주었다. 이 속성들은 아래와 같다.

- ImageQuality 속성을 0에서 1 사이의 값으로 세팅하며, 보통 0.95 정도로 지정한다.

- TileSize 속성은 딥줌파일의 이미지 타일의 크기를 지정한다.

- TileOverlap 속성은 이미지들의 Overlap정도는 지정한다.

Create함수를 통해 딥줌파일을 생성을 하는데, 첫번째 매개변수는 파일명(실제파일의 경로)이며, 두번째 매개변수는 저장되어질 디렉토리경로를 지정하면된다.

이렇게 해서 대략적으로 파일업로드 어플리케이션 동작, 코드구현부분과 WCF서비스에서 처리되는 부분에 대해 알아 봤다. 이제 Photo Light 어플리케이션에 대해 알아 보도록 하자.