너굴 개발 일지

TIL_210415_아파치,톰캣, JSP 기본 문법, HTML 기본 구조, 양식 본문

TIL

TIL_210415_아파치,톰캣, JSP 기본 문법, HTML 기본 구조, 양식

너굴냥 2021. 4. 15. 23:13

목차

- 아파치
- 톰캣
- 웹서버
- 웹애플리케이션
- Java Servlet
- JSP 
- 컨테이너
- JSP 기본 문법

- HTML 기본 구조

- HTML 입력 양식 (태그들)

+) JavaScript 간단한 문법 

 

 

 

아파치 (Apache)

아파치 소프트웨어 재단에서 관리하는 HTTP 웹서버

 

 

톰캣 (Tomcat)

일반적으로 많이 사용하는 WAS(웹 애플리케이션 서버)로 아파치에서 만든 와스다

 

 

 

웹서버 (Web Server)

정적인 데이터(html, css 등)를 처리하는 서버로 클라이언트의 요청을 받고 요청에 대한 데이터를 만들어서 응답하는 역할을 한다

 

   역할

  1. 클라이언트가 요청한 웹 문서를 찾아서 전달하는 기능을 처리한다.
  2. 요청 파일이 없거나 문제가 발생하면 정해진 코드 값으로 응답한다.
  3. 클라이언트로부터의 요청에 대한 기본 사용자 인증을 처리한다.
  4. 서버 프로그램에 대한 요청을 웹 애플리케이션 서버에 수행시키고 그 결과를 응답한다.

 

 

웹 애플리케이션 서버 (WAS)

동적인 데이터를 처리하는 서버로 클리이언트 요청을 받아 처리하고 다시 클라이언트에게 응답해주는 역할을 하는 서블릿 컨테이너이다. (컨테이너, 웹 컨테이너, 서블릿 컨테이너로도 불린다)

server start 시 가장 먼저 읽어들이는 내용 : Web.xml

Web.xml을 통해 서버가 돌아가기 위해 필요한 내용을 읽는다.

( 웹 서버 + 서블릿 컨테이너 역할을 하는 셈이다 )

 

 

 

아파치, 톰캣의 차이 ?

웹서버, WAS의 차이라고  볼 수 있는데 웹서버는 정적 데이터를 처리하는 서버로 이미지나 HTML을 처리하는 서버라면 웹 서버(아파치)가 빠르고 안정적이나 DB로 연결되어 데이터를 주고받거나 자바 등을 통한 조작이 필요할 경우엔 WAS(톰캣)를 사용한다. 한마디로 웹 컨테이너(서블릿 컨테이너)의 유무로 볼 수 있다.

 

 

WAS인 톰캣만 사용해도 되지 않을까?

톰캣만 사용하게 된다면 웹이 정적/동적 데이터를 모두 WAS가 사용하게 되기에 속도도 느려지고 서버의 부하가 발생하면 사용자 요청의 응답이 느려질 수 있다.

따라서 정적 데이터는 웹서버인 아파치가 처리하고 동적 데이터는 와스인 톰캣이 처리함으로써 서버의 부하를 분산하고 속도를 빠르게 하기 위해 연동해서 사용하는 것이다.

 

 

 

Java Servlet

서블릿이란 웹페이지를 동적으로 생성하기 위한 서버측 프로그램이다.

이는 JAVA 기반으로 만드는 웹 어플리케이션 프로그래밍 기술로 JAVA 안에 HTML 코드를 사용한다.

클라이언트 요청을 처리하고 그 결과를 다시 클라이언트에게 전송하는 Servlet 클래스 구현 규칙을 지킨 자바 프로그램으로 볼 수 있다.

 

 

 

JSP (Java Server Pages)

HTML 기반에 JAVA 코드를 넣어 동적 웹 페이지를 생성하는 웹 어플리케이션 도구로 서블릿의 단점을 보완하고자 만든 서블릿 기반 스크립트 기술이다.

JSP 파일이 실행되는 과정을 보면 다음과 같다

1. 클라이언트로부터 최초 요청이 들어왔을 경우, JSP 컨테이너가  JSP 파일을  .java 파일로 변환 후 생성

2. .java 파일은 .class 파일로 컴파일

3. Execute(실행)를 통해 HTML 파일 생성 

4. 결과물을 웹브라우저에게 전송 

 

 

컨테이너

컨테이너는 서블릿의 생명 주기를 관리하고 JSP를 서블릿으로 변환하는 기능을 수행하는 프로그램

 

1) Servlet Container

서블릿을 관리해주는 역할로 서블릿의 생명 주기를 관리해 요청에 따른 스레드를 생성한다시프트웨어 재단에서 관리하는 HTTP 웹서버이다.

