강좌 전 태오의 잡담>

드뎌 이루어질 것인가? 태오의 [셔틀랜드 쉽독] 기르기.. 는?
이번엔 블랙탄에 도전합니다. 제발.. 이번엔 기를 수 있기를... 오오... Plz

강좌 시작 >

이젠 본격적으로 디자인보기, HTML소스보기, 비하인드 코드 보기 등을 이용하여 각 컨트롤들에 대해 알아 보겠습니다.디자인 보기에서 도구 메뉴로 컨트롤을 추가하여 (이 부분은 여러분이 멋지게 멩그러 보세요) 폼을 구성하고, 소스보기에서 컨트롤의 속성을 바꾼후, 코드 비하인드 파일에서는 이를 제어하는 형태로 강좌를 진행 할까 합니다. 그래야 모든 이것 저것 다 써볼 것 같아서요..

HTML Server Controls Hierachy

HTML Server Controls Hierachy(Html 서버컨트롤 계층도)를 보면 최상위 Class인 Systme.Web.UI.Control로 부터 HtmlControl이 상속을 받으며, 각각의 Html Server Control들은 이 HtmlControl로 부터 상속을 받고 있다는 걸 알 수 있습니다.

이 계층도를 암기 할 필요는 없겠죠? 다만 구분의 기준은 <태그></태그>에서 </태그> - 닫는 태그가 필요하지 않는 HtmlInputControl과 그 쌍이 모두 필요한 HtlmContainerControl로 되어 있습니다.
이번 강좌는 그 첫날로 HtmlInputControl 중 HtmlInputButton과 HtmlInputCheckBox, HtmlInputFile 그리고 HtmlInputHidden Control들을 알아 보겠습니다.. (준비 되셨죠?)

여기서 잠깐...

Html 태그를 서버 컨트롤로 사용하려면 약간의 작업이 필요합니다. 그 작업은 두가지 방법으로 구분할 수 있습니다. 먼저 Html 요소를 하나 추가 해 보겠습니다.
다음은 Html 소스 보기에서 직접 코딩을 하여 생성된 컨트롤 입니다.

이를 디자인 보기에서 보게 되면... 다음과 같은 텍스트 컨트롤이 하나 생성 됩니다.

다음은 디자인 보기에서 HTML요소 중 TextField 하나를 추가 해보겠습니다. 디자인 보기에서 컨트롤을 추가하기 위해서는 특별한 기술이 필요 합니다. 그것은 바로 마우스 Drag&Drop 입니다.

요놈의 결과는

똑같죠? 똑같은 결과를 보여주기 위한 예제라고도 할 수 없는 쌩쇼였습니다...
근데 이 쌩쇼가 보여주려고 하는 것은 두 방법 모두 서버컨트롤이 아니라는 이야기 입니다. 이를 서버컨트롤로 바꾸어 사용하려면 그 방법 또한 소스에서와 디자인 보기에서 제어 할 수 있습니다. 소스에서는 runat = "server" 를 추가하면 해당 컨트롤을 서버 컨트롤로 사용할 수 있게 되며, 디자인 보기에서는 마우스 우측 버튼을 이용하여, 해당 컨트롤을 "서버컨트롤로 실행"을 실행하면 됩니다. 그런데 여기서 한가지 문제가 있는데 직접 소스보기에서 runat="sever"를 추가한 경우 이 컨트롤은 곧바로 코드비하인드 파일에 반영되지 않는 다는 것입니다. 그렇기 때문에 악꽁이는 또하나의 Skill인 마우스 우측버튼 클릭의 사용을 권장합니다. 이렇게 바뀐 HTML요소는 다음과 같이 그 모양이 바뀐답니다.

HtmlInputButton Control

바로 예제로 들어가 보겠습니다..

폼은 이렇게 완성 되었고, 소스보기에서의 소스를 보면서 몇가지 속성 및 script 부분을 추가해 주세요.

결과를 확인해 보세요. 관리자 계정으로 로그인하는 데 필요한 페이지와 비슷한 역할을 하는 폼이 완상 되었습니다. 여기서 한가지 더 추가하자면....
이 소스 중 script 부분을 코드비하인드 파일에 넣는 다면 더욱 좋겠죠? 코드의 분리란 바로 요런거라 할 수 있죠...
<script .... 부터 /script>까지를 삭제 한 후 코드비하인드 파일에 작성하면...

HtmlInputCheckBox Control

이번 예제는 HtmlInputCheckBox Control을 하나 추가 한 후 Button을 눌렀을 때 체크박스의 체크 유무를 확인 하는 예제입니다.. 디자인 보기 및 소스 보기에서 폼을 구성 한 후 button의 클릭 이벤트로 제어를 하는 예제 입니다.

휴~~ 이제 반 왔습니다.

HtmlInputFile Control

HtmlInputFile Control은 Html 태그의 input type = File과 그 생김새가 유사한 컨트롤 입니다. 그런데 이 컨트롤은 한가지 주의 할 점이 있습니다. 일반적으로 웹폼을 생성하여 Html 소스 보기를 하면 <form id="Form1" method="post" runat="server"> ~ </form>이 생성이 됩니다. 여기에 다음과 같이 enctype 속성을 하나 더 추가 해줘야 합니다.. 반드시 꼭...
< form enctype = "multipart/form-data" runat = "server"> ~~~</form>
이렇게 설정 해 주어야만 HtmlInputFile Control를 사용 할 수 있게 됩니다.

