Database Web App Design Development-(2)

예를 들면, http://www.google.com/search?q=database에서 "search"는 Google의 검색 기능에 관련된 프로그램을 가리키며, "q=database"는 해당 프로그램에 전달되는 인수로, 사용자가 'database'라는 단어로 검색하길 원한다는 것을 나타낸다.

HTML & HTTP

HTML은 웹 페이지의 구조와 디자인을 나타내는 마크업 언어

기본 기능: HTML은 페이지의 포맷팅, 하이퍼텍스트 링크 생성, 이미지 표시 등의 기능을 제공

입력 기능:

선택 기능: 사용자는 여러 옵션 중에서 하나를 선택할 수 있습니다. 이를 위해 팝업 메뉴, 라디오 버튼, 체크리스트와 같은 요소를 사용
값 입력: 사용자가 텍스트 박스와 같은 입력란에 특정 값을 입력할 수 있음
서버 응답: 사용자가 입력한 내용은 서버로 전송되어, 서버에 있는 실행 가능한 프로그램에 의해 처리

통신 프로토콜: 웹 서버와의 통신에는 HyperText Transfer Protocol (HTTP)가 사용됩니다. HTTP는 웹 브라우저와 웹 서버 간의 데이터 교환을 위한 표준 프로토콜

정리하면, HTML은 웹 페이지를 구성하고 디자인하는 데 필요한 여러 기능을 제공하는 언어로, 입력 기능 또한 제공되며, 이 입력은 서버에 전송되어 처리된다. 서버와의 통신은 HTTP를 사용하여 이루어진다.

<html> <body>
<table border cols = 3>
<tr> <td> A-101 </td> <td> Downtown </td> <td> 500 </td> </tr>
…
</table>
<center> The <i>account</i> relation </center>
<form action=“BankQuery” method=get>
Select account/loan and enter number <br>
<select name=“type”>
<option value=“account” selected> Account
<option value=“Loan”> Loan
</select>
<input type=text size=5 name=“number”>
<input type=submit value=“submit”>
</form>
</body> </html>

<html>와 </html>: 이 태그들은 전체 HTML 문서의 시작과 끝을 나타냅니다.

<body>와 </body>: 웹 페이지의 주요 콘텐츠가 포함된 부분을 나타냅니다.

테이블 생성:

<table border cols = 3>: 테이블을 시작하는 태그입니다. border 속성은 테이블의 경계선을 표시하는 데 사용되며, cols 속성은 테이블의 열 수를 나타냅니다(하지만 cols 속성은 표준 HTML에서 권장되지 않습니다).
<tr>와 </tr>: 테이블의 한 행을 나타냅니다.
<td>와 </td>: 테이블의 하나의 셀(데이터)을 나타냅니다. 해당 예제에서는 A-101, Downtown, 500 이라는 세 개의 데이터가 있습니다.
<center>...</center>: 이 태그들 사이의 콘텐츠를 화면 중앙에 위치시킵니다. 여기에서는 "The account relation"이라는 텍스트가 있으며, 그 중 "account"는 이탤릭체로 표시됩니다.

폼 생성:

<form action=“BankQuery” method=get>: 폼의 시작을 나타냅니다. action 속성은 폼 데이터가 전송될 서버의 URL을 지정하며, method 속성은 데이터 전송 방식을 지정합니다. 여기서는 GET 방식을 사용합니다.
<select name=“type”>...</select>: 드롭다운 목록을 만듭니다. 사용자는 "Account"와 "Loan" 중 하나를 선택할 수 있습니다.
<input type=text size=5 name=“number”>: 텍스트 박스를 생성합니다. 사용자는 이 박스에 값을 입력할 수 있습니다.
<input type=submit value=“submit”>: 제출 버튼을 생성합니다. 이 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.
간단히 말하면, 이 코드는 테이블과 폼을 포함하는 웹 페이지를 생성합니다. 테이블에는 데이터가 표시되며, 폼을 사용하여 사용자는 "Account" 또는 "Loan"을 선택하고 번호를 입력한 후 서버로 데이터를 전송할 수 있습니다.

// 한줄씩 코드 설명하자면 ,,, 
<html> <body>:

<html>: 모든 HTML 문서의 시작을 나타냅니다.
<body>: 웹페이지의 본문 내용을 담는 태그입니다. 이 태그 내부에 웹페이지에 표시될 모든 콘텐츠가 들어갑니다.
<table border cols = 3>:

