웹 브라우저가 읽을 수 있는 언어가 HTML, CSS, JavaScript밖에 없나요?
웹 브라우저가 기본적으로 이해하고 실행할 수 있는 언어는 HTML, CSS, JavaScript입니다. 그러나 웹 개발 환경에서는 다양한 언어와 기술이 사용됩니다. 이 글에서는 웹 브라우저가 이해하는 언어와 서버 사이드 언어에 대해 설명하고, 이들이 어떻게 협력하여 웹 애플리케이션을 만드는지 알아보겠습니다.
브라우저가 이해하는 언어
-
HTML (HyperText Markup Language):
- 역할: 웹 페이지의 구조를 정의합니다.
- 예: 텍스트, 이미지, 링크 등의 요소를 배치합니다.
- 예시:
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML 예제</title> </head> <body> <h1>안녕하세요, 웹!</h1> </body> </html>
-
CSS (Cascading Style Sheets):
- 역할: 웹 페이지의 스타일을 정의합니다.
- 예: 색상, 글꼴, 레이아웃 등을 지정합니다.
- 예시:
body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; }
-
JavaScript:
- 역할: 웹 페이지에 동적 기능을 추가합니다.
- 예: 사용자 인터랙션, 데이터 처리, DOM 조작 등을 수행합니다.
- 예시:
document.addEventListener('DOMContentLoaded', () => { const heading = document.querySelector('h1'); heading.textContent = 'JavaScript로 변경된 제목'; });
서버 사이드 언어
서버 사이드 언어는 웹 서버에서 실행되며, 데이터베이스와 상호 작용하고 동적인 콘텐츠를 생성하여 클라이언트에 전달합니다. 이 언어들은 웹 애플리케이션의 백엔드 로직을 처리하는 데 사용됩니다.
-
PHP (Hypertext Preprocessor):
- 역할: 서버에서 실행되어 동적 웹 페이지를 생성합니다.
- 특징: 배우기 쉽고, 다양한 웹 호스팅 서비스에서 지원됩니다.
- 예시:
<?php $name = "John Doe"; echo "<h1>Hello, $name!</h1>"; ?>
-
Ruby (Ruby on Rails):
-
역할: 간결한 문법과 강력한 프레임워크(Ruby on Rails)를 통해 웹 애플리케이션을 개발합니다.
-
특징: 코드가 간결하고 생산성이 높으며, 철학적으로 "Convention over Configuration"을 지향합니다.
-
예시:
# app/controllers/welcome_controller.rb class WelcomeController < ApplicationController def index @name = "John Doe" end end<!-- app/views/welcome/index.html.erb --> <h1>Hello, <%= @name %>!</h1>
-
-
Python (Django, Flask):
-
역할: 다양한 프레임워크(Django, Flask)를 통해 웹 애플리케이션을 개발합니다.
-
특징: 코드 가독성이 높고, Django는 "batteries included" 철학을 지향하여 많은 기능을 내장하고 있습니다.
-
예시 (Django):
# views.py from django.shortcuts import render def home(request): return render(request, 'home.html', {'name': 'John Doe'})<!-- home.html --> <h1>Hello, {{ name }}!</h1>
-
-
Java (Spring):
-
역할: 엔터프라이즈급 웹 애플리케이션을 개발하는 데 사용됩니다.
-
특징: 견고하고, 확장성이 높으며, 대규모 애플리케이션에 적합합니다.
-
예시:
@Controller public class HomeController { @GetMapping("/") public String home(Model model) { model.addAttribute("name", "John Doe"); return "home"; } }<!-- home.html --> <h1>Hello, ${name}!</h1>
-
-
JavaScript (Node.js):
-
역할: 서버 사이드에서도 JavaScript를 사용하여 웹 애플리케이션을 개발합니다.
-
특징: 비동기 I/O를 통한 높은 성능과 확장성을 제공하며, JavaScript를 프론트엔드와 백엔드 모두에서 사용할 수 있습니다.
-
예시:
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('<h1>Hello, John Doe!</h1>'); }); app.listen(3000, () => { console.log('Server is running on port 3000'); });
-
서버 사이드와 클라이언트 사이드 언어의 협력
서버 사이드 언어는 웹 서버에서 실행되어 HTML, CSS, JavaScript 형태의 결과를 생성하고, 이를 클라이언트(브라우저)에 전달합니다. 클라이언트는 전달받은 결과를 렌더링하여 사용자에게 보여줍니다.
예를 들어, PHP와 JavaScript를 함께 사용하여 동적인 웹 페이지를 만드는 예시는 다음과 같습니다.
<!-- example.php -->
<?php
$items = ["Apple", "Banana", "Cherry"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP and JavaScript Example</title>
</head>
<body>
<ul id="itemList">
<?php foreach ($items as $item): ?>
<li><?php echo $item; ?></li>
<?php endforeach; ?>
</ul>
<script>
document.getElementById('itemList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('You clicked on ' + event.target.textContent);
}
});
</script>
</body>
</html>이 예제에서 PHP는 서버에서 리스트 아이템을 생성하고, JavaScript는 클라이언트에서 클릭 이벤트를 처리합니다. 이렇게 서버 사이드와 클라이언트 사이드 언어가 협력하여 동적인 웹 애플리케이션을 만듭니다.
결론
웹 브라우저가 기본적으로 이해하고 실행할 수 있는 언어는 HTML, CSS, JavaScript입니다. 그러나 서버 사이드 언어인 PHP, Ruby, Python, Java, Node.js 등을 사용하여 동적인 콘텐츠를 생성하고, 이를 HTML, CSS, JavaScript 형태로 클라이언트에 전달함으로써 더 복잡하고 기능적인 웹 애플리케이션을 개발할 수 있습니다. 이처럼 클라이언트 사이드와 서버 사이드 언어가 협력하여 현대적인 웹 애플리케이션을 구현하는 것이 일반적입니다.
서버 사이드 언어는 웹 서버에서 실행되어 데이터베이스와 상호 작용하고, 서버 측 로직을 처리하며, 최종적으로 브라우저가 이해할 수 있는 HTML, CSS, JavaScript 코드를 생성합니다. 클라이언트 사이드 언어는 브라우저에서 실행되며, 사용자와의 인터랙션을 처리하고, 동적인 콘텐츠를 제공합니다.
이와 같은 협력을 통해 다양한 기능을 갖춘 웹 애플리케이션을 효율적으로 개발할 수 있습니다.
