이번 시간에는 파이썬 웹 프레임워크인 Flask, Django 를 살펴보기 전에 웹을 구성하는 기초적인 부분들에 대해서 살펴보려고 한다. HTML, CSS, Javascript, Web Server(IIS), Web Language(ASP), Ajax 에 대해 개념을 간단히 설명하고, 간단한 예제를 만들어 시연해 보면서, 일반적인 웹 환경이 어떻게 구성되어 있는지를 살펴보며, 다음 시간에 얘기할 비교적 최신 개념인 MVC(model view controller)나 Url Rewriting(Routing) 설명을 위한 사전 지식을 쌓아 놓으려 한다. 다만 위 하나하나의 분야는 이렇게 블로그 한 챕터에 담기에는 각각 수 권의 책으로 따로 분리해야 할 만큼 넓은 분야라서, 가볍지만 필요한 개념은 이해할 수 있을 정도로 설명을 진행해 보려고 한다. 만약 기존에 ASP, PHP, JSP 등으로 웹 페이지를 만들어 봤던 분들은 이번 장은 대충 넘겨보거나, 생략하여도 될듯 하다.
[목차]
0. 왜 파이썬 공부에 구글을 이용하는게 좋은가?
1. 언어를 바라보는 방법. 파이썬을 어떻게 바라봐야 할까?
2. 파이썬 설치와 환경, 버전 선택 하기의 이유.
3. 만들고자 하는 기능을 모르는 조각으로 나눠 조사해 보기
4. 데이터 베이스에서 내용 가져와 출력하기
5. 암호화 모듈을 이용해 암복호화 해보기
6. 퍼즐 조각들을 합쳐보기
7. 엑셀 파일 사용해 보기 -> 부록 : fuction 을 이용해서, 코드 정리해 보기
8. 정규표현식을 왜 사용해야 할까? 언어속의 미니 언어 정규표현식 살펴보기
9. 입력과 결과를 GUI 화면과 연결해 보기
10. Whois API 이용해 보기
11. 웹페이지 호출해 내용 파싱 하기(BeautifulSoup 그리고 한계)
12. 자동화 - 웹 자동화(with Selenium)
13. 자동화 - 윈도우즈 GUI 자동화(with pywinauto)
14. 자동화 - 작업 자동화
15. 수학 라이브러리 살펴보기
16. 그래픽 라이브러리 살펴보기
17. 머신러닝에서의 파이썬의 역활
18. 웹 프로그래밍 - Legacy Web
19. 웹 프로그래밍 - Flask 살펴보기(feat. d3.js)
20. 웹 프로그래밍 - Django 살펴보기
21. 정리 - 이런저런 이야기
[들어가면서]
왜 파이썬 공부 관련 글에서 하나의 챕터를 따로 빼내 HTML, Javascript, CSS 등의 다른 웹 언어와 지금은 유행이지난 스크립트형 웹 프로그래밍 언어인 ASP 를 언급하려 하냐면, 다음 시간을 위해 Flask 와 Django 를 살펴보다보니, 처음 웹을 접하는 사람들이 접근하기는 꽤 어려운 구조라는 생각이 들었기 때문이다. 아마 Django 같은 프레임 워크를 이해하기 위해서는 기존 Legacy Web 에 대한 지식은 기본으로 갖춘 상태에서, Url Rewriting, MVC 같은 비교적 최신의 개념들에 대한 이해가 추가적으로 선행되야 할 듯 싶다. 물론 파이썬도 어느정도 익숙해 졌다고 가정하고 말이다.
다른 웹 프로그래밍 언어 등에서 기존 웹을 어느정도 경험해 본 사람들은 해당 쪽 방식과 접근 방식이 다른 부분 위주로 비교해 가면서 적응하면 되겠지만, 웹 프로그래밍 세상에 처음으로 들어온 사람들은 해당 프레임워크를 배울때 웹의 일반적인 지식들이 한꺼번에 같이 쏟아져 들어오기 때문에, 아마도 뭐가 프레임위크에 대한 얘긴지, 뭐가 일반적인 웹 기술에 대한 얘기인지 혼란에 빠질 듯 싶다. 또 해당 방식이 기존 방식에 대해 어떤 장단점을 가지고 있는 건지를 알지 못하고 맹목적으로 받아들일 수도 있다. 앞의 시간하고 비교하면 웹 자동화 프레임워크인 selenium 을 사용하고 싶은데 웹 동작을 담당하는 HTML 이나 자바스크립트를 이해 못한 상태에서 막연히 배우는 것보다도 더 힘들지 않을까 싶다.
또한 구조적인 프레임워크는 분명히 여러 장점을 가지고 있는건 맞지만, 초보자의 입장에서 봤을때는 ASP 와 같은 Legacy Web Language은 아무래도 URL 이 바로 웹 페이지 파일 자체와 일치되는 1:1 관계의 직관성을 제공하여 접근하기가 좀더 쉽지 않을까 싶다. 또한 ASP, PHP 같은 스크립트 언어들은 컴파일 과정이 없이 바로 결과를 볼수 있어서 .NET 이나 JAVA 같은 컴파일 형 언어보다는 에러를 쉽게 만나고 수정해 볼수 있다(개인적으로는 수많은 에러를 만나고 해결하는 과정이 프로그램을 배우는데는 아주 중요한 경험이라고 생각한다). 그래서 flask 나 Django 에 대한 컨셉 설명을 용이하게 해보기 위해 앞서 머신러닝 챕터 진행 전에 수학, 그래픽 라이브러리를 소개하여 분리할 수 있는 개념을 떼어낸 것과 비슷한 일을 시도하려고 한다.
[IIS, ASP 에 대해서]
참고로 여기서 잠시 다루는 웹 스크립트 언어인 ASP 는 현재 글을 진행하는 환경인 윈도우즈10 홈 버전이면 프로그램 추가/제거를 이용해서, IIS(Internet Information Server-아파치 같은 윈도우즈쪽 MS 웹 서버임)를 설치해서 비교적 간단히 사용이 가능하다. ASP 는 PHP, JSP 와 거의 기능적으로 비슷하다고 봐도 될듯 하다(뭐 두 언어는 계속 발전해 와서 .NET 으로 전략적으로 마이그레이션 하면서 버려진 ASP 와는 갭이 크다고 말하시는 분들도 있겠지만, 개인적으로 생각하기에는, 서로들 좋아 보이는 점들을 한참 차용했기 때문에 일반적인 기능 범위는 비슷하고 문법 측면만 틀리다고 생각한다. 물론 어떻게든 비슷하게 구현을 할수 있다는 얘기지, 더 이상 새로운 문법 구조나 라이브러리가 지원 되지 않기 때문에 난이도가 같다는 것은 아니다).
지금 생각하면 좀 낯설지만 예전엔 위의 3개 언어가 웹프로그래밍 언어의 패권을 다투기 위해 경쟁하던 시대도 있었었다. 지금은 뭐 더 많은 웹프로그래밍 언어들이 경쟁하는 춘추전국시대에 있는듯 하며, 사실 고수준 언어가 많은 부분을 모듈화 해서 관리해 주지만, 어떤 언어를 쓰냐보다는 어떻게 설계하여 쓰느냐가 더 중요한듯도 싶긴한다.
윈도우즈 7의 경우는 그때의 MS 라이센스 정책의 방향 땜에 홈 버전에서는 IIS 설치가 안되고, 프로페셔널 버전에서만 지원되니, 혹 윈도우즈 7 홈 환경으로 강좌를 따라오고 있는 분이라면, 눈으로 코드 흐름만 살펴 보셔야 할듯 싶다. 개념을 설명하기 위해 관련 코드를 만든것이기 때문에 그러셔도 무방하다(의사코드 대신 ASP 를 사용했다고 봐도 좋을듯 싶다)
[웹은 어떻게 동작하는가?]
웹 브라우징은 기본적으로 아래 그림과 같이 브라우저와 웹 서버가 중심이 되어 일어나는 행위이다. 웹서버는 우리가 많이 아는 IIS(ASP, .NET), 아파치(PHP), 톰캣(JSP) 부터 node.js(Javascript), 파이썬 자체 웹서버 등 다양하다. 브라우저 주소창에 웹페이지 주소를 입력하거나, 또는 결제창에서 결제 버튼을 누르거나, 특정 페이지에서 다음 버튼을 누르거나 할때, 브라우저가 웹 서버에 명시적으로 요청을 보낸다. 해당 요청은 패킷이라는 조그만 신호 단위에 담겨서, 네트워크 카드를 통해서, 인터넷 세상으로 나가게 된다.
인터넷 세상에서는 라우터와 스위치라는 장치를 통해서 해당 되는 주소(정확하게는 DNS 서버를 통해 얻어온 IP)가 가리키는 사이트로 이동되게 된다. 그럼 해당 서버는 그 요청을 받아서, 포트에 대기(listen)하고 있는 있는 웹 서버(예를 들면 아파치) 프로그램에게 전달하게 된다. 해당 웹 서버 프로그램은 해당 요청의 form 요소등에 대해서 프로그래밍 로직을 적용하여 DB의 내용을 조회하거나, 저장하거나 한후 최종 처리 결과를 HTML 형식으로 꾸며 사용자 브라우저에게 다시 보내준다. 사용자 브라우저는 해당 정보를 구조<tag>에 맞게 적절히 해석하여 사용자에게 그래픽 적인 웹 페이지 화면으로 보여준다. 브라우저에서 특정한 옵션을 설정하는 경우 브라우저와 네트워크 카드 사이에서 웹 프록시 형태의 프로그램이 패킷을 중계하는 일도 있는데, 그게 우리가 사용해본 fiddler 같은 HTTP 패킷을 보는 툴의 동작 원리이다.
[웹을 구성하는 언어들]
웹에서 사용되는 언어들은 보통 어느 측면에서 사용되느냐에 따라 클라이언트 언어(브라우저)와 서버(웹 서버 프로그램) 언어로 나눠볼 수 있다. 클라이언트 언어는 HTML, CSS, Javascript, AJAX 같은 언어로 이루어져 있고, 서버 언어는 JAVA, .Net 같이 컴파일이 되어 동작하는 언어와 ASP, PHP, JSP, Python 같은 스크립트 형태(사실 이것도 실시간 컴파일이라고 봐야된다. 그리고 PHP 도 컴파일 해서 사용이 되는 것 같기도 하고, JSP 도 뒷단은 자바 class 파일을 호출하는 경우도 많은 듯 하니 사실은 구분이 조금 묘하긴 하다)로 이루어진 언어로 이루어져 있다(요즘은 Javascript로 동작하는 서버 환경인 Node.js 가 나오는 등 서버와 클라이언트 언어라는 절대적인 구분이 점점 모호해 져가는 듯은 하다. 파이썬도 웹과 시스템 양쪽에서 쓸수 있듯이 말이다). 또 DB쪽 언어인 SQL(Structed Query Lanauage) 언어도 있다. 브라우저는 클라이언트 언어들을 이용해 사용자의 액션에 반응하거나, 그래픽적인 화면 UI을 보여주고, 사용자의 입력들을 받아 form 이나 json 등에 담아서 서버 쪽으로 전달한다. 서버 언어는 전달된 클라이언트의 데이터들을 미리 작성된 프로그램 로직에 맞춰 처리하여, DB에 저장하거나 하며, 이후 클라이언트 언어 형태로 브라우저에게 적절히 응답을 주게된다.
HTML(Hyper Text Markup Language) 은 우리가 매일 클릭하는 링크(hyperlink)와, 페이지 구조를 담고 있는 태그(markup)로 이루어진 언어이다. CSS(Cascade Sytle Sheet)는 초기 HTML 로부터 디자인 속성들을 따로 분리해낸 언어라고 볼 수 있다. Javascript는 초창기의 정적인 HTML위에 event 속성과의 협업을 통한 사용자와의 상호작용으로 생명을 불어 넣어주었다고 할수 있으며, HTML을 개념적으로 구조화한 DOM(Document Object Model) 객체를 이용하여 HTML 요소들을 조작한다. 우리가 웹에서 보는 모든 동적인 동작들이 Javascript 의 출현 덕분에 일어난다고 보면 되며, 파이썬과 비슷할 정도로 다재다능하고 복잡한 언어이며, Node.js 의 출현 덕분에 서버 쪽 언어로도 사용되게 됬다. Ajax(Asynchronous JavaScript and XML)는 자바스크립트로 만들어진, 멈춰진 HTML 페이지 뒤에서 리퀘스트를 날릴 수 있는 라이브러리 묶음이라고 생각하면 될것 같고, HTML 의 <form> 을 이용하지 않고도 json, xml, text 등의 데이터 형태를 이용하여 브라우저 뒤에서 비동기적으로 통신하는 것을 지원한다.
서버쪽의 JAVA나 .NET 등의 컴파일 언어의 경우 사용전 빌드 과정이 꼭 필요하고, 초기 공통 바이너리 로딩 등에 부하가 걸린다고 하지만, 일반적으로 초기 로드 동작이 끝나면 스크립트 형식의 언어보다는, 메모리를 이용해 좀 더 자원을 효율적으로 공유한다고 한다. SQL(Structed Query Language) 은 MSSQL, Oracle, MySQL 등에 쿼리를 날리는 공통 표준으로 실제로는 SQL서버 종류별로 문법이 조금씩 차이는 있으며, 사용자의 요청에 따라 서버 쪽 프로그램에서 데이터를 조회하거나 저장하는 데 사용한다.
[HTML 살펴보기]
HTML 은 아래의 그림 처럼, 하이퍼링크와 태그로 이루어진 언어이다. Markup 은 문서의 활자나 구조를 잡아주는 것을 얘기하는데, HTML 에서도 비슷하게 구조를 잡아주는 요소의 의미를 가지게 된다. HTML 은 밑의 로봇 그림처럼 헤더(header)와 바디(body)라는 것을 가지게 되는데(HTML5 에는 푸터-footer도 있긴 하던데, 어찌 봄 전체 구분 구조자체가 많이 바뀌었으니 여기서는 무시하자), 헤더에는 문서에 대한 여러가지 배경정보(제목, 작성자 등)들이 들어가고, 바디안에 우리가 실제 브라우저에서 보는 화면들이 들어간다고 보면 된다.
그림을 보면 <html> 태그안에 <head> 와 <body> 태그 쌍이 있고, 제목(<title>)을 좀 큰 글자(<h1>)로 보여주고, 한칸을 띈후(<p>), '본문' 이라고 적힌 HTML 문서가 브라우저에서 열리면 해당 정의된 대로 화면에 표시되는 것을 볼 수 있다.
브라우저가 HTML 을 해석하는 것은 사실 이미지뷰어 프로그램이나 메모장이 하는 일과 비슷하다. 이미지 뷰어 프로그램이 읽은 이미지에 대해 이미지 종류, 압축방식(jpeg, png 등), 좌표와 색정보에 따라서 화면에 뿌려주거나, 메모장이 텍스트 파일내에 있는 문자, 줄바꿈 기호, 탭(우리 눈에는 글자들이 탭으로 구분된 것으로 보이지만, 실제의 텍스트 파일 내부에는 아스키 코드 09 같은 특별한 기호로 사실 정의되어 있다)을 해석해 우리에게 보여주듯, 브라우저가 HTML 형태의 정보를 받으면 헤더, 바디에 있는 여러 태그 정보들을 분석해서, 화면에 우리가 볼 수 있도록 표시해 주는 것이다(이를 HTML 랜더링 이라고 말한다)
그럼 HTML의 모든 태그를 다 볼순 없으니 대표적인 몇개만 살펴보자
[1- TABLE 태그]
11교시에서 잠시 다루었지만, 테이블은 아래와 같은 기본 구조를 가진다. 가장 바깥은 <table> 태그로 쌓여 있고, <th> 는 맨위에 있는 제목 필드라고 보면 되고(테이블에서는 옵션 태그라 없어도 무방), <tr> 은 엑셀의 row 같이 테이블의 한 행을 나타내고, <td> 는 하나의 입력 칸인 셀(cell)을 얘기한다. 그래서 테이블의 구조는 <table> 태그 안에 줄을 나타내는 <tr> 태그들이 쭉 있고, 각 <tr> 태그 안에 칸을 나타내는 <td> 태그들이 들어가 있는 단순한 구조이다. 근데 이 단순한 구조로 이것저것 다양한 형태의 테이블을 만들거나 페이지의 구조를 잡다보니 은근 분석하기 어려울 정도로 복잡해 질 때도 많다.
가장 간단한 구조의 테이블 예제는 아래와 같다. <table> 태그가 맨 밖에 있고, 선(border) 굵기가 1 사이즈를 가진다. <th> 태그안에 제목인 '과자'와 '초콜릿'이 들어있고, 줄을 나타내는<tr> 태그가 두개 있는데, 하나에는 '파이, 카카오45%' 가, 나머지 하나에는 '머랭, 카카오100%' 가 각각 <td> 태그안에 나눠 담겨 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<table border=1>
<tr>
<th>과자</th>
<th>초콜릿</th>
</tr>
<tr>
<td>파이</td>
<td>카카오45%</td>
</tr>
<tr>
<td>머랭</td>
<td>카카오100%</td>
</tr>
</table> |
cs |
c:\python\code 폴더에, 파일형식을 '모든 파일'로 선택하고 table.html (또는 table.htm) 이라고 저장한다. 이후 탐색기에서 해당 파일을 더블클릭해 실행하면 브라우저가 뜨면서 아래와 같이 지정한 테이블이 표시된다.
테이블에는 아래와 같은 스타일을 나타내는 속성들이 있다(속성 중 주요한 일부만 표시함). HTML을 복잡하게 생각하지 말고, 우리가 많이 쓰는 워드나, 한글 등에서 작성하는 문서를 브라우저가 이해할 수 있게 태그로 표현한다고 생각하면 된다. 글자를 크게하거나, 오른쪽 정렬을 하거나, 표의 색을 정하거나, 셀의 여백 값을 정하거나 하는 부분들을 아래와 같은 태그 내 속성에 넣어 넣어서 해결한다고 생각해 보면, 속성이 이렇게 많은 이유를 이해할 수 있을 것이다.
그럼 일부 속성을 사용해 보자. 속성 이름들은 <table> 같은 하나의 태그에서만 독점해 쓰이는게 아니고, 비슷하게 속성을 정의할 다른 태그들이 있다면 동일한 이름으로 사용된다. 아래에서는 <th> 태그 내에 배경색(bgcolor : 색은 'yellow' 와 같은 예약된 영어이름이나, '# + 16진수 숫자' 을 이용해 R, G, B 로 표현 가능하다)을 입히고, '파이'와 '머랭'가 들어간 셀의 사이즈를 200 pixel로 늘이고, 특히 '파이'가 들어간 셀은 가운데 정렬을 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<table border=1>
<tr>
<th bgcolor=#FF22CC>과자</th>
<th bgcolor=yellow>초콜릿</th>
<tr>
<td width=200px align = center>파이</td>
<td>카카오45%</td>
</tr>
<tr>
<td width=200px>머랭</td>
<td>카카오100%</td>
</tr>
</table> |
cs |
위와 마찬가지로 c:\python\code 폴더에 table2.html 에 저장하여, 브라우저로 실행하면 아래와 같다.
이번엔 맨 마지막에 <tr> 행을 하나 추가하며, 내부의 두개의 셀을 합쳐보자. 해당 역활을 해주는 속성이 'colspan'(column span:컬럼 폭)이다. 이것을 2라고 해주면 위의 테이블을 기반으로 해서 2개의 셀을 세어서, 밑에 하나로 합쳐 표시해 준다(처음 테이블을 만들어 이것저것 해보면 colspan, rowspan{위아래합치기} 개념이 복잡한 테이블에서는 조금 헷깔리긴 했었다)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<table border=1>
<tr>
<th>과자</th>
<th>초콜릿</th>
</tr>
<tr>
<td>파이</td>
<td>카카오45%</td>
</tr>
<tr>
<td>머랭</td>
<td>카카오100%</td>
</tr>
<tr>
<td colspan=2>비고:살찌는거조심</td>
</tr>
</table> |
cs |
c:\python\code 폴더에 table3.html 에 저장하여, 브라우저로 실행하면 아래와 같다.
[2- FONT 태그]
다음으로 <font> 태그는 아래와 같다. 해당 태그 사이에 들어가 있는 문장의 색, 크기, 폰트 등을 정의 한다(역시 워드의 글자 스타일을 생각해보면 된다).
|
1
2
3
4
5
6 |
<html>
<body>
<font size="5" color="blue">첫번째 폰트</font>
<font face="궁서체" color="green">두번째 폰트</font>
</body>
</html> |
cs |
c:\python\code 폴더에 font.html 에 저장하여, 브라우저로 실행하면 아래와 같다.
[3- Form 태그]
세 번째 태그인 폼(<form>) 은 사용자가 입력한 데이터를 서버로 전송하기 위한 요소이다. 우리가 검색 페이지에서 검색어를 넣고 '검색하기 버튼'을 누르거나, 여러 결제 옵션을 선택하고 '결제하기 버튼'을 눌렀을때, 우리가 입력하거나 라디오버튼 등으로 선택한 값들을 서버 쪽으로 묶어 전송하는 역활을 하는 태그가 <form> 이다. 서버 쪽으로 데이터를 날릴때는 HTML 전체 데이터가 아니라 이 <form> 안에 담긴 데이터만 날아간다(물론 이 설명 부분은 요즈음에 와서는 json 이나 xml 을 데이터 형식으로 주로 쓰는 AJAX 와 같은 비동기 방식이나, .net의 viewState 같은 새로운 전송 역활을 하는 형식들이 생겨서 예전같이 절대적이진 않는듯 하다).
밑의 그림에 나타난것 처럼 폼은 <form> 이라는 태그로 감싸져 있고, 그 안에 여러가지 사용자의 입력을 받는 태그들이 들어가게 된다(이 부분도 윈도우 GUI 화면 요소들을 떠올리면 쉽게 이해갈 것이다. <form>은 윈도우즈의 다이얼로그 박스와 비견 될듯하다). 폼안에 들어가는 태그는 txt 형태의 필드, 입력값을 와일드 카드로 가려주는 password 형태의 필드, 라디오 버튼, 체크 박스, 셀렉트 박스 등의 다양한 요소 들이 있다. 사용자가 type="submit" 으로 속성이 지정된 버튼을 누르게 되면, 폼의 action 속성에 지정된 URL이 호출되며 폼내 정보들이 전달된다.
아래의 소스는 위의 그림의 소스를 옮겨놓은 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<form name=“basic" action="http://127.0.0.1/demo_form_action.asp" method="get">
이름: <input type="text" name="myname">
<br><br>
아이디: <input type="text" name="id">
<br>
패스워드: <input type="password" name="pwd">
<br><br>
<input type="radio" name="address" value="seoul">서울
<br>
<input type="radio" name="address" value="busan">부산
<br><br>
<input type="checkbox" name="hobby" value="gym">취미는 헬스
<br>
<input type="checkbox" name="hobby" value="book">취미는 독서
<br><br>
한달 용돈 :
<select name="pocketmoney">
<option value="100000">10만원</option>
<option value="200000">20만원</option>
</select>
<br><br>
<input type="submit" value="전송">
</form> |
cs |
c:\python\code 폴더에 form.html 로 저장하여 브라우저로 띄워보자. '전송'버튼을 누르면 지금은 없는 페이지를 호출 하기 때문에, 에러가 나긴 할 것이다.
그럼 피들러를 이용해 샘플 페이지에서 전송 버튼을 눌렀을때 폼이 어떻게 날아가는지 실제로 봐보도록 해보자(피들러는 10교시 때 설치 및 기초 사용법을 설명했다). 밑의 피들러 그림을 보면 왼쪽 url 항목에 우리가 지정했던 demo_form_action.asp 파일이 있고(상대 경로로 지정했기 때문에 앞의 도메인과 폴더 부분은 127.0.0.1의 루트 폴더 그대로 이다), 파일이름 뒤에 물음표와 함께 form 안에 담겨있는 태그 요소들이 name 속성을 기준으로 'myname=Hello', 'id=freesugar' 식으로 값이 어사인되어 전송되는 것이 보인다(예전에 웹페이지 파싱 시간에 잠시 얘기했지만 폼 및 폼 내부의 태그들은 name 속성을 기준으로 구별된다).
조금 더 보충해서 설명하면, 우리가 주소창에 주소를 입력하여 구글 웹사이트에서 특정 웹 폴더내에 있는, 특정 파일(test.html)을 요청하여 가져오는 것처럼, 페이지내에서 submit 버튼을 눌렀을 때는 폼 태그 내의 action 에 정의되어 있는 URL 경로를 호출하면서 form 안에 지정된 값을 모두 모아서 전송을 한다(해당 부분은 브라우저가 알아서 해준다)
[4-EVENT]
event 속성의 설명은 여기서 진행하진 않고 Javascript 와 뗄수 없는 관계니 뒤쪽 Javascript 섹션에서 설명 하려고 한다.
[HTML 마무리]
그럼 이런 다양한 HTML 태그들과 속성들은 어떻게 접근해야 될까? 추천 하는 방법은 '헤드 퍼스트 html' 같은 가벼운 책을 한권 읽어보거나(개인적으로 헤드퍼스트 시리즈가 있으면 워밍업 용으로 먼저 본다. 대신 안의 낱말 맞추기나 퀴즈는 시간도 걸리고 쪽지시험 같아서 잘 안 푸는 편이다. 다만 저자가 다 다르기 때문에 시리즈 별로 품질이 차이가 좀 있다). HTML 책에 돈을 들이기 아까운 분은, 아래의 w3school 사이트의 샘플을 보거나, 구글 검색을 통해 필요한 태그를 조금씩 봐도 된다. 어차피 웹 프로그래밍 공부를 하다보면 태그는 계속 찾아 볼수 밖에 없다.
https://www.w3schools.com/html/default.asp
하지만 아마도 초보자 분은 w3school 나 구글에서 뭘 봐야할지를 모를 것 같기 때문에, 책이나 웹상의 HTML 관련 블로그나 관련 무료 강의를 보기를 추천한다(대신 이 방식은 a b c 로 진행되는 경우가 많아서 따라가다가 지칠 수도 있다). 그리고 무엇보다 중요한 것은 어느정도 알 것 같은 느낌이 들면, 직접 원하는 UI의 웹 페이지를 만들어 보면서 벽에 부딫치고, 해결해 보는 것이 좋다.
HTML 은 브라우저로 모든 소스를 볼수 있기 때문에, 디자인이 좋은 페이지의 궁금한 요소들을 뜯어 보는 것도 좋다(11교시에서 설명한 브라우저 개발자 도구의 '요소보기'는 웹의 보고싶은 부분을 뜯어보는데 아주 편리한 도구이다). 어느 정도 공부를 해서 잘 안다고 생각해도 막상 웹페이지를 만들어 보거나, 현실 웹의 소스를 보기 힘들도록 꼬아놓은 자바스크립트, CSS, HTML 을 보게되면 한숨이 나올때가 있을 것이다. 쉽게 안되는게 아쉽지만 이런 공부는 'no pain, no gain' 이기 때문에 어쩔수 없다.
HTML 은 4.01 표준과 5.0 이 있는데, 5.0 은 정적인 4.01 환경에서 좀더 동적인 웹을 위한 확장 킷이라고 봐도 될것 같다(개인적으로 게임의 확장팩 같다고 생각한다). 그래서 일단 4.01 위주로 공부한 후 5.0 내용을 보는 것이 좀 더 효율적일 것 하다(초보자분이 HTML 공부한다고 HTML5 책을 덜컥 사버리면 아마 맨붕이 올지도 모른다). HTML 태그가 워낙 잡다한게 많기 때문에(MS워드의 잘 안쓰는 잡다한 기능들과 같다고 보면 된다) 먼저 공부를 추천하는 기초 html 요소들을 아래에 정리해 놨으니 참고 하시길 바란다. 개인적으로 아래 정도만 알고 조금 헤메보면 beautifulsoup 같은 웹 라이브러리를 사용해 일반적인 웹페이지의 HTML을 파싱할 정도는 될 거라고 생각한다 . 물론 다음에 언급할 자바스크립트와 CSS는 HTML과 실과 바늘의 관계라고 볼수 있어 크롤링 등을 위해 페이지에 대한 분석을 잘 하고 싶다면 세 가지 언어를 비슷한 레벨로 수준을 맞춰 놓는게 좋다(어찌봄 원래 하나일 걸 3개로 나눴다고 봐도 된다). 거기다 웹프로그래밍 언어까지 얹어 배우게 되면(아마 자연스럽게 DB도 배우게 될테고) 웹 기술에 대한 전체적인 기초 그림이 완성이 된다고 생각한다.
[HTML 추천 태그 및 개념]
- 기본구조용: <head>, <body>, <br>, <table>, <font>, <a>, <b>, <h1>~<h6>, <hr>, <i>, <p>, <title>, <meta>, <ol>, <ul>, <li>,
- 프레임 태그: <frame>, <frameset>, <iframe>
- 이미지 관련: <image>, <map>, <area>
- 미묘한 구조의 확장: <div>, <span>
- 외부와의 연결: <object>, 폼: <form>, <input>, <textarea>, <select>, <option>
- 주석: <!-- -->
- URL, 절대경로, 상대경로
- (form 에 관련된) get, post 인자 개념
- (자바스크립트를 배우는 초입인) event 속성
[CSS]
CSS 는 문법으로 세세히 들어가면 무척 복잡해지는거 같긴 하지만, 간단하게 컨셉만 얘기하면, HTML 에서 각 태그의 디자인 속성들을 독립시켜 읽고 쓰거나, 관리하기 편하게 만든 것이라고 생각한다. 이렇게 무언가를 분리시켜 관리가 편하게 만드는 것은 다음에 나올 MVC 나 객체지향 프로그램, 함수 같은 요소의 공통점인것 같다. 아무래도 복잡히 꼬인 실타래 코드 보다는, 정리되고 분리되어 명확한 코드가 파악도 잘 되고 유지보수도 쉬울 테니까 말이다.
예를 들어 아래와 같은 HTML 코드가 있다면, 단순한 기본 모양의 테이블 이겠지만,
|
1
2
3
4
5
6
7
8
9
10 |
<table>
<tr>
<th>과자</th>
<th>초콜릿</th>
</tr>
<tr>
<td>파이</td>
<td rowspan=2>카카오45%</td>
</tr>
</table> |
cs |
아래와 같은 <style> 태그 안에 담긴 CSS 형식으로 <table>, <td>, <th> 의 디자인 속성을 정의한 파일이 있다면,
|
1
2
3
4
5
6
7
8
9
10
11 |
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style> |
cs |
위의 두 개의 서로 다른 코드를(HTML+CSS) 합쳐서, 아래와 같이 하나의 html 파일로 만들면 서로 독립된 HTML 과 CSS 가 같이 연합해 동작하게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
<table>
<tr>
<th>과자</th>
<th>초콜릿</th>
</tr>
<tr>
<td>파이</td>
<td rowspan=2>카카오45%</td>
</tr>
</table> |
cs |
c:\python\code 폴더에 css.html 로 저장하여 브라우저로 열어보자. <style> 태그안에 CSS 형식으로 정의한 스타일들이, 공간적으로는 분리되어 있는 HTML 코드에 적용되어 아래와 같이 꾸며진다(물론 이 부분은 브라우저가 소스를 파싱하여 적용해주는 것이다).
위와 비슷한 표현을 하는 HTML 코드 형식으로만 이루어진 아래의 코드와 비교해 보면, 디자인 속성의 분리라는 점이 얼마나 코드를 깔끔하게 정리해 주는지 볼수 있다. 만약 복잡한 HTML 페이지의 디자인을 수정 시 아래처럼 각각 태그마다 디자인이 정의된 코드를 수정하는 것보다는, 위의 CSS 스타일로 분리된 코드를 수정하는 편이 좀 더 쉽고, 편리할 것 같지 않은가 싶다. CSS 는 HTML 의 디자인 작업을 개념적으로 분리시키고, 중복 코드를 제거해 쉽고 명확하게 만들어 준 측면이 있는 것 같다(HTML5 에는 아래 대부분의 디자인 속성을 안 쓰고 CSS 스타일을 사용하게 하는듯 하다).
|
1
2
3
4
5
6
7
8
9
10 |
<table border="1">
<tr>
<th border="1" bgcolor="green"><font color=white>과자</font></th>
<th border="1" bgcolor="green"><font color=white>초콜릿</font></th>
</tr>
<tr>
<td border="1">파이</td>
<td rowspan=2 border="1">카카오45%</td>
</tr>
</table> |
cs |
[CSS 마무리]
CSS 에는 많은 디자인 요소들이 있고, class 를 지정하여 특정한 디자인을 선택해 적용하거나, css selector 같은 주제도 있다. 자세한 부분은 관련 블로그나 책을 한권 훝어 보는 걸 권장한다.
[Javascript]
자바스크립트를 설명하려면, HTML 파트에서 설명을 뒤로 미뤘던, HTML 과 자바스크립트를 연결 해주는 요소인 '이벤트(event)' 에 대해 설명해야 한다. 이벤트는 아래 그림과 같이 윈도우즈 프로그램을 움직이게 하는 이벤트 개념이, 브라우저 내의 DOM 객체를 대상으로 구현된 것으로 봐도 될듯 한다. 윈도우즈 운영체제에서 사용자의 키보드, 마우스의 움직임이 어떤 프로그램 창의 어떤 사용자 컨트롤에서 발생했는 지에 따라 이벤트를 발생시켜 처리를 한다면, 브라우저 내에서도 사용자들의 여러 키보드, 마우스 액션이 HTML 페이지내 DOM 의 어떤 요소에서 일어났는지에 따라서, 해당되는 이벤트를 일으켜 자바스크립트를 이용해 처리하게 만드는 구조이다. 아래에 종종 볼수 있는 HTML 이벤트들을 정리해봤다.
해당 이벤트가 동적인 웹을 구성하는데 어떤 역활을 하는지 처음 보는 분들은 감이 안 잡힐 듯도 싶어서, 대표적인 적용 예들을 밑에 표시했다(구글이 onchange 인지, onkeyup 일지는 잘 모르겠다^^). 밑의 예에서 유추해 보면 웹에서 UI가 사용자 동작에 따라서 반응하는 부분은 대부분 이런 이벤트+자바스크립트의 도움으로 이루어진다고 보면 될 것이다.
[자바스크립트 예제 1]
그럼 간단한 자바스크립트 예제를 2개만 보자. 아래의 코드를 간단히 설명하면 하단에 input box가 두개 있고, 박스 내를 클릭하면 'onfocus' 이벤트가 발생 하며, 위쪽 input box 의 이벤트는 배경을 노란색으로 바꾸어주는 setSytle1 자바스크립트 함수에, 아래쪽 input box 는 파란색으로 바꿔주는 setStyle2 함수에 연결되어 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<html>
<head>
<script>
function setStyle1(x)
{
document.getElementById(x).style.background="yellow";
}
function setStyle2(x)
{
document.getElementById(x).style.background="blue";
}
</script>
</head>
<body>
<p>Color Change</p>
First name: <input type="text" id="fname" onfocus="setStyle1(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="setStyle2(this.id)">
</body>
</html> |
cs |
위의 파일을 c:\python\code 폴더에, colorchange.html 이라고 저장하고, 더블 클릭해 브라우저로 열어본다. 로컬 파일에서 자바스크립트가 돌아가려 하기 때문에, '차단된 콘텐츠 허용' 경고가 브라우저 하단에 뜰텐데, 이 경우는 딱히 위험한건 아니니 클릭해서 허용을 해줘야 자바스크립트 코드가 동작한다.
처음엔 둘다 하얀 입력 박스인데, 각각 클릭하여 포커스를 주고 나면 아래와 같이 색이 바뀌게 된다.
[자바스크립트 예제 2]
2번째는 조금 더 복잡한 예제를 해보자. 쇼핑몰 들에서 종종 볼수 있는 메뉴에 마우스를 오버하면 해당 하위 메뉴가 뜨는 예제이다. 이번엔 과정을 보여주기 위해 처음부터 전체 코드를 제시 하지 않고 HTML(원래는 css 와 구분되는게 더 낫겠지만), Javascript, event 각각의 코드를 소개하고 이후 합쳐서 동작을 보려고 한다.
먼저 디자인을 나타내는 HTML 코드이다. 애니매이션이 1초에 수십장의 그림을 사람에게 연속으로 보여줘서 실제 움직이는 것처럼 속이는 것처럼, 자바스크립트도 비슷하게 여러 트릭을 통해 사람을 눈을 피해 표현하는 경우들이 많다(개인적으로 별로 우아하게 느껴지는 코드는 아니다). 아래를 보면 맨 위의 id 가 'mainCate' 인 <td> 태그가 상위 메뉴인 '과자' 를 보여주는 셀이고, 그 안을 보면 id 가 'subCateMenu' 인 '파이와 머랭' 정보를 담고 있는 <div> 태그가 하나 들어가 있는데, 속성들을 잘보면 뒤 쪽에 숨김 속성(display:none;)이 있다. 그래서 첨에는 <div> 태그 안에 있는 '파이와 머랭' 은 안보이고, 보는 사람의 눈에는 상위 메뉴인 '과자'만 보이게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr><td align="left" id="mainCate">
<div id="subCateMenu" style="width: 260px; position: absolute; margin-left: 120px; border:
3px solid rgb(100, 200, 100); padding: 10px; z-index: 10000; display: none; background: rgb(255, 255, 255);">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="width:115px; border-bottom:1px solid;"><a href=“test1">파이</a></div>
<div style="width:115px; border-bottom:1px solid;"><a href=“test2">머랭</a></div>
</td>
</tr>
</table>
</div>
과자
</td>
</tr>
</table> |
cs |
다음으로 동적인 움직임을 구현해 주는 자바스크립트 코드를 보자. showMenu 와 showSubCateMenu가 함수가 있는데, showMenu 가 하위메뉴가 나타날때, 상위메뉴인 '과자'가 들어있는 셀의 색을 바꿔주는 역활을 하고(backgroundColor), showSubCateMenu 가 숨겨놓은
'파이와 머랭'이 들은 <div> 태그를 보여준다(disaplay=""). 나머지 2개의 hide 계열 함수들 view의 반대의 역활을 해서 원래 상태로 돌려주는 역활을 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<script language="javascript">
<!--
function showMenu(td){
td.style.backgroundColor = "#444444";
td.style.color="#ffffff";
}
function hideMenu(td){
td.style.backgroundColor = "#ffffff";
td.style.color="#555555";
}
function showSubCateMenu(i) {
document.getElementById("subCateMenu").style.zIndex = 10000;
document.getElementById("subCateMenu").style.display = "";
}
function hideSubCateMenu(i) {
document.getElementById("subCateMenu").style.display = "none";
}
//-->
</script> |
cs |
여기까지 오더라도, 마지막에 빠진 고리가 있다. 지금으로서는 HTML 하고 자바스크립트가 서로의 존재를 모른다는 것이다. 이것은 앞에서 얘기했던 'event' 요소가 연결해준다. '과자'가 들어있는 <td> 태그 안에 넣을 이벤트들은 아래와 같다. 이렇게 되면 마우스를 '과자' 셀위에 올리면(onmouseover) show 계열 함수들을 실행해 메뉴를 보여주고 색을 바꾸며, '과자' 셀을 벗어나면(onmouseout) hide 메뉴를 사용해서 원복한다.
|
1
2 |
onmouseover="javascript:showSubCateMenu(); showMenu(this);"
onmouseout="javascript:hideSubCateMenu(); hideMenu(this);" |
cs |
그럼 위의 HTML, Javascript, event 세 가지 코드를 결합한 최종 코드는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
<script language="javascript">
<!--
function showMenu(td){
td.style.backgroundColor = "#444444";
td.style.color="#ffffff";
}
function hideMenu(td){
td.style.backgroundColor = "#ffffff";
td.style.color="#555555";
}
function showSubCateMenu(i) {
document.getElementById("subCateMenu").style.zIndex = 10000;
document.getElementById("subCateMenu").style.display = "";
}
function hideSubCateMenu(i) {
document.getElementById("subCateMenu").style.display = "none";
}
//-->
</script>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr><td align="left" id="mainCate" onmouseover="javascript:showSubCateMenu(); showMenu(this);"
onmouseout="javascript:hideSubCateMenu(); hideMenu(this);">
<div id="subCateMenu" style="width: 260px; position: absolute; margin-left: 120px; border:
3px solid rgb(100, 200, 100); padding: 10px; z-index: 10000; display: none; background: rgb(255, 255, 255);">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="width:115px; border-bottom:1px solid;"><a href=“test1">파이</a></div>
<div style="width:115px; border-bottom:1px solid;"><a href=“test2">머랭</a></div>
</td>
</tr>
</table>
</div>
과자
</td>
</tr>
</table>
|
cs |
c:\python\code 에 menu.html 로 저장한 후, 브라우저로 열어본다. 아래와 같이 '과자' 가 들어간 셀 부분에 마우스를 올리거나 내렸을때 서브 메뉴인 '파이와 머랭'이 모양이 나왔다 사라지는 메뉴 동작을 볼수 있을 것이다.
그리고 위에서 자바스크립트 코드에 나온 document.getElementById("subCateMenu") 같은 부분들은 자바스크립트가 HTML 코드에 접근할때 쓰는 DOM(Document Object Model)의 개념이 들어가 있다. 우리가 앞에서 beautifulsoup, 이나 selenium 을 사용할때 의식은 안 했지만 자연스럽게 해당 개념을 이용했다고 볼수 있다.
[Javascript 마무리]
그럼 마지막으로 자바스크립트를 공부하려면 어떻게 할까? 개인적으로 자바스크립트는 깊이 들어가게 되면 파이썬하고 비슷한 깊이의 복잡도를 가진다고 본다(서버 쪽으로 눈을 돌리면 node.js 같은 서버 언어로도 사용되고 있고 말이다). 그래서 되도록 처음엔 너무 깊은 쪽으로는 가지 않도록, 쉬운 책이나 블로그를 보면서 개념을 잡은 후, 이후 웹 프로그래밍 공부를 하면서 궁금한 부분을 만났을때마다 구글 등을 찾아서 개념을 이해하는 것을 추천한다. 자바스크립트 라이브러인 jQuery 를 많이 사용하긴 하나, 실제 웹페이지들은 jQuery 와 일반 자바스크립트 두 가지 코드가 공존하고 있기 때문에 jQuery 는 응용편이라고 생각하고 접근하는 게 나을듯 싶다.
일단 기초가 잡히면 무엇을 모르는지와 공부해야할 방향을 스스로 알수 있게 되고, 집밥 백선생에서 요리하기 전에 재료를 섞음 어떤 맛이 될지 상상해 보라는 말 같이, 무언가를 덥석 구체적으로 습득하는 것도 좋지만, 그 전에 이것을 습득하게 되면 어떻게 될까를 잠시 생각해 보는 것도 나쁘진 않은듯 하다. 공부할수 있는 시간은 한정되어 있기 때문에, 가야될 방향을 정확하게 잡는것도 중요하다. 사실 이 강의의 의미도 구체적인 구현 지식의 전달 보다는 각 주제에 대한 접근방식과 개념을 전달하는 것이라고 생각하고 있다.
[Web Server]
이제 슬슬 후반부로 들어간다. 웹 프로그래밍을 공부하려면, 기본적으로 웹 서버의 존재를 이해해야 한다. 웹서버는 단순하게 얘기하면 특정 포트로 요청이 오기를 기다리고 있는 서비스 프로그램이다. 사용자(또는 다른 프로그램일수도 있고)로부터 요청이 들어오면, 적당한 프로그램적 처리를 한 후, 다시 요청한 쪽에 HTTP 형태로 결과를 돌려준다. 웹 서버는 사실 2개의 모듈로 나뉘어져 있다고 생각하는 게 좋다. HTTP 통신을 받거나 응답해 주는 순수 웹 모듈과, 받은 데이터를 특정한 언어에 기반해서 처리해 주는 프로그래밍 모듈로 구성되어 있다고 볼수 있다.
예를 들어 순수 아파치 웹서버는 PHP 와 HTML 을 처리할 수 있는 반면, 아파치-톰캣은 아파치에 톰캣 프로그래밍 모듈이 얹어져 있어 JSP 파일의 처리가 가능하다(심지어 성능이 얼마나 나올지는 모르겠지만, IIS 에도 PHP 모듈을 설치해 PHP 웹서버로 사용할 수도 있다). 파이썬도 flask 같은 샘플을 보면 샘플 프로그램을 띄울때 웹서버가 같이 실행되어 프레임워크 뒤로 숨겨져 있어서 잘 안보이이긴 하지만, 웹서버 모듈이 있어야지만 사용자의 요청에 응답할 수 있다. flask 나 Django 도 아파치와 연동해서, 클라이언들과 주고받는 처리는 검증된 아파치 서버가 해주고, flask 나 django 는 뒤에서 웹어플리케이션 모듈로서만 동작하게도 할수 있는거 같다(이렇게 보면 모든 웹서버의 꿈이 어떤 언어라도 연결해 중계해 주고 싶은것인가 싶기도 하다).
[IIS 설치]
그럼 다음 섹션에서 ASP 를 돌려보기 위해서 윈도우 10에서 기본으로 지원하는 IIS 를 설치해서 샘플페이지를 하나 호출해 보자.
먼저 IIS를 설치해 보자. '윈도우키+x' 를 누른후 옆 쪽에 나타나는 메뉴에서, '프로그램 및 기능' 메뉴를 선택한다(설치 부분을 설명하기 위해 잠시 전 uninstall 을 했지만, 이전 시간에서 소개한 예전 윈도우 스타일로 시작메뉴를 보여주는 'classic shell' 을 깔았을 경우는 '제어판>프로그램>프로그램및 기능' 으로 가면 된다).
왼쪽에서 '윈도우즈 기능 켜기/끄기' 를 선택한다.
이후 인터넷 정보 서비스에서 1) 'World Wide Web 서비스' 를 체크하고, 2) 하위 메뉴에서 '응용 프로그램 개발기능>ASP' 를 선택한다. 3) 그리고 웹 관리 도구' 도 체크한다(나머진 그냥 디폴트로 두면 된다). 체크가 다 되었음 확인 버튼을 누른다. 잠시 기다림 IIS 가 설치가 된다.
['Hello ASP' 샘플 페이지 실행]
이제 메모장으로 샘플 ASP 파일을 하나 만들건데, 기본 사용자 권한으로는 IIS 의 웹루트 폴더인 c:\inetpub\wwwroot\ 폴더에 파일을 쓰지 못하게 되어 있기 때문에, 메모장을 관리자 권한으로 실행해야 된다. '윈도우+x' 키를 눌러서, 왼쪽 메뉴에서 '검색'을 선택한다. 검색 창이 나오면 '메모장' 이라고 찾는다. '메모장' 아이콘이 나오면 마우스 오른쪽 버튼을 눌러서 컨텍스트 메뉴를 띄워 '관리자 권한으로 실행' 을 선택한다. (매번 이게 귀찮다면 wwwroot 폴더 '속성'의 '보안탭'에서 현재 로그인한 사용자에게 '모든 권한'을 주면 파일 저장이 가능해진다)
이후 메모장에 아래와 같이 입력한다.
|
1
2
3 |
<%
Response.Write "Hello ASP"
%> |
cs |
해당 내용을 c:\inetpub\wwwroot 폴더에 파일형식을 '모든 파일'로 하여 'test.asp' 로 저장한다. 이후 브라우저를 띄워 주소창에 http://localhost/test.asp 를 입력한다(localhost 나 127.0.0.1 은 현재 컴퓨터의 주소를 나타낸다). 그럼 아래와 같이 ASP 로 만든 간단한 문서가 IIS의 ASP 모듈에게 해석되어 브라우저에게 전달되어 화면에 보이게 된다.
[ASP 로 DB 조회하여 HTML 테이블로 출력하는 샘플 만들기]
그러면 ASP 웹페이지를 하나 만들어 보자. 데이터베이스의 테이블을 조회 해서 결과를 화면에 HTML 테이블 형태로 뿌려주는 페이지를 만드려고 한다. 여러모로 시간을 아끼기 위해서^^; 4교시때 설치 및 세팅해 놓았던 SQL Server 와 그때 만들어 놓은 supermarket 테이블을 그대로 이용한다(4교시를 안보신 분들은 4교시에 소개된 MSSQL Server 설치 및 테이블 생성을 하시던지, 귀찮으시면 의사코드라 생각하시고 눈으로만 보고 동작을 이해하셔도 된다).
4교시에 만든 테이블은 아래와 같은 테이블 이였다. 4 or 7교시 때 해당 테이블의 내용을 가져오는 파이썬 코드를 만들어 봤었는데, 그때 로직을 기억을 더듬어 보면 1) 먼저 DB 정보를 입력해 연결하고, 2) 각 행을 루프를 돌며 하나씩 읽어오면서, 3) 화면에 프린트를 하거나 엑셀로 저장했다. ASP 코드도 사실 이와 엄청 비슷한 흐름을 가진다(어차피 비슷한 스크립트 언어이기도 하고, 언어들은 서로 영향을 받아 유사한 경향이 있기 때문이다. 코드를 비교해 보시면 파이썬 코드쪽이 좀더 현대적이여서 흐름이 세련된 느낌을 받을 것이다). 작성할 ASP 코드에서는 1) DB 정보를 입력해 연결하고 2) 각 행을 하나씩 읽어 오면서, 3) HTML 테이블을 출력하면서 <td> 태그안에 해당되는 컬럼을 하나씩 넣어준다.
[ASP 샘플 코드 만들어 보기]
그럼 ASP 를 공부하는 시간은 아니기 때문에 만들어진 예제를 바로 보자. 원래는 웹프로그래밍 예제라고 하면, 사용자가 입력한 내용을 폼으로 전송해, 해당 값을 서버에서 받아 SQL 조건에 조합해 넣어 특정 itemno 의 상품을 조회해 오거나 하는 등의 예제가 좀더 현실적이겠지만, 단순함과, 이전에 만든 파이썬 코드와 비교할 수 있도록 하기 위해 전달 받는 인자가 없이 테이블의 모든 정보를 조회해 오는 방식의 예제를 만들었다.
ASP, PHP, JSP 같은 스크립트 코드를 처음 보시면 낯설수도 있겠지만, ASP 에서는 <% %> 안에 든 내용이 VBscript 문법의 순수 ASP 코드이고, 코드를 보면 거의 파이썬으로 구현했던 예제와 비슷하게 진행이 된다. ASP 를 배울 것은 아니니 코드의 상세 문법을 보지 말고 주석 위주로 흐름만 보길 바란다(참고로 ASP 는 대소문자를 안가린다).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 |
<%@ Language=VBScript %>
<%
' 연결 문자열 정의
strMyTest = "Provider=SQLOLEDB; Data Source=localhost; Initial Catalog=mytest; User Id=pyuser; Password=test1234"
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open strMyTest
' 실행할 SQL 정의
strSQL = "select itemno, category, foodname, company, price from supermarket s(nolock)"
' 쿼리 실행 하여 결과 얻어옴
Set rtnRow = objConn.Execute(strSQL)
%>
<html>
<head>
<title>supermarket</title>
</head>
<body>
<p>supermarket 상품</p>
<table border=1>
<tr>
<td>번호</td>
<td>카테고리</td>
<td>종류</td>
<td>상품이름</td>
<td>가격</td>
</tr>
<%
'DB 에서 조회한 행이 끝이 아니라면 루프를 돌리면서 각 컬럼을 <td> 태그안에 끼워 넣는다.
Do while Not rtnRow.EOF
%>
<tr>
<td><%=rtnRow("itemno")%></td>
<td><%=rtnRow("category")%></td>
<td><%=rtnRow("foodname")%></td>
<td><%=rtnRow("company")%></td>
<td><%=rtnRow("price")%></td>
</tr>
<%
'rsList의 내용을 다음 결과 행으로 이동하며 Do 문을 반복한다.
rtnRow.MoveNext
Loop
%>
</table>
</body>
<%
'열었던 연결 닫기
objConn.Close
Set objConn=Nothing
%> |
cs |
그럼 위의 내용을 샘플파일과 비슷하게 관리자 계정으로 실행한 메모장에 붙여넣기 하여 c:\inetpub\wwwroot 폴더에 'supermarket.asp' 이름으로 저장을 하자. 이후 브라우저 주소창에서 http://localhost/supermaket.asp 을 호출한다. 그럼 아래와 같이 DB에서 supermarket 데이터를 가져와서 HTML 테이블로 정리하여 보여주는 페이지가 나오게 된다. ASP 가 처음이신 분은 처음 파이썬으로 DB 를 조회했을 때처럼 조금은 신기한 느낌을 받지 않을까 싶다.
참고 1: 여기서 잠시 위의 코드의 구조를 보면, 우리가 배운 HTML 과 ASP 의 프로그램 코드가 하나의 파일에 섞여 있어서, 보기 조금 힘든 것 같지 않는가 싶다(뭐 익숙해짐 편한면도 있긴하다). 나중에 Django, JAVA 나 .NET 같은 언어에서 사용하는 MVC 개념을 통해, 마치 CSS를 통해 디자인 코드를 분리해 낸 것처럼, 이런 레거시 웹 프로그램에 섞여있는 프로그램 코드와 HTML 코드를 개별 요소로 분리해 다루려는 시도를 하게 된다.
참고 2: 현재 기본 설정으로는 에러가 발생시 어떤 에러가 났는지 상세하게 보여주지 않는다. SQL 에러같은 상세한 에러를 보기를 원하는 경우는 아래의 웹사이트를 참고하여 세팅한다.
참고 3: 그리고 하나 더 노파심에 얘기할 것은, 위의 예제 코드는 소스를 간단히 만들기 위해서, SQL Injection(DB에 공격자가 임의의 쿼리를 삽입할 수 있는 웹취약점) 에 노출되어 있다. 저 방식으로 페이지를 만들어서는 안된다^^; 궁금하신 분은 구글에 'sql injection defense asp' 라고 찾아보심 된다. 요점은 stored procedure 같이 preparedstatement 타입으로 쿼리를 호출하고, 입력 데이터들을 validation 하고, 어플리케이션 DB계정의 권한을 최소화 하고 등등 이다. 현대 웹이 좋은 이유 중 하나는 이러한 패턴을 프레임워크 자체에서 막아주는 경우가 많다.
[Ajax]
그럼 오늘의 마지막 주제인 Ajax에 대해 얘기해 보자. 개인적으로 모든 현대의 세련되고 편리한 웹페이지들은 이 Ajax 의 활약으로 이루어진게 아닌가 싶다. 구글의 검색어 추천이나, 여러 사이트 들의 사용자의 액션에 반응하는 부드러운 UI 의 이면에는, 웹 브라우저의 뒤에서 열심히 데이터를 요청해 나르고 있는 Ajax 가 존재한다. Ajax(Asynchronous JavaScript and XML) 의 비동기적이라는 의미는, 아마도 기존 웹 페이지 간의 명시적인 호출을 동기적이라고 가정했을때, 페이지가 정지해 있는 상태에서 뒷단에서 Ajax 라이브러리를 이용해 데이터를 교환하는 행위를 비동기적이라고 바라보는 관점인 것 같다. Ajax 는 자바스크립로 구현된 라이브러리로 단순하게 봐도 괜찮을 듯 싶다.
Ajax 의 간단한 예는 아래 그림의 구글 검색어 추천 기능이다. 사용자가 'python' 이라고 입력하는 동안 계속 추천하는 검색어를 바꿔가면서 보여준다.
해당 추천 검색어가 나오는 과정을 fiddler 로 살펴 보게되면, 아래와 같이 www.google.co.kr 도메인에서 /complete/search? 페이지를 호출하는 6개의 요청('p' 'y' 't' 'h' 'o' 'n' 각각 입력에 따라 총 6개의 요청이 날아간다)을 볼수 있다. 그 중 맨 마지막 요청 항목을 클릭해 보면, 폼안의 'q' 인자 안에 우리가 입력했던 'python' 이라는 글자가 넘어가고, 밑 쪽 보면 결과값으로 'python' 에 해당하는 추천 검색어들이 'json 데이터 형식'으로 담겨 응답으로 오게 된다. 브라우저는 해당 json 내의 값을 적당히 풀러서, HTML 페이지의 DOM 개체에 넣어서, 위의 그림과 같은 추천 검색어 들을 보여주게 된다.
[Ajax 샘플 코드 만들어 보기]
그럼 실제로 간단한 Ajax 샘플을 하나 만들어보자. 우선 전송되는 데이터 타입은 json 이 아닌 평문으로 간단하게 구현 하려고 한다(ASP 가 좀 구식언어이고, .NET 이 나오면서 업데이트가 없이 버려져서, json 같은 최신 데이터 구조를 파싱하기가 까다로운 점도 이유이다). 아래 코드에 최대한 주석을 달아 놓았다(// 는 자바스크립트 주석이고, <!-- --> 는 HTML 주석이다).
위쪽의 자바스크립트에는 Ajax 리퀘스트가 정의되어 있다(처음 보는 분들은 조금 사용하는 구조가 낯설어 보일테지만, 처음 Ajax 를 만든 사람이 저렇게 사용하라고 정해 놓은거라서, 파이썬에서 SQL 연결 할때 사용하는 모듈의 문법대로 구현 해야하는 것과 같다고 보면 된다. jQuery 등의 라이브러리를 사용하면 또 그 쪽에서 시키는 스타일대로 하면 된다). 하단 HTML 에 정의된 사용자가 입력한 <input> 값을 읽어와서, ajax_sub.asp 페이지를 호출(폼의 action과 비슷하다고 보면 된다)하면서 'no' 인자에 사용자 입력값을 넣어서 보내고, 결과가 반환되어 오면 그 값을 아래 HTML 에 정의된 <span> 태그에 innerHTML 속성을 이용해서 넣는다
하단 HTML 에는 버튼 속성을 가진 <input> 태그가 있는데, 자바스크립트의 getMenu 함수가 onclick 이벤트를 통해 연결되어 있다. 사용자가 번호를 입력하고 버튼을 클릭하면, getMenu 함수가 실행되면서 Ajax 요청을 실행하는 도미노 형태의 구조이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 |
<%@ Language=VBScript %>
<script>
function getMenu() {
var xhttp;
// 사용자가 입력한 값을 id 를 통해 가져온다.
var menuNo = document.getElementById("menuNo").value;
// 새로운 ajax 요청을 만든다
xhttp = new XMLHttpRequest();
// 요청에 대해 응답이 정상으로 올때까지 기다려서
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// span 태그내에 응답으로 온 텍스트 값을 살짝 끼워 넣는다.
document.getElementById("menuName").innerHTML = xhttp.responseText;
}
}
// 실제 요청하는 페이지는 ajax_sub.asp 페이지 이고, get 인자로 no 에 사용자가 입력한 값을 넣는다.
xhttp.open("GET", "ajax_sub.asp?no="+menuNo, true);
xhttp.send();
}
</script>
<html>
<head>
<title>ajax 샘플</title>
</head>
<body>
<table>
<tr>
<td> 메뉴 번호: </td>
<!-- 사용자가 입력하는 값 -->
<td width=120> <INPUT id="menuNo" size="10" type="text" value=""> </td>
<td width=200>
<!-- 버튼을 누르면 getMenu 함수를 실행 한다 -->
<input type="button" value="해당되는 메뉴 찾기" onclick="getMenu()">
<!-- 나중에 응답 값을 끼워 넣을 span 태그. 첨에는 아무 내용도 없다 -->
: <span id="menuName"></span>
</td>
</tr>
</table>
</body>
</html> |
cs |
앞의 ASP 예제들과 마찬가지로 해당 코드를 메모장에 붙여놓고, c:\inetpub\wwwroot에 ajax_main.asp 라고 일단저장한다.
그 다음은 위의 페이지에서 호출하는 대상인 ajax_sub.asp 페이지를 만들어야 한다. 보통 이 호출 당하는 쪽은 데이터만 받고 보내면 되기 때문에 API 같은 형태로 많이 구현 되어있다. 구현한 코드는 아주 간단하다. 넘어온 no 값을 받아서(사용자가 입력한 값이다), 1 이면 'pizza', 2 이면 'pasta', 그 이외의 숫자면 'drink' 를 반환(response) 해준다(참고로 값이 없을 때의 에러처리는 안되서, 값을 안 넣음 아무 결과도 넘어오지 않는다).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<%@ Language=VBScript %>
<%
' request 값 받기
menuNo = request("no")
' 넘어온 메뉴 번호에 해당하는 메뉴이름을 반환해 준다..
Select Case menuNo
Case 1
Response.Write("pizza")
Case 2
Response.Write("pasta")
Case Else
Response.Write("drink")
End Select
%> |
cs |
해당 코드도 메모장에 붙여놓고, c:\inetpub\wwwroot에 ajax_sub.asp 라고 저장한다.
이후 브라우저를 열어서 http://localhost/ajax_main.asp 라고 주소창에 입력한다. 아래의 화면이 나오면 메뉴번호에 1을 넣고, '해당되는 메뉴찾기' 버튼을 클릭하면, 페이지 뒤에서 Ajax 기능을 이용해 ajax_sub.asp 에 인자를 넘겨 데이터를 조회해서, 'pizza' 를 받아 옆에 표시하게 된다.
Ajax 호출하는 과정을 피들러로 살펴보게 되면 앞에 봤던 구글 검색어 추천과 비슷하게, 숨겨진 호출(request)이 보인다. 이제 Ajax 를 통한 비동기적인 호출이 어떤 원리로 일어나고, 어떻게 보이는 건지 대충 감을 잡으시리라 생각한다.
[마무리 하면서]
그럼 이렇게 되어 가벼운 깊이지만 꽤 길게 진행됬던 Legacy Web 편을 마치려 한다(개인적으로 소주제별 균형을 맞추기 가장 힘들었던 시간 중 하나일듯 싶다). 뒤돌아 보면 자잘하게 많았던 HTML(form, event), CSS, Javascript, Web Server, Web Language, Ajax 같은 기초 요소들이 우리가 보고 있는 웹을 지탱하고 있다는걸 볼수 있었다. 이런 'Legacy Web' 에 대한 기초가 잘 잡혀 있다면 파이썬이든, 다른 언어로든 웹프로그래밍을 공부할때 배워야 할 주제들이 한결 가벼워지게 된다고 생각한다. 앞에서 얘기했던 프로그래밍을 배울 때의 외적요소들을 미리 알고 있을 때처럼 말이다.
혹시 위의 주제들을 잘 모르는 상태에서 파이썬으로 만드는 웹을 공부하고 싶다면, flask 나 Django 프레임워크를 공부하는 중간 중간에 꼭 각각의 주제에 대한 쉬운 책 한권 정도는 보기를 추천한다. 개인적으로 프레임워크는 웹의 구성요소들을 잘 배치할 수 있도록 돕는 껍데기 역활에 불과하지 않는가도 싶다. 다음 시간에는 이런 Legacy Web의 요소들이 파이썬의 Flask 라는 프레임워크에 어떻게 녹여져 소개되고 있는지, 가벼운 맘으로 체크해 보도록 해보자.
|
2017.7.15 by 자유로운설탕 |
cs |
'프로그래밍' 카테고리의 다른 글
| 구글로 공부하는 파이썬 - 20교시 (장고 - Django 살펴보기) (0) | 2017.08.06 |
|---|---|
| 구글로 공부하는 파이썬 - 19교시 (Flask 살펴보기 - Feat. D3.js) (3) | 2017.07.20 |
| 구글로 공부하는 파이썬 - 17교시 (머신러닝에서의 파이썬의 역활) (0) | 2017.06.18 |
| 구글로 공부하는 파이썬 - 16교시 (그래픽 라이브러리 살펴보기) (0) | 2017.05.21 |
| 구글로 공부하는 파이썬 - 15교시 (수학 라이브러리 살펴보기) (0) | 2017.05.06 |