<table>: 표를 생성하는 태그입니다.
border: 표의 모든 셀에 테두리를 추가합니다.
cols = 3: 이 속성은 실제 HTML5에서는 사용되지 않는 레거시 속성입니다. 이것은 표에 3개의 열이 있다는 것을 의도하려고 하는 것 같습니다.
<tr> <td> A-101 </td> <td> Downtown </td> <td> 500 </td> </tr>:

<tr>: 표의 행을 나타내는 태그입니다.
<td>: 표의 데이터 셀을 나타내는 태그입니다. 여기서는 'A-101', 'Downtown', '500'의 3개의 셀 데이터를 표시합니다.
…:

이것은 표의 나머지 부분이 생략되었음을 나타내는 표시입니다.
</table>:

표 태그의 끝을 나타냅니다.
<center> The <i>account</i> relation </center>:

<center>: 이 태그는 콘텐츠를 가운데 정렬하기 위한 레거시 태그입니다. HTML5에서는 권장되지 않습니다.
<i>: 텍스트를 이탤릭체로 표시하는 태그입니다. 여기서는 "account" 단어를 이탤릭체로 표시합니다.
<form action=“BankQuery” method=get>:

<form>: 사용자 입력을 수집하기 위한 폼을 시작하는 태그입니다.
action=“BankQuery”: 폼 데이터가 제출될 때, 데이터가 "BankQuery" URL로 전송됩니다.
method=get: 데이터 전송 방식을 GET 방식으로 지정합니다.
Select account/loan and enter number <br>:

텍스트 설명입니다.
<br>: 줄 바꿈을 생성하는 태그입니다.
<select name=“type”>:

<select>: 드롭다운 목록을 만드는 태그입니다. 선택 가능한 옵션을 제공합니다.
name=“type”: 이 드롭다운의 이름을 "type"으로 지정합니다.
<option value=“account” selected> Account:

<option>: 드롭다운 목록의 옵션을 나타내는 태그입니다.
value=“account”: 이 옵션의 값을 "account"로 지정합니다.
selected: 이 옵션이 기본적으로 선택되어 있음을 나타냅니다.
<option value=“Loan”> Loan:

다른 드롭다운 옵션을 나타냅니다. 이 옵션의 값은 "Loan"입니다.
</select>:

드롭다운 태그의 끝을 나타냅니다.
<input type=text size=5 name=“number”>:

<input>: 사용자 입력을 위한 필드를 생성하는 태그입니다.
type=text: 텍스트 입력 필드를 나타냅니다.
size=5: 입력 필드의 너비를 5 문자로 지정합니다.
name=“number”: 이 입력 필드의 이름을 "number"로 지정합니다.
<input type=submit value=“submit”>:

다른 <input> 필드로, 이번에는 제출 버튼을 나타냅니다.
type=submit: 제출 버튼임을 지정합니다.
value=“submit”: 버튼에 표시될 텍스트는 "submit"입니다.
</form>:

폼 태그의 끝을 나타냅니다.
</body> </html>:

</body>: 본문 콘텐츠의 끝을 나타냅니다.
</html>: HTML 문서의 끝을 나타냅니다.

Client Side Scripting and Applets

웹 브라우저는 문서와 함께 특정 스크립트(클라이언트 측 스크립트)나 프로그램을 가져와 클라이언트 측에서 "안전 모드"로 실행할 수 있다.

EX) Javascript(웹 페이지의 동적 기능을 위한 프로그래밍 언어), Macromedia Flash 및 Shockwave(애니메이션/게임용), VRML, 애플릿 등이 있음

클라이언트 측 스크립트나 프로그램은 문서를 활성화하는 데 도움을 준다.이를 통해 사용자와의 유연한 상호 작용이 가능!

클라이언트 측에서 프로그램을 실행하면 서버로 여러 번 왕복하는 것을 피함으로써 상호 작용의 속도가 빨라진다. 로컬 사이트에서 프로그램을 실행하여 애니메이션 같은 기능을 구현 가능하소 또한 사용자에게 입력된 값이 일정한 정확성 검사를 만족하는지 확인할 수 있다.

간단히 말하면, 클라이언트 측 스크립팅과 애플릿은 웹 페이지가 사용자와의 상호 작용을 향상시키고, 반응성을 높이며, 다양한 기능과 애니메이션을 구현하는 데 중요한 역할을 한다.

➕ 보안 매커니즘

보안 메커니즘은 악의적인 스크립트가 클라이언트 기계에 피해를 주지 않도록 보장하는데 필요함

특정한 기능만을 가진 스크립트 언어의 경우 이러한 보안 구현이 비교적 쉽지만 Java와 같은 범용 프로그래밍 언어의 경우 보안을 구현하는 것은 더 어려울 수 있음

