[7/7] WAS와 아파치 톰캣을 이용하여 웹서버 환경설정하기

클라이언트는 웹 브라우저(URL)를 통해 웹서버에게 요청한다.
이때 방식은 크게 2가지이다
- URL주소에 값과쌍이 전달(=Query String)되는 방식인 Get방식
- 엔티티 Body부분에 숨겨져 전달되는 방식인 Post방식
웹서버에서는 어플리케이션을 실행시키기 위한 WAS(Web Application Server) 서버 환경이 마련되어 있어야한다

웹서버	WAS
웹 클라이언트(웹 브라우저)에게 컨텐츠를 제공하는 역할. 즉, http프로토콜로 웹브라우저에게 전달하는 역할	웹 서버에서 어플리케이션이 동작 할 수 있도록 하는 역할 서블릿을 클래스를 객체(인스턴스)로 만들어 메소드가 호출되도록 하는 역할을 하므로 다른말로 웹 컨테이너라고도 한다. -> 서블릿만들어서 app으로 등록만해주는것이 개발자의 역할!

WAS의 종류에는 Apache Tomcat, Jeus 등등이 있다. (Tomcat을 사용할예정!)
톰캣이 파싱하여 HTML이나 XML 등으로(= CSL) 다시 웹 브라우저에게 전달한다
CSL(Client Script Language) : 클라이언트측에서 해석되는 언어
브라우저는 CSL를 받아서 해석하는 브라우저엔진이 존재.
브라우저엔진에 따라 해석하는 방법이 다르므로 다양한 브라우저가 존재
자바스크립트는 동적인 언어임...!! 브라우저에 따라 될수도 안될 수도 있음
자바는 정적인 언어로 컴파일에 의해 실행이 됨
입력, (입력을 갖고와서-> home태그를 사용 - java가 필요)처리, 출력

📌브라우저를 이용하여 값을 전달하는 방식

get방식
- 가장 기본적인 방식
- url에 쿼리스트링을 이용한다( >> url자체에 값이 들어가기 때무넹 보안에 문제가 생김)
- 장점 : 속도가 빠르다
- 단점 : 보안상의 문제가 있다. 소량의 데이터만 처리 가능하다
post방식
- request메세지으로 요청한다 -> 여기안에 많은 정보를 저장하여 전달한다
- 헤더와 바디를 가지고 있는데 이것들이 용량이 크다.
- 그래서 대량의 데이터를 쓰려면 post방식을 사용하면된다
- home태그를 꼭 사용해야만한다
- 응답을 할때는 response메세지에 html, sml, json등등, + 웹상태를 저장하여 전달한다
웹 상태
- 상태코드(sc) 100 : 나 실행중이야
- 200 : ok(잘 전달했다) -> 파싱렌더링해서 출력해줄게
- 300 / 301 : 다시요청(300 : 동일한 url로 다시요청해) or (301 : 서버가 요청한 url로 다시 요청해 - java이용)
- 400/500 : 오류(400 : 요청오류-404 not found 익셉션...)/ 500(실행오류-널포인트 익셉션이 젤 많아요...)

📌이클립스에서 WAS를 이용하기 위한 환경설정 과정

1. was를 다운받는다

2. 이클립스에 등록해준다

3. 서버로케이션을 바꿔주면 개발시, 더 편리하다

4. 프로젝트를 다이나믹웹프로젝트로 만들되, 웹자원들이 웹컨텐트의 디렉토리에 저장될 수 있도록 한다

5.요청하기 위해서는 프로젝트이름을 이용한다(context라고함)

6.문서들의 인코딩셋을 바꿔주도록한다

7.문서를 만들되, html파일 css, javascript를 실행시킬 수 있도록 웹브라우저를 설정해주면된다.

📌1. was를 다운받는다

톰캣을 다운받으면 아래와 같은 폴더들이 생긴다

webapps : 웹에관련된 자원을 저장
was는 저 폴더에 있는 자원에만 응답하기 때문에 중요하다!!

📌2.톰캣을 사용하기 위해 기본설정을 한다