PostedFile Property : PostedFile속성은 업로드 할 파일에 대한 정보를 얻어 옵니다. PostedFile는 FileName, ContentLength, ContentType 등을 통하여 각 속성에 해당되는 정보를 받아 오며, SaveAs() 메소드를 통해 서버에 파일을 저장하게 됩니다..

HtmlInputHidden Control

이 컨트롤은 게시판이나 회원인증 프로그래밍을 해보신 분들은 많이 사용해보신 태그 중 하나 입니다. <input type = "hidden" ~~> 태그와 유사하며, 말 그대로 어떤 필요한 자료나 데이터 값을 사용자에게 보여 주지 않고 숨겨서 넘겨 주기 때문에 HTML에서와 같이 User Interface와는 관련이 없으며, 사용자와 서버간의 대화 (라운드 트립)에 필요한 아주 적으며, 보안이 유지 될 필요가 없는 부분의 자료를 보낼 때 주로 사용 됩니다. 여기서 보안이 유지 될 필요가 없다는 의미는 실제 웹브라우저 상에는 보이지 않으나, 소스 보기를 하게 되면 hidden으로 넘겨 지는 값이 보인 다는 의미 입니다. 그렇게 때문에 중요한 데이터는 hidden을 사용하지 않는 것이 통례입니다. 먼저 예제를 통해 이 컨트롤과 친숙해 진 후 설명을 드리겠습니다.

먼저 HTML 소스 보기에서 컨트롤을 생성하였습니다. 그리고 코드 비하인드 파일에서 컨트롤을 제어 하였습니다. 이 간단한 예제에 대한 로직은 보시면 한눈에 아시겠지만, hidden의 초기 값으로 "초기값"을 할당하였고, 여기에 텍스트 박스에 값을 넣게 되면 그 값이 hidden 값으로 들어가 span 태그 사이에 이 값을 출력해주는 예제입니다.

이 예제를 실행하여 Html코드로 랜더링된 소스를 보면,
<input type="hidden" name="__VIEWSTATE" ...>이 있는 걸 확인 하실 수 있습니다. 그리고 버튼을 클릭하면 초기에 할당 된 "초기값"이 출력 되고, 다시 한번 클릭을 하게 되면 텍스트 박스에 입력한 값이 출력되는 걸 확인 하실 수 있습니다.

자~ 그럼.. IsPostBack과 ViewState에 대해 알아보겠습니다. (Hidden보다 더 중요하답니다..)

1. IsPostBack이란: Boolean형의 결과값을 가지는 IsPostBack는 웹페이지가 한번 이상 클라이언트에 의해 호출이 되었는지(True), 아니면 처음으로 클라이언트의 호출이 이루어 졌는지(False)를 의미합니다.

2. ViewState이란:

사용자 상태 정보라고도 하는 이 개념은 서버의 부하를 줄여 주기 위한 기술 중의 하나로, 예를 들어 쇼핑몰에서 우리는 쇼핑을 즐기면 이 물건 저 물건들을 장바구니에 담고 있다가 이걸 구매하게 되는데 장바구니에 담은 물건들에 대한 정보를 서버측에 보내어 서버에서 처리하고, 클라이언트가 구매를 희망하는 순간 서버에서 장바구니에 담겨 있는 정보를 불러와 다시 요청에 응답하여 장바구니의 상품들을 다시 클라이언트에 뿌려 주고, 또 다시 클라이언트는 몇가지 맘에 들지 않는 물건들은 삭제하면, 서버에서는 목록을 삭제 해 주어야 하고 .....생략.... 최종 구매에 이르기까지 (휴~~힘들다) 서버와 클라이언트와의 대화는 끊임이 없이 계속 되는데 이렇게 하다보면 사용자가 늘어날 수록 아마 서버는 숄트레이크 동계올림픽 서버처럼 터져버릴 게 확실합니다. 아님 지금은 없어진 세계무역센터 만한 서버가 있다면 몰라도요..(악꽁이의 쓸데없는 이야기는 계속됩니다..) 그런데 만약 장바구니에 대한 정보를 클라이언트에서 가지고 있다면 또는 게시판등에서 글을 쓰는 동안 사용자의 계정 및 권한 정보를 서버가 아닌 클라이언트측에서 유지 하게 된다면 말이 틀려지겠죠? 라운드 트립에 대한 페이지의 필요한 정보를 계속 유지하고 있다면, 사용자 정보등을 세션 수준의 정보로 관리 할 수 있다면, 또한 사용자가 입력한 값들이 처리를 위해 입력되었는지 아닌지와 처음 사이트나 페이지를 클라이언트가 요청한건지를 구분할 수 있다면 우리는 서버의 부하를 최소화 하고, 김동성의 다음 동계올림픽을 기대 할 수 있지 않을까요?(먼소리다냐...)

이러한 기술 한마디로 사용자의 상태 정보를 서버에 보내지 않고 클라이언트가 유지하고 있는 기술이 바로 ViewState입니다. 보안유지를 위해ViewState는 숨은 필드를 사용하며 소스보기를 하여도 인코딩된 문자만 나오게 된답니다..

이번 악꽁이의 강좌는 여기까지 입니다.. 벌써 3월입니다. 닷넷 정품 출시도 이제 얼마 남지 않았고 그래서 악꽁이는 마음이 설레고 심장이 뛰고....
아주 친한 친구가 다음달에 결혼을 갑니다.(오노~~) 그 친구와의 약속을 지키기 위해서도 앞으로 더욱 열심히 내공을 쌓고, 좋은 강좌로 다시 찾아 뵙겠습니다.. (김동성 화이팅~~)

Back