반응형
웹 개발에서 스크립팅에 대한 두 가지 다른 접근 방식
= SSS(Server-Side Scripting) & CSS(Client-Side Scripting)
- 주요 차이점은 스크립트가 실행되는 위치
SSS(Server-Side Scripting)은 콘텐츠를 클라이언트로 보내기 전에 서버에서 처리 및 데이터 조작을 처리한다.
CSS(Client-Side Scripting)은 콘텐츠를 조작하고 브라우저 내에서 사용자와 직접 상호 작용한다.
[Server-Side Scripting와 Client-Side Scripting의 차이점]
1. 서버측 스크립팅(SSS)
- SSS는 내용이 클라이언트의 브라우저로 전송되기 전에 웹 서버에서 실행되는 스크립트를 작성하는 작업을 포함한다. 즉, 스크립트의 처리가 서버측에서 수행되며, 서버는 클라이언트의 브라우저로 전송되는 최종 HTML, CSS 및 JavaScript 코드를 생성한다.
1.1) 특징
| 실행 위치 | 스크립트는 웹 서버에서 실행된다. |
| 데이터 조작 | 서버 측 스크립트는 종종 데이터베이스 쿼리, 데이터 처리 및 비즈니스 로직 구현과 같은 작업을 수행하는 데 사용된다. |
| 보안 | 소스 코드가 클라이언트에 표시되지 않기 때문에 중요한 작업에서는 서버 측 스크립팅이 더 안전한 것으로 간주된다. |
| 클라이언트에 로드 | 클라이언트의 브라우저는 완전히 렌더링된 콘텐츠를 수신하여 클라이언트 측의 로드를 줄인다. |
| 용례 | PHP, Python(장고와 같은 프레임워크 사용), Ruby on Rails, ASP.NET, Node.js(서버 측 렌더링 사용). |
1.2) 용례
<!DOCTYPE html>
<html>
<head>
<title>Server-Side Scripting Example</title>
</head>
<body>
<?php
$currentTime = date("H:i:s");
$greeting = "";
if ($currentTime >= "05:00:00" && $currentTime < "12:00:00") {
$greeting = "Good morning!";
} elseif ($currentTime >= "12:00:00" && $currentTime < "18:00:00") {
$greeting = "Good afternoon!";
} else {
$greeting = "Good evening!";
}
echo "<h1>$greeting</h1>";
?>
</body>
</html>
2. 클라이언트측 스크립팅(CSS)
- CSS는 클라이언트의 브라우저 내에서 실행되는 스크립트를 작성하는 것을 포함한다.
- 이러한 스크립트는 서버로부터 웹 페이지를 수신한 후 웹 페이지의 내용과 동작을 조작하며, 클라이언트측 스크립팅은 종종 대화형 및 동적 웹 경험을 만드는 데 사용된다.
2.1) 특징
| 실행 위치 | 스크립트는 클라이언트의 브라우저 내에서 실행된다. |
| 사용자 상호 작용 | 클라이언트 측 스크립트는 버튼 클릭, 양식 제출, 마우스 이동과 같은 사용자 작업에 응답할 수 있다. |
| 즉각 피드백 | 클라이언트 측 스크립트는 서버 왕복 없이 사용자에게 즉각적인 피드백을 제공할 수 있다. |
| 속도 | 클라이언트 측에서 실행되기 때문에 일반적으로 사용자 상호 작용에 대한 응답 속도가 더 빠르다. |
| 용례 | HTML / JavaScript 상호 작용을 향상시키고 동적 웹 요소를 만드는 데 사용되는 주요 클라이언트 측 스크립트 언어 |
2.2) 용례
<!DOCTYPE html>
<html>
<head>
<title>Client-Side Scripting Example</title>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name === "") {
alert("Please enter your name.");
return false;
}
if (email === "") {
alert("Please enter your email address.");
return false;
}
if (!email.includes("@")) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Client-Side Form Validation</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
반응형