Server Location을 metadata에서 Tomcat installation의 webapps 경로로 바꿔주면 개발시, 더 편리하다
오라클 서버(?)를 이용하면 8080과 겹치기 때문에 8000번으로 바꾸어 준다(충돌하지만 않는다면 다른 포트도 가능)
아파치는 기본으로 8080포트를 사용함

[Tomcat v9.0 Server at localhost]에서 우클릭을하면 Start or Stop을 할 수 있다

우클릭해서 delete나, remove는 되도록이면 절대절대 하지 말것..!! 심각한 문제를 일으킬 수 있다고 함
서버 밑에 프로젝트가 하나 생성될 시 (프로젝트를 삭제하여도)삭제가 불가능해지므로 주의하도록 하자!

서버를 삭제하거나 추가할때 servers창에서 remove하는것이 아니라, 위의 창에서 삭제/추가해야한다.

📌Dinamic web project만들기

Generate web.xml deployment descriptor를 체크하고 생성하면, 웹자원들이 웹컨텐트의 디렉토리에 저장될 수 있기 때문에 개발시 더 편리하다
Context root이름을 프로젝트 이름으로 하면 요청받을때 더 편리(?)하다

서버를 start하면가 eclipse가 쓰는 workspace디렉토리의 data가 was가 사용하는 디렉토리(webpas의 web파일)로 전달된다.

만약 톰캣라이브러리가 없다면 properites창에 들어가서 설정해주면된다.

만약 Libraries에서 Tomcat이나 jre가 없다면 위의 properties창의 java Build Path에서 라이브러리를 추가해주도록 한다

📌프로젝트에 [index.html] HTMl파일을 만들어 준다

템플릿 선택할때 강한 태그를 원한다면 XHTML을 선택하면된다(조금이라도 태그가 틀리면 출력되지 않는다)
출력은 일단 되게 하고 싶다면 HTML4를 사용하면된다
html5는 xhtml의 장점과 html4의 장점을 섞어놓았다 (저는 HTML5를 이용하겠습니다!)
HTML5를 사용하는 큰 이유중에 하나는 Semantic태그를 쓸 수 있기 때문이다.
Sementic태그는 HTML의 태그의 의미를 정확하게 알 수 있으므로 퍼플리싱하기 좋아진다.
따라서 누구나(다양한 브라우저) 웹에 접근해서 쓰기 좋아진다!

File들의 Encoding이 기본적으로 EUC-KR로 설정되어 있기 때문에 UTF-8로 변경해준다

General 카테고리에서 바꾸는것(JAVA파일의 인코딩이 바뀌기 때문에 모든 java파일이 깨진다 ㅠㅠ)이아니라 Web카테고리에서 바꿔야한다

📌예제

