닷넷 게시판 만들기 Extra Part : 한줄 메모장 만들기

안녕하세요. 
잠시 쉬어가는 의미에서 Extra Part 를 준비해봤습니다. ^____^

여러분들은 이 강의를 통해 공부하면서 스스로 프로그램을 만들 수 있을지 생각해 보셨나요?

닷넷의 기초 문법을 수치로 따져서 100개가 있다고 합시다.

이 100개를 모두 다 마스터를 한 후에야 프로그램을 만들 수 있겠다. 라는 생각은 하지마셨으면 합니다. 100개중 5개의 문법을 자기것으로 만들었다면, 그 안에서 어떤 것이 나올 수 있는지 스스로 고민을 해보셨으면 합니다. 사실 질리거든요. 책 한번 펴보세요. 얼마나 질립니까? ^^

강의는 아직까지 가야할 길이 남아있지만, 우리가 다루었던 것을 이용해서, 한줄 메모장을 한번 만들어보도록 하겠습니다.
강의라는 것이 원래 전달하는 사람이 마음대로 진행해버리기 때문에 이 글을 읽으며 따라하시면서 꼭 제 소스를 참고하지 마시고 스스로 직접 타이핑 해보시기 바랍니다.
소스를 제시해드리기 전에 어떤 과정이 필요한지는 제가 힌트를 드리도록 하겠습니다.

1. 화면 구성(디자인)
2. 프로그램 처리단계 - 필요한 자료는?
3. 프로그램 처리단계 - 자료의 저장/로드 방법은?
4. 프로그램 처리단계 - 자료의 출력방법은?

일단 무엇이든지 프로그램을 만드는 목적과 계획이 있어야겠죠?
제 머릿속에 떠오르는 한줄 메모장의 구성을 대충 그려보겠습니다.

(마우스라서 줄긋기가 어렵네요~)

그림처럼 빨간색 1,2,3은 입력이고, 파란색 4,5,6은 출력입니다.

빨간색 1번은 작은 텍스트로, [이름], 2번은 긴 텍스트로 [한줄 메모]가 되겠구요. 그리고 3번은 저장하는 버튼이겠지요?

파란색 4번은 작성된 메모의 이름, 5번은 한줄 메모내용, 6번은 작성된 시간을 출력하려고 합니다.
이제 이것을 순수 HTML로 만들어 봅시다. 디자인을 구성하는 것이니 이부분은 디자인을 하는 디저이너의 역할이 더 중요하겠네요.

위의 그림과 비슷하게 한번 꾸며봅시다.

[디자인 예시]

1. 입력은 테이블로 구성하여, 좌측부터 3개의 셀(<td>)로 대략 칸을 맞춥시다.
2. 출력도 입력처럼 테이블로, 3개의 셀로 하나하나씩 위에서 아래로, 내림차순(최근이 먼저)으로 출력하도록 합시다.
3. 파일명은 memo.aspx 로 정하기로 합시다.
4. 입력받는 텍스트인 이름(id=name), 한줄메모(id=memo)는 서버컨트롤로 만듭니다.
5. 저장하는 버튼 역시 서버컨트롤을 만들고, onserverclick 이벤트 이름은 Memo_Save 로 합시다.

이 정도면 되겠죠? 다들 직접 코딩해서 폼을 구성해봅시다. 그리고 출력 테이블은 마치 데이터가 있다고 가정해서 일단 아무값이나 넣도록 해요.

제 디자인은 위의 그림처럼 나왔습니다. ^^

다시 말씀드리지만, 직접 타이핑해주시기 바랍니다. 소스는 제공되지 않습니다!
이게 다 여러분들을 위한 것이니 너무 노여워 마세요~~

혹, 서버컨트롤(우리가 배운 HtmlForm, HTML 서버컨트롤)을 만드는 방법이 기억나지 않는 분들에게 시간을 단축시켜드리기 위해 입력폼 부분의 소스는 다음과 같습니다.

<form runat="server">

.. (생략)

<!-- 입력 -->
<table width="600" style="border-collapse:collapse; border:1 solid slategray;">
<tr align="center">
<td width="100"><input type="text" size="8" id="name" runat="server"></td>
<td width="400"><input type="text" size="58" id="memo" runat="server"></td>
<td width="100"><input type="submit" value="메모저장" runat="server" onserverclick="Memo_Save"></td>
</tr>
</table>

.. (생략)

</form>

<input type="submit" runat="server">가 있기 때문에 <form runat="server">로 해줘야 되겠죠?
또한 태그에 붙은 각종 알 수 없는 속성들은 디자인 요소일 뿐이니까 너무 신경쓰지마세요~

