닷넷 게시판 만들기 Part 27 - 디자인, 코드 분리와 라이브러리

1. 닷넷 개발환경 준비, 테스트
2. 닷넷 알아보기 [7/7]
3. asp.net 컨트롤 [10/10]
4. 데이터베이스(DB) [7/7]
5. 닷넷 게시판을 만들어보기 전에.. [1/..]

# 이번 5장은 4장까지 하신 분들에 맞게 내용을 맞추었습니다.


이번 5장은 이 강좌의 목적인 "닷넷으로 게시판을 만들기" 전에 참고해야 할 것들을 몇 가지 알아보기로 하겠다.

그 첫 시간으로, asp.net 에서 프로그래밍 코드와 디자인을 분리하는 전략에 대해 다루려고 한다. 1~4장까지 모든 예제는 .aspx 파일에서 C# 코드를 넣어 프로그램 처리 예제를 수행하였다. 그리고 문제 없이 잘 작동했다. 그러나 실제 보여주는 태그문과 함께 코딩되어 있으므로 복잡해 보이는 경향이 많다.

같이 해봐서 알겠지만 <ASP:Label ..  /> 등의 서버컨트롤은 모두 .aspx 파일에 배치한다. HTML 처럼 결과물을 보여주는 파일이 .aspx 파일이며 이를 일반적으로 '디자인 페이지'라고 한다.

이 강의에서는 사용하고 있지 않지만 asp.net 개발을 쉽게 해주는 Visual Studio 같은 경우에는 우리가 한 것 처럼 .aspx파일에 프로그래밍 코드를 넣을 수 있으나 기본적으로 분리되어 있다. 예를 들어 defaut.aspx 파일에 각종 컨트롤을 배치해서 버튼에 클릭이벤트를 넣으려고 하면 미리 준비된 default.aspx.cs 파일에 프로그래밍 코드를 분리하여 넣는다. 끝에 확장자가 .cs 인 것은 닷넷에서 사용하는 언어인 C# 의 소스파일이다.

이렇게 코드를 분리하는 이유는 디자인과 코드를 명확하게 분리하여 웹디자이너와 분업을 쉽게 하고 프로그램을 모듈화 하여 후에 유지보수(업데이트,버그 수정 등)를 수월하게 하기 위해서이다.

asp.net 에서 코드를 분리하기 위한 방법은 3가지가 있다.
하나는 앞서 말한 Visual Studio가 하는 방법으로 aspx.cs 파일로 만들어서 필요한 프로그래밍 코드를 넣는 것이다. 그리고 다른 방법은 asp.net 에 예약된 "/app_code" 폴더에 넣는 것이다.
이 두가지 방법은 aspx파일에서 이 코드 파일을 지정하게 되는데, 자동으로 컴파일을 해서 실행한다. 컴파일을 하지 않아도 되기 때문에 만들 때와 수정할 때에 꽤 편하다. 세번째는 특정한 .aspx 처리 이외의 목적으로 사용하는 "단독 라이브러리" 형식인데 이것은 .dll 로 컴파일 하여 "/bin"폴더에 넣어 사용하는 것이 일반적이다.

정리해보면,

1. "test.aspx" 디자인 파일을 예로 들면 "test.aspx.cs" 처럼 .cs 확장자를 붙여 test.aspx에 해당하는 코드를 넣어 사용하는 것이 일반적.

2. /app_code 폴더에 모든 .cs 파일을 뭉쳐놓아 프로그램 코드를 처리. 단, aspx 파일의 컨트롤을 다루기 불편함.

3. /bin 폴더에 공통으로 사용하는 라이브러리를 컴파일하여 .dll 파일로 저장 (프로그램 코드가 노출되지 않는다)

다시 말하지만, 앞에 말한 것 처럼 코드 분리를 하지 않고도 .aspx에서 문제 없이 코딩이 가능하다. 단지 공통적으로 사용하는 기능을 클래스로 만들지 않으면("모듈화" 한다고 한다) 매우 불편하다. 5개의 aspx파일에 공통적인 기능을 사용한다고 생각해보자. 하나를 만들어서 .aspx 파일에서 가져다 쓰는게 유리하다. 수정할 때 하나만 수정하면 모두 다 함께 적용되기 때문이다.

코드파일을 컴파일을 하지 않고 분리하는 예제를 해보자.

첫 예제: 1번 항목 (behind1.aspx.cs 분리 형식)

1. 디자인페이지(.aspx) 구성 - behind1.aspx