서블릿 표준 API에서 제공하는 추상 클래스와 인터페이스를 구현한 클래스를 제공하여 기본적인 동작 방식과 API 호환성을 지원한다. 즉, 개발시의 서블릿컨테이너와 다른 컨테이너에서도 수행 및 유지보수가 가능하다.

 

2) JSP 컨테이너

JSP를 서블릿으로 변환하는 역할

 

JSP 파일 변환 과정
jsp 파일 동작 단계 

 

JSP, Servlet의 차이 ?

JSP

Servlet

- 키워드가 태그화 되어 서블릿에 비해 쉽다

- 자바코드를 <% %> 태그 안에 처리해야 한다

- HTML처럼 태그를 사용해 자바코드도 사용 가능하다

- 자바코드로 구현하고 컴파일 후 배포해야 한다

- HTML 태그로 문자열("") 스크림으로 처리해야 한다

- 코드가 수정되면 다시 컴파일 후 배포해야 한다

 

 

 

JSP, Servlet의 역할 ?

JSP는 JSP기술의 장점을 최대한 활용 할 수 있는 웹어플리케이션 구조에서 사용자에게 결과를 보여주는 프리젠테이션 층을 담당하고 Servlet은 Servlet기술의 장점을 최대한 활용 할 수 있는 사용자의 요청을 받아 분석하고 비지니스 층과 통신하여 처리하고 처리한 결과를 다시 사용자에게 응답하는 컨트롤러 층을 담당한다.

 

 

JSP 간단한 문법

<% 자바 코드들 %>                -> 변수, 메서드 선언시 클래스에 비유하면 클래스 내 메서드 지역변수인셈
                                                    또한 자바코드 작성 영역이기에 액션태그, jstl 작성 불가
<%@    지시자  %>
<%! 변수 / 메서드 선언 %>     -> 클래스에 비유하면 멤버변수로 선언되는 셈
<%= 간단한 실행(변수값 출력...) %>

out.print : 웹 브라우저로 출력
out.println : 웹 브라우저로 출력 

request.getParameterValues(원하는 파라미터명);  :  파라미터값이 여러개일 때 배열로 받아주는 메서드
                                                                                  (변수 또한 String[] 타입이어야 함)

 

 

HTML 구조

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 문서의 제목 (title 태그)</title>
</head>
<body>
	<h1> 제목 크기 1 (h1) </h1>
	<h2>제목 크기 2 (h2)</h2>
	<p> 단락 부분 (p)</p>
</body>
</html>

<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시하는 선언

                                  (태그가 아니며 선언문 미작성시 브라우저에서 HTML4로 실행)

 

<html> : HTML 문서의 루트(root) 요소를 정의

 

<head></head> :  HTML 문서의 메타데이터(metadata)를 정의

(메타데이터(metadata) : HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보)

(이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현)

 

<title></title> : HTML 문서의 제목(title)을 정의 (웹 브라우저의 툴바에 표시)

 

<body></body> : 웹 브라우저를 통해 보이는 내용(content) 

 

<h1>~<h6> : 제목(heading)을 나타낸다

 

<p> : 단락(paragraph)을 나타낸다

 

<meta charset="UTF-8">  : HTML 문서에 사용된 문자셋에 대한 정보를 <head> 태그 내의 <meta>태그에 명시

                                            (위 코드는 HTML5에서 UTF-8의 경우일때다)

문자셋의 종류 - UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋

 

<a href="detail.jsp">HTML링크</a> : 다른 페이지나 사이트로 연결되는 하이퍼 링크 표현

                                                            <a>태그는 텍스나 단락, 이미지 등 다양한 HTML 요소에 사용

                                                            <a> 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트 URL 주소를 명시

 

 

HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공한다

또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝난다

속성값은 언제나 따옴표로 감싸는 것이 좋다 (오류 발생 방지)

 

문법

<태그이름 속성이름="속성값">

 

 

 

HTML 입력 양식

1) Form 요소

웹페이지에서 사용자로부터 입력받을 때 사용하는 요소, 사용자가 입력한 데이터를 서버로 보낼 때에도 사용

 

문법

<form action="처리할페이지주소" method="get|post" name="loginform"></form>

(1)action 속성

입력받은 데이터를 처리할 서버 상의 스크립트 파일 주소를 명시

이렇게 전달받은 데이터를 처리하는 스트립트 파일을 폼 핸들러(from-handler) 라고 한다

 

(2)method 속성

입력받은 데이터를 서버에 전달할 방식을 명시 

=> 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 

 

GET : 주소에 데이터를 추가하여 전달하는 방식

           데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터 크기 또한 제한적

           따라서 검색 엔진의 쿼리와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용

    

POST : 데이터를 별도로 첨부하여 전달하는 방식

            데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없음

 

(3)name 속성