1. 화면 구성(디자인)
2. 프로그램 처리단계 - 필요한 자료는?
3. 프로그램 처리단계 - 자료의 저장/로드 방법은?
4. 프로그램 처리단계 - 자료의 출력방법은?

이제 프로그램 코드로 입력되는 값을 받고, 저장을 해야 하는데요.

우선적으로 고려해야 할 점이 있습니다. 한줄 메모의 자료 형식부터 한번 볼까요?

우리가 만들 프로그램의 데이터 출력은 이름/메모/작성일시 이렇게 3개죠? 그런데 사용자로부터 입력은 2개입니다. 그렇다면 작성일시는 어디에서 가져와야 할까요? 말 그대로 작성된 그 시간을 저장하면 되므로, 작성일시는 사용자에게 입력을 받을 필요가 없이 서버의 현재 시간을 저장하면 됩니다.

정리하면, 필요한 자료는 사용자에게 입력받는 이름(id="name"), 한줄메모(id="memo"), 자동으로저장하는 작성일시 이렇게 3개입니다.

1. 화면 구성(디자인)
2. 프로그램 처리단계 - 필요한 자료는?
3. 프로그램 처리단계 - 자료의 저장/로드 방법은?
4. 프로그램 처리단계 - 자료의 출력방법은?

이 프로그램의 핵심이겠죠? 자료는 어떻게 저장할 것이고, 불러올 것인가?

일반적으로 자료를 파일(File)로 저장하는 이유는 서버가 다운되거나 재시작 되어도(하드디스크와 같은 보조기억장치에) 저장된 자료를 불러와서 최신의 상태를 유지하기 위해서입니다.

우리는 이미 방문객 카운터를 만들면서 MSDN에서 찾아쓰는 방법을 해봤었는데요, 이번 Extra Part는 "우리가 이 때까지 공부한 것으로 결과물을 만드는 목적"이기 때문에 파일을 이용해서 저장/로드를 하겠습니다.

차후에 우리가 배울 데이터베이스라는 저장 방식이 있는데, 파일을 이용하시다가 데이터베이스를 이용하시면 아주 편리하다는 것을 느낄 수 있을 거예요. 그러나~ 좀 귀찮고 어려운 것도 해봐야겠죠? 그리고 아직 데이터베이스는 다루지 않았기 때문에, 여기까지만 이야기 하겠습니다.

그렇다면 파일로 저장할 것들은 무엇인가요? 하나의 한줄 메모에는 총 3개의 자료가 있겠죠?

이름
한줄메모내용
작성일시

이것을 파일로 저장을 하는데, 하나의 메모당 1개로 묶어진다고 생각하면 되겠네요.

일반적으로, 지금처럼 항목을 묶어서 파일로 저장할 때는 구분자(Seperator)를 임의로 정해서 넣어주면 편합니다. 예를들어서, 다음처럼 말이죠.

홍길동_안녕하세요? 홍길동입니다._2011-01-27
김현우_현우입니다._2011-01-26
오우삼_감독입니다. 영화 많이 봐주세요!_2011-01-26

빨간색 언더바(_)가 보이나요? 지금은 구분자로 _ 로 잡아봤는데요. 이렇게 차곡차곡 파일로 저장한 후에, 불러올 때 각 라인별로 _ 를 기준으로 잘라서 자료를 편하게 사용할 수 있겠습니다.

그런데... 문제가 있을 수 있네요. 만약에 이름이나 내용, 즉 사용자가 입력하는 란에 언더바를 입력했다면?

김현우_현우_입니다._2011-01-26

언더바는 키보드로 입력할 수 있는 문자죠?
저렇게 되면, [김현우]가 이름, [현우]가 메모내용, [입니다.]가 작성일시로 잘못 읽어오게 됩니다. 뒤에 남은 자료도 어떻게 될지 모르게 되겠구요.

그러므로 구분자를 사용하실 때는, 일반적으로 사용자가 키보드로 입력할 수 없는 문자를 지정하도록 합니다. 또는 규칙을 하나 주는거죠. 꼭 1 byte 만큼 이라는 법은 없으니까요.

_#_
!@!
*%*

좀 없어 보이는(?) 무식한 방법인가요? 그러나, 이런 방법이든 저런 방법이든 우리 초보들은 괜찮습니다. 지금 우리에게 필요한 것은 결과물을 직접 우리 손으로 내어보고, 문제점이 발생되면 더 좋은 방법이 있을까 고민하는 재미를 즐기는 것이라는 것!