서버컨트롤인 텍스트박스(TextBox) 한 개와 버튼(Button) 한 개를 배치하자. 그리고 다음줄에 출력을 하기 위한 레이블 컨트롤(Label)을 하나 넣자. 버튼에는 클릭이벤트(Button_Click)를 지정한다. 클릭하면 텍스트박스에 입력한 내용을 레이블에 출력하자.

디자인페이지 behind1.aspx 은 위와 같다. 첫 줄을 잘 보자. 필수 속성인 Inherits 속성과 CodeFile 속성을 지정했다.(참고: 대소문자 구분없음)

1) Inherits 는 "네임스페이스.클래스" 이름이다. 여러분들 마음대로 지으면 되지만 이것은 소스 파일의 클래스(Class) 이름과 매치되어야 한다. 예제는 네임스페이스가 지정되지 않았다.

2) CodeFile 은 해당 클래스가 있는 aspx.cs 파일 경로이다. 현재의 aspx 파일과 매치시켜주는 것이 일반적이다. 폴더를 지정가능하기 때문에 꼭 같은 폴더에 있을 이유는 없다. 또한 전혀 다른 파일명으로 지정해도 파일이 있기만 하면 상관없다.


2. 프로그램 코드(.cs) 구성 - behind1.aspx.cs

.aspx 파일에서 지정한 대로 behind1.aspx.cs 파일을 만들어보자. 예제 코드상 이 파일은 같은 폴더에 존재하며 그저 클래스만 지정하면 된다.

닷넷 소스(.cs)파일은 자신이 어디에서 사용되는지 모른다. 그러므로 "넌 asp.net 에서 사용될거야~" 하고 지정해야 한다. 그러므로 System.Web.UI.Page 클래스를 상속해야 한다.

1~4 번째 라인은 잘 아시겠지만 닷넷에서 클래스를 사용하기 위한 네임스페이스를 참조한다.
6번째 라인, 클래스 선언에서 Behind 라는 이름으로 aspx 에서 지정한 Inherits 와 동일한 클래스 이름으로 지정한다. 중요한 것은, partial 키워드를 클래스명 앞에 붙여 이 클래스가 asp.net 자신을 호출해서 사용하는 녀석과 연관이 있다고 지정한다. 그리고 끝에 System.Web.UI.Page 클래스를 상속하는 의미인 닷넷 문법인 "클래스 : 상속할 클래스 " 형식을 붙여준다.

이제 이 클래스에서 사용할 코드를 마음껏 넣어주면 된다.
예제로 버튼 클릭을 하면 Label 컨트롤에 입력한 값을 넣기로 했다. 9번째 라인부터가 클릭 이벤트의 선언인데 aspx파일에 바로 넣는 방법과 다르지는 않지만, Page를 상속하고 있기 때문에 이 메서드의 접근한정자를 protected 로 해준다. (또는 그보다 더 오픈된 접근한정자인 public으로 가능) 단, Page 클래스에서 기본적으로 실행되는 Page_Load() 등의 메서드는 예외이다.

두번째 예제: 2번 항목 (/app_code 에 .cs 파일넣기)

1. 디자인페이지(.aspx) 구성 - behind2.aspx

behind2.aspx 소스파일은 위와 같다. 첫 줄을 잘 보자. 첫 번째와 다르게, Inherits 속성만 지정했다. 의미는 동일하다.

2. 코드파일(.cs) 구성 - /app_code/behind.cs

첫 번째 프로그램 코드와 비슷하다. 좀 더 복잡해졌다.
이 파일은 7번째 라인에서 partial 을 붙여주지 않아도 상관이 없다. 현재의 Page 를 상속하기 대문이다. 대신 여기에서는 9~10번 라인에 나와 있듯이 protected 로 aspx 파일에 사용된 모든 서버컨트롤을 정의해야 하는 불편함이 있다. 지금은 2개의 컨트롤 밖에 없지만 - 이 프로그램 구조상 버튼은 직접 사용하지 않기 때문에 제외가능 - 수십개의 컨트롤이 aspx 에서 사용된다면..? 많이 불편할 것이다. 편법으로 컨트롤을 직접 찾아 - Page.FindControl("control_id") 메서드 이용 - 사용할 수 있긴하나, aspx.cs 보다 불편함은 마찬가지이다.

마지막 예제:  3번 항목 (.cs 파일을 컴파일한 .dll 파일을 /bin 에 넣기)

