[HTML5가 지원하는 주요 기능]
- 멀티미디어 기능 제공 - 플러그인 없이 음악, 동영상 재생
- 그래픽 지원 - 2차원, 3차원
- 서버와 클라이언트 간의 실시간 양방향 소켓 통신 지원 (e.g. 실시간 채팅, 온라인 게임)
- 다양한 장치 접근 (e.g. 배터리 잔량, 현재 위치, 알람 등)
- 시맨틱 태그 추가 (시맨틱 웹: 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹)
- CSS3 스타일시트 - 3차원 변환, 애니메이션 효과 등
ㅇ메타 태그(meta tag): 웹 페이지에 대한 추가 정보를 제공(메타데이터를 정의)
<!DOCTYPE html>
<html>
<head>
<title>Viewport Meta</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<h1>운영체제 기술블로그</h1>
<p>추가지식1) 가상머신(Virtual Machine)
가상머신은 소프트웨어적으로 만들어낸 가상 컴퓨터이다
가상머신을 설치하면 새로운 운영체제와 응용 프로그램을 설치하고 실행할 수 있다
e.g. java의 JVM(Java Virtual Machine)
가상 머신은 응용 프로그램이기 때문에 사용자 모드로 작동한다 마찬가지로 가상 머신상에 설치된 OS 역시 사용자 모드로 작동한다 그리고 그 응용 프로그램 역시 사용자 모드인데 커널 모드로 전환하기 어렵기 때문에 이때는 따로 하이퍼바이저 모드를 둔다
출처: https://claremont.tistory.com/entry/운영체제-ep1-운영체제의-큰-그림 [Go for IT:티스토리]</p>
</body>
</html>검색 엔진, 브라우저, 소셜 미디어 플랫폼 등이 웹 페이지를 이해하도록 도움을 준다
※ 메타 태그는 SEO(Search Engine Optimization)에 중요한 역할을 한다!
ㅇ데몬 HTTPD
웹 시스템의 서버 쪽에는 HTTP를 처리할 데몬 HTTPD가 설치되어 있다
ㅇCGI(Common Gateway Interface): OS나 DB와 같은 응용 프로그램에게 질문을 하고, 얻은 결과를 HTML에 맞게 변형하는 프로그램
웹 데몬 개발사에서 복잡한 문제를 처리할 수 있도록 강력한 스크립트 언어를 웹 데몬과 함께 제공한다
[3계층 구조(3-Tier Architecture)]
- 정적 페이지: 화면의 내용/데이터 등의 변동이 없는 페이지 (데이터베이스와 소통하지 않는 페이지)
e.g. 단순 HTML과 같은 정적 리소스
- 동적 페이지: 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지 (DB와 소통하는 페이지)
e.g. DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠
ㅁ웹 서버 - 정적 페이지에 대해 대응한다! 동적 페이지에 대한 처리는 직접 하지 않고, 웹 애플리케이션 서버에게 전달한다
e.g. NGINX, Apache HTTP Server(Apache)
ㅁ웹 어플리케이션 서버(WAS) - 동적 페이지를 처리한다! 필요한 데이터 연산을 위해 DB와 연결되어 있으며 데이터 조회/수정/삭제에 대한 처리를 요청한다
e.g. Apache Tomcat, WildFly
※ 왜 굳이 웹 서버를 사용할까?
1. WAS는 다양한 로직을 처리하는데 집중하는 것이 좋고, 웹서버는 정적 컨텐츠를 담당하는 데에 집중하는 것이 좋다
2. 기능을 분리하여 서버의 부하를 방지하기 위함도 있음 (서버 장애 방지)
- 일반적으로 웹서버보다 WAS가 상대적으로 더 잘 다운된다
3. 만약 WAS에서 모든 작업을 구현하게 하고, WAS에서 장애가 발생해버리면 클라이언트까지 그 장애가 전파될 수 있음
하지만? 웹서버가 존재한다면 WAS 장애 발생 시 에러 페이지를 내려주거나 다른 페이지로 랜딩시켜줄 수 있어 클라이언
트 WAS에 장애가 발생했는지 모르게 대처할 수 있음
"현업 관점에서는, 이러한 장애를 극복하는 대책을 마련하는 것이 상당히 중요"
[Spring] HTTP 통신 흐름 과정 정리(w/MVC 패턴)
※ 3-way handshake는 TCP 통신에서만 발생한다[공통] 브라우저(클라이언트) HTTP request → 3-way handshake(최초 연결 시) → Nginx case1) 정적 페이지 (HTML, CSS, JS 파일)그냥 바로 다시 브라우저에 정적 페이지
claremont.tistory.com
ㅇ반응형 웹: 웹 페이지 하나로 데스크탑, 태블릿 PC, 스마트폰 모두에 맞게 디자인이 자동으로 반응해 변경되는 웹
미디어 쿼리(media query)를 사용해 개발
미디어 쿼리 설정 예시)
<!DOCTYPE html>
<html>
<head>
<title>Media Type</title>
<style>
@media screen {
body {
background-color: red;
}
}
@media print {
body {
background-color: green;
}
}
</style>
</head>
<body>
<h1>데커 알고리즘 피터슨 알고리즘</h1>
<p>데커 알고리즘 피터슨 알고리즘</p>
</body>
</html>
ㅇ문서 객체 모델(DOM, Document Object Model): JS에서 HTML 문서를 접근하는 API
문서 객체란 HTML 태그를 JS에서 사용할 수 있는 개체로 만든 것이다
정적 생성: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성
동적 생성: 페이지를 실행 중에 JS를 사용해 문서 객체를 생성
객체 모델: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식
문서 객체 선택: HTML 태그를 JS에서 문서 객체로 변환
<!DOCTYPE html>
<html>
<head>
<script>
// 이벤트를 연결
window.onload = function () {
// getElementById() 메서드를 사용해 문서 객체 1개를 선택
let header = document.getElementById('header');
// 문서 객체 조작
header.style.color = 'orange';
header.style.background = 'red';
header.innerHTML = 'From JavaScript';
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
</html>
이벤트는 키보드 누르기, 마우스 클릭 등의 I/O 인터럽트를 의미한다
ㅇ이벤트 모델(Event Model): 문서 객체에 이벤트를 연결하는 방식
인라인 이벤트 모델: HTML 태그 내부에 JS 코드를 넣어 이벤트를 연결하는 방식
<!DOCTYPE html>
<html>
<head>
<title>Event Basic</title>
</head>
<body>
<button onclick="alert('지금 당신은 버튼을 클릭했습니다')">버튼</button>
</body>
</html>
[파일시스템 - 파일과 디렉터리]
절대 경로(absolute path): 루트 디렉터리부터 시작하는 경로
상대 경로(relative path): 현재 디렉터리부터 시작하는 경로
(참고) 대부분 OS에서의 특수문자 기능
현재 디렉터리: .
부모 디렉터리: ..
홈 디렉터리: ~(틸다)
참고 및 출처: HTML5 웹 프로그래밍 입문(윤인성), 프로그래머스 웹 서비스 개발의 이해(김송아)
'웹 > 웹 지식' 카테고리의 다른 글
| [웹 지식] 데이터 파싱이란?(feat. CSV, XML, JSON, YAML과 AJAX) (1) | 2024.10.04 |
|---|---|
| [웹 지식] AJAX와 CSV, XML, JSON, YAML (7) | 2024.10.04 |
| [웹 지식] 렌더링 - CSR과 SSR (w/TTV, TTI) (5) | 2024.10.02 |
| [웹 지식] 유지보수 vs 최적화 (0) | 2024.08.22 |
| [웹 지식] 사이드 이펙트(side effect) (1) | 2024.08.20 |