그렇다면 하나 정하죠. 구분자를 _#_ 이걸로 하겠습니다.

다시 생각해보도록 해요. 이름/메모/작성일을 _#_ 구분으로 저장. 1개는 저장됐다고 치구요. 다음 자료는 어떻게 할까요? 다음줄에 역시 마찬가지로 저장하면 되겠죠? 그런데.. 우리는 이것들을 최신 메모 순으로 출력해야 합니다. 가장 쉬운 방법은 저장할 자료를 제일 위로 올려버리면 되겠네요. ^^

여러분들 마음입니다~ 일단 결과를 위해서 이런 저런 고민을 해보시기 바랍니다.

1. 입력값 '이름(id=name)'은 버튼의 이벤트 메서드에서 name.Value 로 읽어올 수 있다.
2. 입력값 '메모내용(id=memo)'역시 memo.Value 로 읽어올 수 있다.
3. 작성일자는 static 프로퍼티인 System.DateTime.Now 를 이용하자.
4. 이 3개의 값을 _#_ 구분자로 쭉 이어서 저장한다.
5. 저장에 사용하는 파일명은 memo.txt 로 한다.
6. 최근에 작성된 메모가 처음에 위치하기 위해, 기존의 자료를 모두 읽어놓고, 금방 작성한 메모 뒤에 읽어놓은 자료를 붙인다.

이 정도면 자료가 잘 저장되겠죠?

우리가 예상하는 memo.txt 자료는 대충 다음처럼 되겠네요.

홍길동_#_안녕하세요? 홍길동입니다._#_2011-01-27
김현우_#_현우입니다._#_2011-01-26
오우삼_#_감독입니다. 영화 많이 봐주세요!_#_2011-01-26

위의 예제처럼 파일에 메모를 저장해보도록 합시다~

파일을 다루는 클래스는 해보셨듯이, System.IO 에 있는 File 클래스입니다.

예전에 카운터에서는 기존의 자료를 엎어버리는 메서드를 이용했죠?
지금은 기존의 자료를 유지해야 한다는 것을 생각해주시면서 우리가 계획한 대로 저장하기 위해 MSDN 검색을 직접 해보도록 합시다.

잘 안되시면 다음의 팁을 좀 참고하세요. (드래그하시면 보입니다.)

꼭 직접 해보신 후에 어려우시면 참고하세요.

1. File.ReadAllText(string 경로) 메서드로 기존 자료를 읽어옵니다.
2. 새로운 메모자료는 변수 + "_#_" + 변수 + "_#_" + 변수 처럼, 문자열 결합을 이용하면 됩니다. 현재 프로그램에서는 변수는 이름, 메모, 현재날짜가 되겠죠?
3. 메모를 저장할 때는 새로운자료에 개행문자(\n 또는 Environment.NewLine)를 붙여준 후, 기존 자료를 저장합니다. 그래야지 위의 노란색 박스처럼 줄을 구분으로 메모가 저장되겠죠?

자료 저장이 잘 되었나요? 죄송한 말씀을 드리자면, 이건 될 때까지 하셔야 됩니다.
너무 가혹한가요?

안되시면 다음으로 넘어가셔도 자료가 없기 때문에 힘들어요. ㅜㅜ

1. 화면 구성(디자인)
2. 프로그램 처리단계 - 필요한 자료는?
3. 프로그램 처리단계 - 자료의 저장/로드 방법은?
4. 프로그램 처리단계 - 자료의 출력방법은?

그러나.. ^^  1시간 이상 삽질해보신분만!!

소스는 드리지 않구요. 좀 부끄러우시겠지만, memo.txt 파일에 실제 자료가 잘 저장된 것 처럼 가정하고 직접 내용을 넣어봅시다. (-_-)

저도 여러분들이 직접 하시기 어렵다고 생각합니다. 그러나 꼭 직접 넘기셔야 합니다. :) 화이팅!

마지막 단계입니다. 이제 메모 내용을 뿌려주는 일만 남았네요.
제가 작성한 저장하는 프로그램의 메모는 다음처럼 막~ 넣어서 저장했습니다.

aasda1_#_asd21124asdsad_#_2011-01-27 오후 5:18:56
aasda_#_asd21124_#_2011-01-27 오후 5:18:49
1224214_#_12d2d2d1241_#_2011-01-27 오후 5:18:46
111_#_dasdsadasd12d12_#_2011-01-27 오후 5:18:42
dasd_#_dasdsd_#_2011-01-27 오후 5:18:38

다행히 계획했던 대로 잘 들어가는군요. :)