<!-- 마크업language 주석문 -->
<!-- HTML(Hyper Text MarkUp Language : 웹에서 사용되는 출력 전용 언어 - 브라우저 엔진에 의해 해석되어 실행 -->
<!-- 태그를 이용하여 값을 표현하는 언어 -->

<!-- DOCTYPE : 문서 형식(필수) - HTML5를 이용한 문서 -->
<!DOCTYPE html>
<!--  태그를 이용하여 문서 작성 - 대소문자를 구분하지 않는다 -->
<!-- 시작태그와 종료태그가 하나의 짝으로 구성되어 있다 - 독립태그도 존재 -->
<!-- 태그는 계층적 구조로 표현됨 - 상위태그와 하위태그 존재 -->
<!-- 시작태그와 종료태그 사이에는 하위태그 또는 태그내용 표현 -->
<!-- 시작태그에는 속성과 속성값을 이용하여 태그를 다양하게 표현 -->

<!-- html태그 : HTML문서의 최상위 태그 -->
<!-- 하위태그 : head태그와 body태그가 존재 -->
<html>

<!-- head태그 : HTML문서의 대한 정보를 제공하기 위한 태그 -->
<!-- 하위태그 : meta태그, title태그, script태그, style태그, link태그 등등 -->
<head>

<!-- meta태그 : HTML문서에 대한 상세정보를 속성과 속성값으로 제공 -->
<!-- charset속성 : 문서에 대한 문자형태(인코딩)을 속성값으로 설정 -->
<!--  기본속성값 : ISO-8859-1(서유럽어) -->
<meta charset="UTF-8">

<!-- title태그 : 문서의 제목 -->
<title>페이지 타이틀</title>
</head>

<!-- body태크 : 브라우저 출력영역(Document의 정보)를 출력하기 위한 태그-->
<!-- 하위태그 h1, div, p, img, span, form 등 => box모델(Box model) -->
<!--  박스모델은 블럭레벨태그와 인라인레벨 태그로 구분 -->
<!--  블럭레벨 : 박스모델 하나가 하나의 라인을 모두 사용하는 태그 : div, f1, p, ol, ul-->
<!--  인라인 레벨 태그 : 박스모델 여러 개가 하나의 라인을 사용하는 태그 : img, span, input, select 등 -->
<body>
	<!-- hn태그 : 테그내용을 문단의 제목으로 출력(n : 1-6 출력크기(max 1)할 때 사용 -->
	<!-- align 속성 : 태그내용을 정렬하여 출력하기 위한 속성 -->
	<!--  속성값 : left(기본) right, center, justify-->
	<h1 align = "center">제목1</h1>
	<h2 title="문단의 제목을 출력합니다.">제목2</h2>
	<h3>제목3</h3>
	<h4>제목4</h4>
	<h5>제목5</h5>
	<h6>제목6</h6>
	
	<!-- hr태그(블록레벨) : 수평선을 출력 -->
	<!-- width 속성 : 박스모델의 폭을 속성값으로 설정. 단위 : 픽셀px(기본) -->
	<hr width = "600">
	
	<!-- p태그 : 태그내용을 하나의 단락으로 표현하여 출력 -->
	<!-- 태그 내용이 박스모델의 폭을 벗어난 경우 자동 줄바꿈 -->
	<!--  공백이 여러개 존재해도 하나의 공백으로 처리되어 출력됨 -->
	<!--  b태그(인라인) : 태그내용을을 굵게 출력-->
	<!-- i태그 : 태그 내용을 기울게 출력-->
	다음주 부터 세미 프로젝트 시작예정입니다<br>
	다음주 부터 세미 프로젝트 시작예정입니다
	
	<p>다음주 부터 세미 프로젝트 시작예정입니다<p>
	<p>다음주 부터 세미 프로젝트 시작예정입니다<p>
	<p>HTML과 CSS는 웹사이트를 구현하기 위한 <br> 디자인 관련 언어입니다.<p>
	<!-- HTML Escape문자 : HTML에서 사용불가능한 문자를 표현하기 위한 문자 -->
	<p> &lt;홍길동&gt;님, &nbsp; 반갑습니다.</p>
	
	<!-- pre태그 : 태그내용을 그대로 출력 -->
	<pre>홍길동님,                   반갑습니다</pre>
	
	<!-- div(블럭레벨)태그 : 박스모델을 하나의 영역으로 표현 : 블럭레벨 -->
	<!-- span태그 : 박스모델을 하나의 영역으로 표현 : 인라인 레벨 -->
	<!-- style속성 : css속성과 속성값을 사용하여 박스모델에 디자인 -->
	<div style = "font - size: 24px">오늘은 <span style = "color: red ">2020년 7월 7일 화요일</span> 입니다.</div>
	
</body>
</html>

📌Box Model

-박스모델은 블록레벨과 인라인레벨로 나뉜다

head	meta
	title
	script
	style
	link...
body	h1~h6
	hr
	p
	b
	i
	div
	span...

*html은 문서의 구조를 만들어주는 역할을 하고 대부분의 디자인은 CSS가 담당한다.

저작자표시 비영리 동일조건

'💻 수업정리 (2020) > CSS & HTML' 카테고리의 다른 글

[7/13] 박스모델 (0)	2020.07.13
[7/10] font의 사용과 이미지 사용 (0)	2020.07.10
[7/9] 폼태그와 CSS시작 - 선택자 (1)	2020.07.09
[7/8 HTML] 태그 이용하기 (0)	2020.07.08