HTML이란

이동언·2024년 7월 21일

CSR DOCTYPE DOM DTD Map POJO SSR WAS html jsp markup-language spa utf 8 내장객체 동적인 웹페이지 렌더트리 멀티 쓰레드 서블릿 쓰레드 토큰

new world

목록 보기

11/62

7.19 (금)

1. SSR (Server Side Randerling)이란?

👉 클라이언트가 서버에게 주소를 요청하게 되면 서버에서는 완전한 html을 생성하여 클라이언트에게 전달한다.
👉 일반적으로 www.google.com 을 작성하게 되면 구글서버에서 클라이언트에게 구글메인 페이지에 대한 html파일을 전달하는것이다.

2. CSR (Client Side Randerling) 이란?

👉 SSR과 다르게 클라이언트가 서버에게 요청을 하면, Json파일을 전달해주는데 Json파일을 전달받은 클라이언트는 jQuery table을 이용하여 직접 랜더링 하는것이다.

3. ASP,JSP,PHP 웹 프로그래밍 기술

📌 동적으로 웹페이지를 생성한다.
📌 서버 처리 용량으로 DB부하가 생겨 프레임워크가 많이 나오기 시작함
📌 그 중 대표적인것이 Spring Framwork

📌 ASP : MS에서 개발한 기술로 JS를 사용하고 서버에서 웹 페이지를 생성하여 HTML문서로 반환

📌 JSP : JAVA기반으로 HTML 내부 JAVA언어를 삽입하여 Java Servlet 컨테이너에서 실행

📌 PHP : HTML내부에 PHP코드를 삽입, 빠르고 강력한 DB처리 가능

4. 동적인 웹페이지란?

👉 서버에서 데이터를 처리하고 HTML을 동적으로 생성하여 사용자의 요청에 맞춰서 변화하는 웹페이지.
👉 예를들어, 온라인 쇼핑몰 웹페이가 있을때 웹 서버가 DB에서 해당 상품의 정보를 가져와 동적으로 HTML페이지를 생성하고, 상품의 가격, 재고상황등 실시간으로 확인가능한 페이지.

5. 멀티 쓰레드 프로그래밍

👉 동시에 두개의 메모리가 작업을 하는데 한 가지의 자원을 공유

👉 한 곳의 메모리가 다 사용해버릴수도 있음.

👉 예를들어 웹페이지에 사진이 랜덤으로 나오는 프로그램을 만들었는데, 한 사람이 웹페이지를 실행후 강아지사진이 나오고 있을때 다른 한 사람도 웹페이지를 실행해서 고양이 사진이 나오고 있는데 사진 깨짐현상이 발발함. 이것이 멀티쓰레드.

5-1. 멀티쓰레드

👉 코드를 관통하는 실
👉 new Thread : 새로운 스레드를 만들어라
👉 start : 시동걸고 출발
👉 i개의 스레드를 만들어놓고 (여기서는0,1,2,3) 스레드가 시작하는데
👉 run할때마다 랜덤적으로 i번째 스레드가 먼저 시작된다.
👉 4명이 한명한명이 끝날때까지 기다리는게 아니라, 동시에 실행되고 종료되는것.
👉 자카르타 EE에서 서버를 구동하기 위해 톰캣을 이용하게 되면 멀티쓰레드 처리까지 자동으로 사용된다.

5-2. Thread.sleep(1000);

👉 1초동안 cpu를 잡지않을건데 1초뒤에는 잡을수도있고 못잡을수도있다.

5-3. 서블릿

👉 동적웹페이지를 만들 때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술.

6. JSP

👉 jsp 파일내부 코드가 있으면 그 코드들을 out.xxx의 형태로 알아서 바꿔주는 역할
👉 하지만, jsp형식으로 바꿔야하는애도있고 바꾸면 안되는 애도있는데 <% ~~ %> 이렇게 내부안에 있는 애들은 jsp형식으로 처리하는것이 아니라 자바의 코드문법을 사용하기 때문에 jsp에서 변경하지 않고 그대로 사용한다.

6-1. directives : java에서는 import 부분으로 최상단에 위치한다.

→ ex) <%@ page import="java.util.Scanner" %>

6-2. scriptlet : <% %> 내부 부분으로 jsp안에서 java문법을 사용하는 블럭이다.

→ ex) <% String msg = "hi"; %>