이 자료는 어려분들이 [ 3. 프로그램 처리단계 - 자료의 저장/로드 방법은? ] 단계에서 이미 파일의 내용을 하나의 변수로 가지고 있을거예요. (그래야 파일로 저장이 될 수 있었겠죠?!)

string 형으로 저장된 이 파일을 어떻게 해야 잘 자를 수 있을까요?
일단은 크게 잘라봅시다.

1) 메모의 구분 => 개행문자 (\n)

그리고 하나하나의 메모는 다음을 기준으로 잘라야 되구요

2) 이름/메모내용/작성일시의 구분 => _#_

System.String 클래스에는 문자열에 관련된 유용한 메서드가 많습니다.
우리가 구분자로 항목을 이어줬는데, 이것을 다시 자르는 관련 메서드가 있죠.

바로 String.Split() 이라는 메서드입니다. (링크를 클릭해서 메서드의 목록과 설명을 봐주세요)

여러가지 오버로드 된 메서드(메서드의 이름[목적]이 같고, 형과 갯수가 다른 메서드를 묶은 것)가 보입니다. 넘어온 char (한 문자) 또는 char[], string[] (문자배열)을 기준으로 구분된 문자열을 string[] 배열로 리턴하는 기능을 가지고 있습니다. (자세한건 링크에서 MSDN 예제롤 참고하세요)

string a = "HAHA_THIS_IS_MY_HAT ";
string[] arr = a.Split('_');

이렇게 되면 string[] 배열 arr은 총 5개의 값인 [0]~[4] 까지 HAHA,THIS,IS,MY,HAT 이렇게 각각 들어가게 됩니다. arr[0]은 HAHA, arr[1]은 THIS, 그리고 arr[4]는 HAT 문자열이 들어가게 됩니다.

정리해서, 메모 전체내용을 줄(line)로 자르고 자른 라인을 한번 더 각각의 항목(이름,메모,작성일자)으로 잘라주면 우리가 원하는 결과를 차례대로 가져올 수 있겠죠?

이것을 디자인페이지에 맞게 출력을 하면 됩니다.


이렇게 해서 텍스트파일을 이용한 한줄 메모장을 만들기 위해 작성된 소스는 다음과 같습니다.

memo_한줄메모소스.zip

소스에는 과정에 대한 설명을 넣었습니다. 또한 아직 다루지 않은 서버컨트롤인 WebForm을 사용한 예제가 있습니다. 일단 어떻게 되는지만 봐주시면 됩니다.(HtmlForm, WebForm의 사용상의 차이점은 그렇게 다르지 않아요) 

그리고 내용 출력 부분 역시 단순한 string 형태로 뿌려줬습니다.

이제 자신만의 방명록을 만들어보는데 도전을 해보시기 바랍니다.
우리가 만든 한줄 메모장이나, 방명록이나, 형식만 다르지 다 똑같지 않을까요?

쉬어가는 코너(?)인데 머리를 더 싸매게 해드린 것 같네요. ㅜㅜ
그러나 다 어려분을 위해 어쩔 수 없었다는 핑계를 대면서, 저는 다음 강의에서 뵙겠습니다.

지금 여러분들에게는 결과물이 중요할 때입니다. 최적화니, 소스간소화니 뭐 그런거는 나중에 알아서 다 되거든요. 재밌게 즐기시며 차근차근 밟아나가시길 바랍니다.


[추가]
본문에서 개행문자를 \n 이라고 했습니다.
운영체제가 리눅스/유닉스 계열은 \n 하나의 문자로 가능합니다만, 윈도우에서는 \r\n 이렇게 두 개의 문자를 붙여야합니다. 

앞서 하늘색 박스에서의 설명에 언급한 Environment.NewLine 이라는 프로퍼티는 이 개행문자를 표현해주는데요. 설명에 따르면 개행문자를 운영체제에 맞추어서 알아서 출력합니다. (리눅스/유닉스에서는 닷넷을 공식적으로 지원하지는 않지만 모노프로젝트라는 곳에서 제공하는 툴로 윈도우 이외의 운영체제에서 사용 가능합니다.) 즉, 윈도우에서는 \r\n 이 출력될 것이고 타 운영체제는 \n 이라 출력됩니다. 참고해주세요.

그래서 윈도우 기본 프로그램인 메모장(notepad)으로 memo.txt 를 열면 \n 으로만 개행했으므로 다음줄로 넘어가지 않게 보일겁니다. 대신 Editplus 등, 다른 에디터 프로그램은 이를 개행문자로 인식해서 다음줄로 보여지게 되는 것입니다.