클라이언트 사이드
업무담당자가 보는 화면 -> 브라우저
브라우저 역할: 인터프리터
서버쪽에서 처리된 결과가 클라이언트 사이드 쪽으로 다운로드 된다
뭐가 다운로드 되냐? 정적페이지가 다운로드 된다(css,이미지 등 리소스)
서버사이드
자바가 요청을 받아줄 수 없다
웹기반으로 처리해야하는데, 웹기반으로 처리한다는 건 HTTP 프로토콜 사용한다는 것이고, 이 프로토콜은 stateless(상태를 유지하지 않는다. 상태를 유지하기 위해 쿠키와 세션)다. 자바로 할 수 없다는 건 HTTP 지원을 하지 않는다는 것. 서블릿은 HTTP 지원을 하기 때문에 가능하다.
서블릿은 어떻게 정적페이지 다운로드가 될까? 서블릿이 HTML 자체를 내려보내기 때문에 가능. 서블릿이 자바니까 out.print를 해야해서 서블릿 안에 태그 쓰기는 어려움.
그래서 JSP가 나타났다(_java) 브라우저에 out.print 해서 화면에 보여야하니까 jap에서 _java로 -> class로(jsp에서 java로 갈 때 jar가 나타난 것
- doGET / doPost
url을 통해 요청은 서버사이드(서블릿)에 했는데, 응답이 나오는 채널은 JSP. 이게 mvc 패턴의 시작임(요청을 받는 곳과 응답하는 곳이 다르다. 그래서 요청을 할 때 request 객체가 필요하고, 응답할 때는 response 객체가 필요한 것.
처음 요청할 떄 init을 타고, 그다음 service -> destroy 이게 서블릿의 라이프사이클. 그런데 이게 싱글톤(하나)임. 나눠 쓰려고 하니까 쓰레드가 필요함.
JSP에 선언되는 변수는 대체로 지역변수
작성하는 모든 코드는 service에 들어감. 메소드에 파라미터 2개가 필요한 것. 거기에 요청객체와 응답객체가 들어감.
request - 듣기(서버 기준)
response- 응답
Servlet
- 요청을 받아준다
- request
JSP
- 응답을 담당: 담당하는 api response가 있다. 이 response로 mime을 정할 수 있다 ex.response.setCreatedType("text/html") 이런 식으로
- mime type에 따라서 다른 콘텐츠로 인식될 수 있음
TOMCAT - WAS 처리 영역에는 정적/동적이 있음
정적: CSS,JS,image
-> 클라이언트(브라우저)에 있음 - 브라우저 안에는 캐시메모리가 있다(기억하고 있다): 로컬스토리지,세션스토리지 -
동적: if문 등 제어문(자바, 서블릿, JSP-동적인 처리 해주는 언어)
-> 처리주체: 서버 - 서버에서 처리를 함(처리를 하면 결과가 있음) - 결과가 결정이 된다
- jsp도 html,css,js 쥐고 있다 - 브라우저에서 다운 받아 화면에 출력하게 한다
클라이언트와 서버 둘 사이의 거리가 있다 -> 동기화 이슈가 있다
gym.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>여기내GYM</title>
<link rel="stylesheet" href="/css/main.css" />
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c5dd04594745b1c49f203dcc785c3dc5"
></script>
<%@ include file="/common/bootstrap_common.jsp"%>
<script>
function getLoc() {
//insert here
}
</script>
</head>
<body>
<!--================================================================ -->
<%@ include file="/include/gym_header.jsp"%>
<!--================================================================ -->
<!--================================================================ -->
<div class="container">
<div class="main_header"></div>
<div class="main">
<div>이벤트존</div>
<hr style="height: 2px" />
<div class="mapwrap">
<div class="map" id="map" style="width: 500px; height: 400px">
여기
</div>
<script type="text/javascript">
const container = document.getElementById("map");
const positions = [
{
content: '<div style="padding:5px;">구디아카데미</div>',
latlng: new kakao.maps.LatLng(37.476773, 126.879959),
},
];
const options = {
center: positions[0].latlng,
level: 4,
};
const map = new kakao.maps.Map(container, options);
</script>
<input class="btnGeoloc" type="button" value="현재위치" onclick="geoLoc()">
</div>
<hr style="height: 2px" />
<table class="table" style="minwidth: 700px">
<tbody style="border: 1px solid lightgray">
<tr>
<td style="borderright: 1px solid lightgray">주소</td>
<td>
서울특별시 금천구 가산디지털2로 95 KM타워 3층 (T: 02-818-7950)
</td>
</tr>
<tr>
<td style="borderright: 1px solid lightgray">버스</td>
<td>
디지털3단지 사거리 정류장<br />
지선 5536/5714 간선 503/504 일반 21
</td>
</tr>
<tr>
<td style="borderright: 1px solid lightgray">지하철</td>
<td>지하철 1, 7호선 가산디지털단지역 5번출구 200m</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"></div>
</div>
<!--================================================================ -->
<!--================================================================ -->
<%@ include file="/include/gym_footer.jsp"%>
<!--================================================================ -->
</body>
</html>
main.css
* {
box-sizing: border-box;
border: 1px solid red;
}
.container {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
margin: 50px auto;
}
.main_header {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
justify-content: space-between;
margin-bottom: 20px;
}
.main {
display: flex;
text-align: center;
flex-direction: column;
width: 100%;
border: 2px solid lightgray;
border-radius: 20px;
padding: 10px;
max-width: 1200px;
min-height: 450px;
justify-content: space-between;
}
.mapwrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.map {
max-width: 500px;
height: 400px;
margin-bottom: 20px;
border: 2px solid lightgray;
border-radius: 20px;
}
.main_footer {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
justify-content: space-between;
margin-bottom: 20px;
}
.btnGeoloc {
border-radius: 10px;
border: 1px solid white;
background-color: rgb(105, 175, 245);
color: white;
font-weight: bold;
width: 80px;
height: 38px;
}
.btnGeoloc:hover {
background-color: rgb(58, 129, 200);
}