예를 들어, Java의 보안 시스템은 Java 애플릿 코드가 시스템 호출을 직접 수행하지 않도록 보장한다

위험한 행동, 예를 들어 파일 쓰기 같은 작업을 금지
잠재적으로 위험한 행동을 사용자에게 알린 후, 프로그램을 중단하거나 실행을 계속할지 선택하는 옵션을 제공

간단히 말하면, 스크립트나 프로그램이 클라이언트 측에서 안전하게 실행되도록 보안 메커니즘이 필요하고, Java와 같은 범용 프로그래밍 언어의 경우 특히 더욱 철저한 보안 조치가 필요함

Web Servers

웹 서버는 다양한 정보 서비스의 프론트 엔드로 쉽게 사용될 수 있다.

URL의 문서 이름은 실행 가능한 프로그램을 식별할 수 있습니다. 이 프로그램이 실행될 때 HTML 문서를 생성합니다.
- HTTP 서버가 이러한 문서에 대한 요청을 받으면 프로그램을 실행하고 생성된 HTML 문서를 되돌려줍니다.
- 웹 클라이언트는 문서의 이름과 함께 추가 인수를 전달할 수 있습니다.
웹에 새로운 서비스를 설치하려면 해당 서비스를 제공하는 실행 가능한 파일을 생성하고 설치하기만 하면 됩니다.

간단히 말해서, 웹 서버는 다양한 정보 서비스를 제공하는 중계 역할을 할 수 있습니다. 사용자의 요청에 따라 서버는 특정 프로그램을 실행하고 그 결과로 HTML 문서를 생성하여 사용자에게 반환할 수 있습니다. 이러한 방식으로 웹 서비스를 쉽게 추가하거나 확장할 수 있습니다.

Three-Tier Web Architecture

web server
application server
database server
웹 서버: 클라이언트의 요청을 받아들이고 적절한 응답을 반환하는 서버입니다. 주로 정적인 컨텐츠(HTML, CSS, 이미지 등)를 제공합니다.
응용 프로그램 서버: 웹 서버로부터 요청을 받아 처리하고 동적인 컨텐츠(웹 애플리케이션의 로직이나 처리 결과)를 생성합니다.
데이터베이스 서버: 응용 프로그램 서버의 요청에 따라 데이터를 저장, 검색, 수정, 삭제하는 역할을 하는 서버입니다.

Two-Tier Web Architecture

web server and application server
database server
웹 서버 및 응용 프로그램 서버: 이 두 서버의 기능이 하나의 서버에서 합쳐져 동작합니다. 웹 서버의 기능과 웹 애플리케이션의 로직 처리 기능을 동시에 수행합니다.
데이터베이스 서버: 데이터 관련 작업을 수행하는 서버입니다.
간단히 말하면, 세 단계 웹 아키텍처는 웹 서비스를 제공하는 데 필요한 기능을 세 가지 서버로 분리하여 운영하는 구조를 말하며, 두 단계 웹 아키텍처는 웹 서버와 응용 프로그램 서버의 기능이 통합된 구조를 가집니다.

HTTP and Sessions

HTTP 프로토콜은 연결이 없는(connectionless) 특성을 가지고 있습니다.
- 이는 서버가 클라이언트의 요청에 응답한 후, 연결을 종료하고 해당 요청에 대한 모든 정보를 잊어버린다는 것을 의미합니다.
- 반대로, 유닉스(Unix) 로그인이나 JDBC/ODBC 연결과 같은 경우는 클라이언트가 연결을 끊을 때까지 연결 상태를 유지합니다.
- 이러한 연결들은 사용자 인증 정보와 기타 정보를 유지하게 됩니다.
- 이러한 HTTP의 연결 없는 특성의 동기는 서버의 부하를 줄이기 위함입니다.
- 운영 체제는 한 기계에서 열 수 있는 연결의 수에 대한 엄격한 제한을 가지고 있습니다.
정보 서비스들은 세션에 관한 정보가 필요합니다.
- 예를 들어, 사용자 인증은 세션당 한 번만 이루어져야 합니다.
해결책: 쿠키(cookie)를 사용합니다.
- 쿠키는 사용자가 웹사이트를 방문할 때마다 사용자를 기억하기 위한 작은 데이터 조각입니다. 이를 통해 사용자의 세션 정보를 유지하면서도 서버의 부하를 줄일 수 있습니다.