aspx 파일에서 버튼 이벤트 따위를 지정하는 1,2번 예제와는 다르게 공통 라이브러리용도로 사용하는 방식인 세 번째 예제는 앞서 언급했지만 특정 aspx 페이지만의 용도가 아니기 때문에 주로 독립적인 처리를 위한 프로그램 코드로 사용하게 된다.

가장 크게 다른 점은 컴파일 과정이 필요하다는 것이다. Visual Studio 를 사용한다면 자동으로 컴파일을 해주기 때문에 편리하다. 다행인 것은, 필자가 쓰는 Editplus 의 기능으로 특정 명령을 쉽게 수행해주는 기능이 있다. 이 기능으로 한번 지정한 후 단축키로 사용하면 그만이다.

.NET Framework 를 설치하면 닷넷 개발시 필요한 컴파일러와 닷넷 실행시 필요한 라이브러리가 설치된다. 컴파일러의 위치는 "윈도우가 설치된 폴더" 에 "Microsoft.Net" 에 "Framework" 하위 폴더에 버전별로 설치된다.

예를 들면 다음과 같다.
(대부분 윈도우 XP 이상은 c:\windows 에 설치되므로 다음경로는 동일하다)

c:\Windows\Microsoft.NET\Framework\v2.0.50727

여기 폴더에 가보면 csc.exe 파일이 있다. 이 녀석이 컴파일러이다.

닷넷은 우리가 지금하고 있는 asp.net 뿐만 아니라 윈도우 창이 뜨는 윈도우 프로그램이 있다. 그리고 검은 창이 뜨는 콘솔(Console)형식의 프로그램이 있을 수도 있다. 이런 모든 프로그램은 이 csc.exe 가 컴파일을 하게 된다. 컴파일 옵션이 좀 다를 뿐이다.

우리가 다루는 asp.net 에서는 주로 컴파일을 하는 목적은 "라이브러리"라는 형식을 만들기 위해서이다. 예를 들어 4장의 DB연동시에 필요한 라이브러리를 만들고 싶다면 "연결/처리/종료"하는 클래스를 하나 만들어 이쁘게 컴파일 해서 컴파일 된 결과물인 ".dll" 파일만 들고 다니면 편하다. 파일처리를 모아놓은 라이브러리를 만들 수도 있고, 네트워크 쪽을 처리하는 자신만의 편한 라이브러리를 만들면 되겠다. 또한 다른 라이브러리를 다운로드 받더라도 소스가 제외된 .dll 파일과 Document 파일이 있다면 해당 라이브러리를 이용해 개발하는데 문제가 없다.

이 라이브러리는 꼭 asp.net 에서만 사용하는 용도이기 보다, 모든 닷넷 플랫폼에서 사용할 수 있도록 만드는 것이 좋다. (물론 100%는 한계가 있다. 플랫폼마다 각기 제한된 범위가 있기 때문에..)

컴파일 명령형식은 다음과 같다. 명령프롬프트(cmd.exe)를 이용해 csc.exe 파일이 있는 폴더로 이동해서,

prompt> csc_/t:library_c:\home\test.cs

#참고: 밑줄은 공백

이렇게 입력하면 test.cs 파일을 컴파일하여 test.dll 파일로 만들게 된다. 오류가 발생하지 않고 무소식이라면 컴파일이 성공한 것이다. 이 파일은 어디서든지 프로그램에서 코딩된 namespace를 선언하여 클래스를 이용하면 된다. 윈도우어플/실버라이트/윈도우모바일/윈도우폰 등과 같이 전용 코드가 사용되지 않아 플랫폼 제한이 없다면 말이다. 

Editplus 에서 컴파일 쉽게 하기

1. Editplus 의 도구(Tools) 에서 사용자 도구 설정을 실행한다.

2. 위의 그림처럼 나오면, "도구 추가"를 누르면 그림처럼 하나 생성된다.
총 4개의 입력칸인데, 첫 번째 칸은 csc 라고 표시되게 하고, 두번째 칸은 오른쪽에 [...] 버튼을 눌러 앞서 말한 csc.exe 파일의 경로를 지정한다. 세번째/네번재 칸은 그림처럼 입력해준다.

3. 이제 OK를 누른다. 앞에서 두번째 예제를 했던 Behind.cs 파일을 열고, Ctrl+(숫자)1 을 눌러보자. 두 번째 예제가 잘 실행되었었다면 컴파일이 문제 없이 잘 될 것이다.

.dll 파일을 확인하기 위해 /app_code 폴더에 있으므로 그 쪽으로 이동해보자. Behind.dll 파일이 존재할 것이다. 이렇게 Editplus 를 사용하면 컴파일시 타이핑 할 필요 없이 Ctrl+1 만으로 컴파일을 할 수 있다.