해당 폼의 이름(name)을 명시 (변수와 유사, 전송을 위한 필수 요소) , 속성값 : 텍스트

<form action="/examples/media/action_target.php" name="loginform">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="button" onclick="submit()" value="제출하기"></button>
</form>

<script>
    function submit() {
        document.forms["loginform"].submit();
    }
</script>

 

(4) accept-charset

폼 전송에 사용할 문자 인코딩 지정, 속성값 = 문자셋

 

(5) <fieldset> 태그

폼 내부 영역 설정

 

(6) <legend> 태그

fieldset의 제목 설정

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form 태그 테스트</title>
</head>

<body>
	<form action="#" method="get">
		<fieldset style="width:150">
			<legend>개인 정보</legend>
			이름 : <input type="text" name="name" /><br />
			나이 : <input type="text" name="age" /><br />			
		</fieldset>
		
		<fieldset style="width:180; height:180">
			<legend>특이사항</legend>
			취미 : <input type="text" name="hobby" /><br />
			특기 : <input type="text" name="specaility" />
		</fieldset>
		
		<input type="number" value="전송" />
	</form>
</body>
</html>

 

 

(7) <select> - <option> 태그

여러 옵션 중 선택할 수 있도록 리스트박스 생성하는 태그

같이 전송할 키 값은 name 속성, 전달될 값인 value 속성은 <option> 태그에서 설정

 

예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>select와 option 태그 테스트</title>
</head>

<body>
	<form action="#">
		<select name="month">
			<option>월을 선택해주세요</option>
			<option value="1">1월</option>
			<option value="2">2월</option>
			<option value="3">3월</option>
			<option value="4">4월</option>
		</select>
		
		<select name="color" size="3">
			<option value="red">빨강</option>
			<option value="blue">파랑</option>
			<option value="black">검정</option>
			<option value="yellow">노랑</option>
		</select>
	</form>
</body>
</html>

 

2) Input 요소의 속성

Input 태그는 사용자로부터 정보를 입력받는 용도로 input 태그의 type 속성을 통해 입력 양식을 변경하여 사용

예) <input type="text" name="id" value="id초기값은wasd" required="required" />

 

Input 요소 속성 종류

Input 속성 종류  설명
value 입력 필드의 초기값 ( 사용자가 변경 가능)
name 서버로 전달되는 이름
maxlength 입력 필드에 입력할 수 있는 문자의 최대 길이
size 입력 필드에 보여지는 input 요소의 크기 설정
maxlength 속성과 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미 
(입력될 수 있는 문자의 최대 길이와는 무관 !!! 그냥 입력 필드에서 보여지는 최대 길이일뿐
더 길게 입력할 수 도 있다)
required 폼 데이터가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드 명시
boolean 값이기 때문에 속성 사용하려면 required="required" 혹은 required라고 입력
readonly 읽기 전용 속성
예) 게시판 게시글의 상세 페이지에서 input 태그에서 사용될 수 있다 (수정할 수 없기에)
autofocus 웹 페이지 로딩시 이 속성을 지정한 태그로 포커스가 이동
(HTML5 추가사항)
pattern 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용
예 - 이메일 패턴 ) pattern = "[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*"
(HTML5 추가사항)
min / max input 요소에 입력할 수 있는 최솟값, 최댓값을 명시
step input 요소에 입력할 수 있도록 허용된 숫자 간격 명시
placeholder input 요소에 입력되어야 할 값에 대한 힌트 제공
(placeholder 속성값은 해당 입력 필드에 포커스가 오게 되면 더 이상 표시되지 않음)

 

HTML 속성 종류

HTML 속성 종류 설명
align="left / right / center / justify" 정렬하고 싶을 때 사용(왼쪽, 오른쪽, 중앙, 왼쪽 오른쪽 열에 맞추어 정렬)
예) <tr align="center">
colspan="숫자 n" 가로 방향으로 n칸만큼 셀 병합 (열 병합)

 

 

 

type 속성값 종류