➡️ 간단히 말하면, HTTP는 각 요청 후 연결을 끊기 때문에 연속적인 정보나 상태를 유지하기 위해 쿠키와 같은 메커니즘이 필요합니다.

쿠키는 식별 정보를 포함한 작은 텍스트 조각입니다.

서버는 첫 번째 상호작용에서 브라우저에게 쿠키를 전송합니다.
그 후의 상호작용에서 브라우저는 해당 쿠키를 생성한 서버에게 쿠키를 다시 전송합니다.
쿠키는 HTTP 프로토콜의 일부입니다.

서버는 발행한 쿠키에 대한 정보를 저장하고, 요청을 처리할 때 해당 정보를 사용할 수 있습니다.
예를 들면, 인증 정보나 사용자의 선호 설정과 같은 정보가 저장될 수 있습니다.

쿠키는 영구적으로 저장될 수도 있고, 제한된 시간 동안만 저장될 수도 있습니다.

Cookies

쿠키는 식별 정보를 포함한 작은 텍스트 조각입니다.

쿠키는 영구적으로 저장될 수도 있고, 제한된 시간 동안만 저장될 수도 있습니다. 간단하게 말하면, 쿠키는 웹사이트와 사용자 브라우저 간의 상호작용에서 사용자의 정보나 선호도를 저장하고, 다음 방문 시 그 정보를 재활용하기 위한 작은 데이터 조각입니다.

Servlets

Java Servlet 명세서는 웹 서버와 애플리케이션 프로그램 간의 통신을 위한 API를 정의합니다.
- 예를 들어, 클라이언트로부터의 파라미터 값들을 가져오거나 HTML 텍스트를 클라이언트에게 돌려보내는 메서드들이 있습니다.
애플리케이션 프로그램(또는 서블릿이라고도 함)은 웹 서버 내에 로드됩니다.
- 두 계층의 모델(two-tier model)을 사용합니다.
- 각 요청은 웹 서버에서 새로운 스레드를 생성합니다.
Servlet API는 getSession() 메서드를 제공합니다.
- 첫 번째 브라우저와의 상호작용에서 쿠키를 설정하고, 이후의 상호작용에서 세션을 식별하기 위해 이 쿠키를 사용합니다.
- 세션별 정보를 저장하고 조회하기 위한 메서드들도 제공됩니다.

Example Servlet Code

public class BankQueryServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse result)
throws ServletException, IOException {
	String type = request.getParameter(“type”);
	String number = request.getParameter(“number”);
	…code to find the loan amount/account balance …
	…using JDBC to communicate with the database..
	…we assume the value is stored in the variable balance
	result.setContentType(“text/html”);
	PrintWriter out = result.getWriter( );
	out.println(“<HEAD><TITLE>Query Result</TITLE></HEAD>”);
	out.println(“<BODY>”);
	out.println(“Balance on “ + type + number + “=“ + balance);
	out.println(“</BODY>”);
	out.close ( );
	}
}

이 코드는 HttpServlet을 확장한 BankQueryServlet 클래스를 정의하고 있습니다.

BankQueryServlet는 웹 서버와의 상호작용을 처리하는 서블릿입니다. 이 서블릿은 HttpServlet 클래스를 확장(extends)하므로 웹 요청에 응답할 수 있습니다.

doGet 메서드는 HTTP GET 요청을 처리합니다. 이 메서드는 클라이언트(일반적으로 웹 브라우저)로부터의 GET 요청을 받을 때 호출됩니다.

HttpServletRequest request 및 HttpServletResponse result 파라미터는 각각 요청 정보와 응답 정보를 나타냅니다.

request.getParameter(“type”)와 request.getParameter(“number”)를 사용하여 클라이언트로부터 전달된 파라미터 값을 가져옵니다. 이 경우, 'type'과 'number'라는 이름의 파라미터 값을 가져옵니다.

…code to find the loan amount/account balance … 및 …using JDBC to communicate with the database..는 실제 데이터베이스에서 대출 금액 또는 계좌 잔액을 찾기 위한 코드를 나타냅니다. 이 부분은 실제 코드가 주어지지 않았으므로 상세한 동작을 설명할 수 없습니다.

result.setContentType(“text/html”)를 사용하여 응답의 내용 유형을 HTML로 설정합니다.

PrintWriter out = result.getWriter( );를 통해 응답을 위한 출력 스트림을 가져옵니다.

out.println 메서드를 사용하여 HTML 형식의 응답 내용을 작성하고 클라이언트에게 보냅니다. 여기서는 "Query Result"라는 제목과 계좌나 대출의 잔액 정보를 보여줍니다.