6-3. expression : 표현식에 해당하며 java에서는 sout에 해당된다

→ ex) <%= msg %>

6-4. JSP 예시코드

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.util.Scanner" %> //import하는방법 = directives

<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<%
String msg = "hi";
for(int i=0; i<10; i++){
%> //여기 내부안에는 java형태로 사용해도 jsp형태로 변경되지 않음 = scriptlet
<h1><%= msg %> // 표현식 = expression = sout(결과)
</h1>
<%
}
%>
<br/>
<a href="hello-servlet">Hello Servlet</a>
</body>
</html>

7. Web Server / Web Application Server

Web Server
👉 웹 서버는 클라이언트의 요청을 받아 정적인 콘텐츠 (html파일, 이미지)를 제공
Web Application Server
👉 서블릿, JSP와 같은 자바기술을 이용하여 동적 웹페이지를 생성하고 DB연동지원
👉 동적 웹 애플리케이션의 개발과 실행을 중점으로
톰켓 = web server + was

8. 토큰

👉 데이터가 많이 생기면 구조가 생기고, 구조를 표시하기 위한 것을 토큰(Tap, \n)이라 한다.
👉 이러한 구조는 사람들이 트리로 만든다.
👉 구조가 복잡하면 토큰을 사용하기 어려워지는데, 그것을 위해 ML(Markup Language)

9. Markup Language

👉 데이터에 마킹을 해놓는것.
<시장>
<아이템> xxx </아이템>
<가게> xxx </가게>
</시장>

10. html

👉 html은 홈페이지를 만드는것이 아니라, 브라우저에 전달(처리)하는 메세지임.
👉 Markup Language의 대표작중 하나

11. <! DOCTYPE>

👉 !는 선언을 시작하는것, DOCTYPE은 HTML문서의 타입을 선언한다는 의미
👉 DOCUMENT = HTML

12. <.meta charset = “utf-8”>

👉 해당 HTML문서가 어떤 문자 인코딩 방식을 사용했는지 알려주는것.
👉 UTF-8은 전세계 대부분 언어를 지원하는 유니코드 방식중 한가지

13. DTD(Document Type Definition)

👉 Markup Language가 정확한 것인지 알 수 있는방법, 문서의 유효성 검사
👉 HTML 에서는 ! DOCTYPE만으로도 충분하므로 DTD를 명시할 필요없다.

14. DOM(Document Object Model)

👉 html태그가 있으면 실제로는 객체(Object)가 생성되는데
👉 document가 object화 되는것을 DOM이라 한다.

html : <.div id="myDiv">Hello, World!</div.>
dom : document.getElementById('myDiv')

15. DOM Content Loaded

👉 html 문자열을 메모리상에 올린작업 , Jquery의 ready작업

16. 렌더트리

👉 웹페이지구조(DOM)와 스타일정보(CSS)가 결합하여 실제로 화면에 표출되기 전에 최적화 작업

17. MPA (Mulity Page Aplication)

👉 다음 화면으로 넘길때, 화면이 초기화가 되고 하나의 화면을 호출하고 호출받고를 반복동작

18. SPA(Single Page Aplication)

👉 한 페이지 내에서 보여주고 감추고를 반복하는 동작
👉 이러한 SPA를 위해 나타난 3대장이 React, Angular, vue

-> 실제 SPA모습

그렇게 구조를 갖추면 브라우저 중심과 서버 중심으로 나뉘게됨.

브라우저 중심 => 어떻게 하면 잘 보여줄까 => 대표적 HTML5, Web Application, FrameWork
서버 중심 => 어떻게 하면 동적 처리를 원활할것인가 => Web MVC패턴

19. 내장객체

👉 jsp 코드를 보면 위에 jsp에서 생성된 변수가 있는데 그것을 사용할수 있음

20. JSP, 객체, DB와의 관계

JSP(출력) <-> 객체 <-> DAO <-> DB
📌 JSP에서는 출력을 위주로

📌 객체에서는 SOP쓰지않고 기능만 위주로

📌 DAO : DB를 전문적으로 처리

21. POJO

👉 재사용성을 높이기 위해서 각각(JSP,객체,DAO)에 대해 선을 넘지 않아야하고, 각자의 본분을 다해야함.

이동언

이전 포스트

서버-클라이언트의 기초

다음 포스트