<< 학습 목표 >>
1. 정적 웹과 동적 웹의 차이를 이해하고 설명할 수 있다.
2. 클라이언트 사이드 언어와 서버 사이드 언어를 구분할 수 있다.
정적 웹(Static Web) : 개발자 등 제 3자에 의해 프로그램을 바꾸지 않으면 사용자는 계속 같은 내용을 보는 웹
동적 웹(Dynamic Web) : 개발자 등 제 3자에 의해 프로그램을 바꾸지 않아도 사용자는 상황에 맞는 적절한 내용을 볼 수 있는 웹
| 어디나 마찬가지지만 프로그래밍에서도 한 가지 말을 가지고 다양한 용어로 사용함 웹 = 웹 프로그램 = 웹 서비스 = 웹 어플리케이션 = 서버 프로그램 모두 같은 말임 |
현재 시간을 보여주는 웹 페이지가 있을 때 정적 웹과 동적 웹의 차이를 알아보자
( 결과를 보고 싶다면 아래 코드를 여러분이 알고 있는 방식을 사용해서 넣고 실행시켜보세요 )
<< 정적 웹 >>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 시간을 보여주는 웹 페이지</title>
<style type="text/css">
strong { color : red; }
</style>
</head>
<body>
<p>
현재 시간은 <strong>14시 29분 28초</strong> 입니다.
</p>
</body>
</html>
<< 동적 웹 >>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 시간을 보여주는 웹 페이지</title>
<style type="text/css">
strong { color : red; }
</style>
</head>
<body>
<p>
현재 시간은 <strong></strong> 입니다.
</p>
<script type="text/javascript">
let timeInfo = new Date().toLocaleString().split(" ");
let isPM = timeInfo[3] == "오후";
timeInfo = timeInfo[4].split(":");
if(isPM) {
timeInfo[0] = 12 + parseInt(timeInfo[0]);
}
let strongTag = document.getElementsByTagName("strong")[0];
strongTag.textContent = timeInfo[0] + "시 " + timeInfo[1] + "분 " + timeInfo[2] + "초";
</script>
</body>
</html>
위 두 코드를 보면 정적 웹은 보여줄 시간을 직접 넣었음
이렇게 어떤 데이터를 직접 넣었을 때를 하드 코딩(Hard Coding) 했다고 표현함
정적 웹의 경우 초가 바뀔 때 마다 개발자가 초를 계속 수정해줘야함
그러나 동적 웹은 보여줄 시간을 직접 넣지 않고 자바스크립트(JavaScript)로 계산한 후 넣었음
동적 웹의 경우에는 초가 바뀌어도 개발자는 할 일이 없음
이렇게 정적 웹과 동적 웹의 차이는 고정된 컨텐츠를 보여주느냐 상황에 맞는 컨텐츠를 보여주느냐임
정적 웹과 동적 웹의 또다른 차이는 무엇일까?
소스 코드를 보고 또다른 차이를 찾아보자
정적 웹과 동적 웹의 또다른 차이는 자바스크립트의 유무임
( 컴퓨터로 이 글을 보고 계신다면 위 글을 드레그, 핸드폰으로 이 글을 보고 계신다면 위 글을 꾹 누르고 ~ 임까지 드레그하세요 )
동적 웹을 구현하기 위해서 반드시 JSP, Servlet, Spring 등을 알아야하는것은 아님
자바스크립트와 같은 프론트엔드 언어만 알아도 동적 웹을 구현할 수 있음
그러나 더 폭 넓고 다양한 동적 웹을 구현하기 위해서는 JSP, Servlet, Spring 등을 알아야함
그렇다면 정적 웹은 필요 없는 것일까?
그렇지 않음
동적 웹이라고 해도 정적인 부분을 가지고 있음
위 동적 웹 코드에서 정적인 부분이 있음
어디? "현재 시간은"과 "입니다"
이런 부분까지 자바스크립트로 대체 할 필요는 없음
또한 우리 나라의 역사라거나 그 회사의 연혁, FAQ 같은 것들은 컨텐츠가 자주 바뀌지 않음
따라서 이렇게 컨텐츠가 자주 바뀌지 않는 것들은 정적 웹(HTML, CSS)으로 구현하고
상황에 맞는 컨텐츠를 보여줘야할 때는 정적 웹에 동적 웹(JavaScript, JSP, Servlet, ...)을 더해서 구현함
HTML, CSS, 자바스크립트와 같은 언어를 프론트 사이드 또는 클라이언트 사이드 언어라고 부름
JSP, Servlet, Spring 과 같은 것을 서버 사이드 언어 라고 부름
여기의 내용은 반드시 알아야하는 내용은 아니니 괜히 구분해서 헤깔리거나 어렵게 느껴진다면 여기 전체 내용은 잊어버려도 됨
'Servlet + JSP > Serlvet-Chapter01' 카테고리의 다른 글
| Chapter01. 개발 환경 구축하기 - 서버가 실행되지 않아요 (0) | 2023.02.23 |
|---|---|
| Chapter01. 개발 환경 구축하기 - 서버 설치 (0) | 2023.02.23 |
| Chapter01. 개발 환경 구축하기 - Eclipse 설치 (1) | 2023.02.22 |
| Chapter01. 개발 환경 구축하기 - JDK 설치 (0) | 2023.02.22 |
| Chapter01. 웹프로그래밍이란? (1) | 2023.02.22 |