C# 프로그램 소스를 컴파일 하는 방법을 알아봤으니 라이브러리 코드를 작성해서 /bin 폴더에 넣은 후 두 번째 예제에서 사용한 Behind.cs 파일에서 해당 클래스를 호출해 보자. (aspx 파일에서도 호출이 가능하다)

예제 샘플로 데이터베이스에서 쿼리문을 실행하고, 그 결과를 DataTable 로 넘겨주는 라이브러리를 제작해보자. 4장 마지막에 다루었던 db5.aspx 파일을 참고하자. 쿼리문은 string 형 인수로 받기로 한다. 어떤 쿼리문이든 해당 쿼리문에 대한 결과를 DataTable 로 반환하는 것이 지금 만들 라이브러리의 목적이다.

db5.aspx 파일과 거의 동일하다. QUERY 문자열을 인수로 받은 것일 뿐이다. 소스 설명은 필요없으리라 생각한다. (연결문자열인 str_conn 은 당연히 여러분 DB서버 환경에 맞추어야 한다. 4장을 잘 수행했었다면 문제없을 것이다)

이 소스를 작성하여 /bin 폴더에 BehindSample.Database.cs 파일명으로 저장하자. 일반적으로 라이브러리 소스의 파일명은 "네임스페이스.클래스.cs" 형식으로 많이 사용한다. 파일명은 사실 의미가 없다. 실제로 코드에 정의된 네임스페이스.클래스가 중요하다.

#참고
예제를 위해 간단하게 작성한 라이브러리이기 때문에, 연결 문자열을 라이브러리 내에 그대로 넣었다. 일반적으로 DB연동 문자열 상수는 외부에서 읽어온다. 그 이유는 여러분들이 고민해보자.

컴파일 해보자. 오류가 발생하지 않았다면 /bin/BehindSample.Database.dll 파일이 잘 생성되었을 것이다. 

두 번째 예제에 실행을 위해 behind2.aspx 파일을 열고, 쿼리 결과인 DataTable 의 자료를 바인딩할 컨트롤인 DataGrid 를 하나 추가하자. Label 컨트롤인 lblResult 은 삭제하고 대체한다.

이렇게 txtName 에 쿼리문을 넣고 버튼을 누르면 dg1 에 출력이 되게 해보자.

클래스에 대해서는 여러번 사용해보셨기 때문에 따로 설명이 필요없을 것이다. 라이브러리를 사용하는 코드는 BehindSample 네임스페이스를 참조하고 Database 클래스를 인스턴스화 해서 메서드인 GetDataTable(string QUERY) 를 형식에 맞게 호출하자.
그리고 이 결과를 DataTable 로 받자.

/app_code/behind.cs 파일
(예제이기 때문에 프로그램상 발생할 수 있는 오류는 무시하기로 하자)

7번 라인에  컴파일한 라이브러리를 참조한다.
11번 라인처럼 Label 을 삭제하고 DataGrid 인 dg1 을 넣어준다.
16번 라인은 라이브러리 클래스를 인스턴스 화 한다.
17번 라인은 버튼 클릭시 DataGrid에 DataSource를 GetDataTable(string QUERY) 의 결과를 그대로 넣어준다. 텍스트박스의 내용이 우리가 입력한 쿼리문일 것이다. 그리고 dg1.DataBind() 를 해주어 자료를 바인딩하자.

실행이 잘 된다면 결과는 다음처럼 나올 것이다.

우리가 만든 이 라이브러리는 실제 윈도우 프로그램에서도 잘 작동한다. 

실무에서도 어떤 프로그램을 만들 때, 그것을 설계한 후 디자이너로부터 넘어온 디자인페이지(aspx)를 프로그래머가 적절하게 이벤트를 넣어주거나 서버컨트롤로 변경한 후 aspx.cs 에서 처리하게 된다. 그리고 컴파일 된 라이브러리를 필요시에 이렇게 땡겨 사용하여 완성한다.

이제 여러분들이 직접 이 예제를 첫 번째 소스에 적용시켜보자.
그리고 구구단 라이브러리 같은 뭐든지 당장에 떠오르는게 있다면 만들어서 직접 수행해보자. 기술은 자기 것으로 만들어야한다. 내공은 눈찜으로만 가질 수 있는게 아니다.

이번에 전달할 내용은 여기까지이다. 이 강의는 소개와 제시를 해줄 뿐, 가져가는 건 이 글을 읽는 여러분이다.


다음 시간에..