마지막으로 out.close();를 사용하여 출력 스트림을 닫습니다.

간단히 말하면, 이 서블릿은 클라이언트로부터 받은 정보를 바탕으로 데이터베이스와 상호작용하여 대출 또는 계좌의 잔액을 찾고, 그 결과를 HTML 형식으로 클라이언트에게 응답합니다.

Server-Side Scripting

서버 측 스크립팅은 웹과 데이터베이스를 연결하는 작업을 단순화합니다.
- 실행 가능한 코드나 SQL 쿼리가 포함된 HTML 문서를 정의합니다.
- HTML 양식에서의 입력 값은 포함된 코드나 SQL 쿼리에서 직접 사용될 수 있습니다.
- 해당 문서가 요청될 때 웹 서버는 포함된 코드나 SQL 쿼리를 실행하여 실제 HTML 문서를 생성합니다.
많은 서버 측 스크립팅 언어들이 있습니다.
- JSP, 서버 측 자바스크립트(Server-side Javascript), ColdFusion 마크업 언어(CFML), PHP, Jscript 등이 있습니다.
- 일반적인 목적의 스크립팅 언어로는 VBScript, Perl, Python 등이 있습니다.

➡️ 서버 측 스크립팅은 웹 페이지에 동적인 기능을 추가하기 위해 사용되며, 사용자의 입력을 받아 데이터베이스와 상호작용하고 그 결과를 웹 페이지에 표시할 수 있도록 합니다. 이를 위해 여러 서버 측 프로그래밍 언어와 스크립팅 언어가 사용됩니다.

Improving Web Server Performance

인기 있는 웹사이트에서는 성능이 중요한 이슈입니다.
- 매일 수백만 사용자에게 접근되고, 피크 시간에는 초당 수천 번의 요청이 있을 수 있습니다.

캐싱 기술은 페이지를 제공하는 비용을 줄이기 위해 요청 간의 공통점을 활용합니다.

	- 서버 측에서:
		- 서블릿 요청 간의 JDBC 연결을 캐싱합니다.
		- 데이터베이스 쿼리 결과를 캐싱합니다.
		- 기본 데이터베이스가 변경되면 캐싱된 결과도 업데이트되어야 합니다.
		- 생성된 HTML을 캐싱합니다.

	- 클라이언트의 네트워크에서:
		- 웹 프록시에 의한 페이지 캐싱

웹 서버의 성능을 향상시키기 위한 여러 기술과 방법 중 하나로 캐싱 기술이 있습니다. 이 기술은 페이지를 더 빠르게 제공하기 위해 데이터나 페이지의 복사본을 임시로 저장하는 방법입니다. 서버와 클라이언트 모두에서 다양한 캐싱 방법이 사용될 수 있습니다.

➕ Caching of JDBC connections between servlet requests
JDBC는 Java에서 데이터베이스에 연결하기 위해 사용되는 API입니다. 웹 애플리케이션에서는 사용자의 요청을 처리하기 위해 데이터베이스에 접근할 필요가 자주 발생합니다. 이때마다 새로운 데이터베이스 연결을 맺는 것은 리소스 소모가 크고 시간이 오래 걸릴 수 있습니다.

이 문제를 해결하기 위해 "JDBC 연결 풀(Connection Pooling)"이라는 개념이 도입되었습니다. 연결 풀은 미리 정해진 수의 데이터베이스 연결을 생성하고 이를 풀(pool)에 보관합니다. 서블릿 요청이 발생하면, 이 풀에서 이미 생성된 연결을 빌려 사용하고, 작업이 끝나면 연결을 풀에 반환합니다.

"precreate a pool of JDBC connection"은 이 연결 풀을 미리 생성한다는 의미입니다. 즉, 애플리케이션 시작 시점에 미리 일정 수의 데이터베이스 연결을 만들어두고, 이 연결들을 풀에 저장해둡니다. 이렇게 함으로써 실제 사용자의 요청이 들어왔을 때 연결을 즉시 사용할 수 있게 되어 성능이 향상됩니다.

결론적으로, "Caching of JDBC connections between servlet requests에서 precreate a pool of JDBC connection"은 서블릿 요청 간에 데이터베이스 연결을 캐싱하는 것과 관련된 내용으로, 미리 정해진 수의 데이터베이스 연결을 생성하고 이를 풀에 보관하는 방식을 의미합니다. 이를 통해 성능을 최적화하고 시스템의 부하를 줄일 수 있습니다.

Song Chae Won

@chhaewxn

이전 포스트