type 속성값 설명
text 텍스트를 입력하는 창 생성
textarea 사용자로부터 여러 줄의 텍스트를 입력 받음 (닫는 태그도 존재해야 함)
textarea 태그에는 value가 없기에 어떤 값을 불러오고 싶다면 시작태그, 종료태그 사이에 삽입
예) <textarea= ~~~>원하는값</textarea>
password 비밀번호를 입력하는 창 생성
(입력받은 문자나 숫자는 별표나 작은 원 묘양 표시)
radio 라디오 버튼을 생성
(사용자로부터 여러 개 옵션 중 하나의 옵션만을 입력받음)
(이때 서버로 정확한 입력 전송을 위해 반드시 모든 input 요소의 name의 속성값이 같아야 함)
checkbox 체크박스 생성
(사용자로부터 여러 개 옵션 중 다수의 옵션을 입력받음)
(라디오 버튼과 달리 여러 개의 옵션을 한 번에 입력 받음)
(이때 서버로 정확한 입력 전송을 위해 반드시 모든 input 요소의 name의 속성값이 같아야 함)
file 사용자로부터 파일을 전송받을 수 있음 
image 이미지를 전송 버튼으로 만듦
hidden 사용자에게 보이지는 않지만 서버로 전송
submit 서버로 제출/전송하는 버튼 생성
button 일반 버튼 생성, 어떤 기능의 버튼으로 만들지 따로 명시해야 함 (onclick="~~")
number 1씩 증가 또는 감소할 수 있도록 위아래 화살표 버튼 제공
(증감기능은 별도로 설정)
range 일정 범위 설정하여 사용자가 드래그 형태로 값을 설정
date 날짜를 선택할 수 있는 입력필드
datetime-local 날짜와 시간을 선택할 수 있는 입력필드
week 날짜를 선택할 수 하여 해당하는 주를 선택하는 필드
time 시간을 선택할 수 있는 입력 필드
color 색을 선택할 수 있는 입력 필드
(입력 필드의 기본값은 “#000000”으로 검정색을 나타냄)
(반드시 해시 문자(#)로 시작하는 총 7자리의 16진수 값이 와야 함)		 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 전용 속성들</title>
</head>

<body>
	<form action="#">
		<input type="number" step="1" max="10" min="1" /><br />
		<input type="range" step="1" max="10" min="1" /><br /><br />
		
		<input type="date" /><br />
		<input type="datetime-local" /><br />
		<!-- datetime은 HTML5에서 지원하지 않음 -->
		<input type="week" /><br />
		<input type="time" /><br />
		
		<input type="color" />
		<!-- 간단히 하기 위해 name 속성은 명시하지 않음  -->
		<!-- 해당 태그들은 value 속성값으로 추출할 수 있음 -->
	</form>
</body>
</html>

 



HTML 예시 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기 화면</title>
</head>
<body>
<form action="write.jsp" method="get">
	<table>
		<tr><th colsapn="2">글쓰기화면</th></tr>
		<tr>
			<td>제목</td>
			<td><input type="text" name="title" required="required" size="48" maxlength="33" /></td>
		</tr>
		<tr>
			<td>내용</td>
			<td><textarea rows="10" cols="50" name="content" required="required" maxlength="300"></textarea></td>	
		</tr>
		<tr>
			<td>작성자</td>
			<td><input type="text" name="writer" required="required" size="20 "maxlength="25" /></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="submit" value="저장" />
				<input type="button" value="취소" onclick="location.href='list.jsp'"/>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

 

 

3) <link> 태그

링크 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시

rel 속성은 link 요소에 반드시 명시되어야 하는 필수 속성

 

문법

<link rel="속성값">

속성값

속성값 설명
stylesheet 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옴

예시

<head>
	<link href="myform.css" rel="stylesheet" type="text/css">
</head>

+) JavaScript 문법

환경 개발 시에, 프로그램이 기동할 때 뭔가를 작동하게 하고 싶다! 이럴 때 사용되는 이벤트

<body onload="" >

1) 따옴표 안에 자바스크립트 작성

예) <body onload="alert('안녕 세계야!');">

 

2) 혹은 함수 선언 후 함수 호출 

<script type="text/javascript">   
		function gotoList() {
			document.location.href="list.jsp";   // body 사이에 있으면 도큐먼트 생략 가능 
		}                                      
	</script>
</head>

<body onload="gotoList()">

아이디와 비밀번호, 이메일를 입력받는 동적 Web Project 예제

log_form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
 	아이디와 비밀번호를 입력 받는 화면 
	<form action="log.jsp" method="get">
		 아이디   : 
		 <input type="text" name="id" required="required" placeholder="20자이내 입력" /> 
		 <br>
	 	비밀번호 : 
	 	<input type="password" name="pw" required="required" placeholder="영문, 숫자 포함 20자  이내 입력" /> 
	 	<br>
	 	이메일 :
	 	<input type="email" name="mail" required="required" />
	 	<br>
 		<input type="submit" />  <input type="reset" />
	</form>
</body>
</html>
log.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>log.jsp</title>
	</head>
		
	<body>
		로그인 화면 
		<%
		String id=request.getParameter("id");
		String pw=request.getParameter("pw");
		String mail=request.getParameter("mail");
		%>
		
		입력된 아이디 : <%=id %>
		<br>
		입력된 비밀번호 : <%=pw %>
		<br>
		입력된 이메일 : <%=mail %>
	</body>
	
</html>

 

log_form.html 파일 Run as -> Run on Server 실행 결과

아이디, 비밀번호, 이메일 입력창
아이디, 비밀번호, 이메일 입력 후 나타나는 창 (log.jsp)