정적 웹은 뭐고 동적 웹은 뭔가요?

우리가 인터넷에서 보는 웹사이트들은
정적 웹이나 동적 웹, 또는 이 둘의 혼합으로 구분될 수 있어요.

HTML, CSS, JavaScript 편에서 살펴봤던 정적 웹과는
동적 웹이 어떻게 다른지, 그리고 어떻게 구현할 수 있는지

PHP를 사용해서 간단한 동적 웹의 예시를 살펴보고,
정적 웹과 동적 웹이 각각 어떤 용도에 적합한지 알아봅니다.




🎬 영상 주요 포인트

📦 정적 웹

정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. 이전의 이 영상에서 어떻게 HTML, CSS, Javascript로 어떻게 웹사이트를 만들 수 있는지 보여드렸죠? 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. ... 결국 정적 웹의 기준은 접속할 때마다 받게 되는 HTML, CSS, Javascript 코드들, 그리고 동봉된 이미지, 동영상 등의 파일들이 같은가에요. 좀 더 정확히는, 서버에서 이걸 매 번 가공해서 제공하는게 아니라 프로그래머가 작성해서 갖다 준 제품들이 진열되어 있는 걸 그대로 가져가게 하냐는 거죠. 접속 시마다 내용이 변할 필요가 없는 사이트들 예를 들어 어떤 회사나 학교의 소개 페이지라던가 댓글 기능이 없는 블로그 페이지 등에 사용될 수 있겠죠.

🥛동적 웹

한편, 사용자들이 글을 올리는 게시판은 어떨까요? 글 열 개가 있던 게시판이 HTML 파일로 진열돼 있어요. 그런데 누가 글을 하나 더 올리면, 그때마다 개발자가 글이 열 한 개 있는 페이지를 새로 코딩해서 가져다 놓을 수는 없잖아요. 하물며 끊임없이 정보들이 올라오는 SNS 웹페이지 같은 곳은 말할 곳도 없겠죠. 그런 사이트는 편의점이 아닌 식당으로 만들어서 서버가 그때그때 요리를 하도록 해야 하는 거에요.

⭐️ 영상에서 코드 예제와 함께 살펴보세요!


🍿 더 자세한 내용은 영상에서 보실 수 있습니다.





관련 태그의 다른 영상들

HTML과 CSS를 제대로 알아보는 강좌입니다.
# HTML
# CSS
#
HTTPS가 뭐고 왜 쓰나요?
대칭키와 비대칭키 개념과 함께 HTTPS의 목적과 원리를 간략히 알아봅니다.
# HTTPS
# 대칭키
# 비대칭키
# 공개키
# 개인키
# 보안
#
PWA가 뭔가요?
떠오르는 모바일 트렌드! PWA는 뭐고 어떻게 만드는지 알아보기로 해요.
# PWA
# 네이티브 앱
# 웹앱
# 하이브리드 앱
# 크로스 플랫폼
#
GrqphQL이 뭔가요?
REST API와는 또 다른 신선함! GraphQL의 매력을 알아볼까요?
# GraphQL
# REST API
#
REST API가 뭔가요?
웹 개발자라면 꼭 알아야 할 REST API. 쉽게 설명해드립니다.
# REST API
# api
#
앵귤러, 리액트, 뷰가 뭔가요?
프론트엔드에도 프레임워크가 있다? SPA를 알아봅니다.
# Angular
# React
# Vue
# SPA
# 프론트엔드
#
쿠키, 세션, 캐시가 뭔가요?
어렴풋이 알지만 어떻게 다른지 헛갈리는 세 용어. 확실하게 알아보자구요.
# 쿠키
# 세션
# 캐시
#
왜 익스플로러를 싫어하나요?
웹 개발자들의 철천지 원수 익스플로러! 웹표준을 지키자구요.
# 브라우저
# 웹표준
# 크로스 브라우징
# 익스플로러
#
MVC 웹 프레임워크가 뭔가요?
Model? View? Controller? 코드와 함께 쉽게 알아봅니다.
# MVC
# 동적 웹
# 프레임워크
# 라이브러리
#
정적 웹은 뭐도 동적 웹은 뭔가요?
왜 HTML, CSS, JS로는 부족할까요? 정적과 동적 웹의 차이를 알아봅니다.
# 정적웹
# 동적웹
#
HTML, CSS JavaScript가 뭔가요?
웹사이트 개발의 핵심이 되는 삼총사! '갖다놓고 꾸미고 시킨다'를 기억하세요.
# HTML
# CSS
# 자바스크립트
#
# 브라우저
...
🌏 Why not change the world?