4-1. 정적 HTML 전달 (1세대)

Jan 28, 2026

Contents

1. 정적 HTML 전달 (1세대)1️⃣ 1세대의 특징 2️⃣ 필기 2. 1세대 vs 2세대 1️⃣ 공통점과 차이점 2️⃣ 1세대 정적 웹의 GET 처리 방식 3️⃣ 2세대(Servlet)의 GET 처리 방식 3. 실습 1️⃣ 1세대 파일 만들기

1. 정적 HTML 전달 (1세대)

1️⃣ 1세대의 특징

1) 최초의 프로토콜

무조건 GET 요청이다

자원명(파일경로와이름)만 알면 된다

2) 1세대의 핵심

논문마다 파일을 다 만들어줘야 한다.

무조건 Get 사용이라 따로 적지 않아도 된다.

2️⃣ 필기

2. 1세대 vs 2세대

1️⃣ 공통점과 차이점

1) 공통점

1세대, 2세대 모두 GET을 사용

2) 차이점

GET 요청을 처리하는 방법이 바뀜

1세대는 서버 개발자가 ‘GET 요청 처리 코드’를 직접 작성할 필요가 없음

2️⃣ 1세대 정적 웹의 GET 처리 방식

1) 요청


GET /index.html

2) 서버가 하는 일


1. index.html 파일 찾기
2. 그대로 브라우저에 전달

3) 개발자 입장

GET을 처리하는 자바/코드 자체가 없음

그냥 파일만 만들어 두면 끝

⬇️

“1세대는 코드 작성 불필요”

서버가 “알아서” 처리함

3️⃣ 2세대(Servlet)의 GET 처리 방식

1) 요청


GET /product?id=10

2) 서버가 하는 일


1. 파라미터(id=10) 분석
2. 자바 코드 실행
3. DB 조회
4. 결과로 HTML 생성
5. 응답

3) 개발자 입장


doGet(HttpServletRequest req, HttpServletResponse resp) {
    String id = req.getParameter("id");
    // 로직 처리
    // HTML 생성
}

👉 여기서부터는

GET 요청을 직접 코드로 처리

로직 + HTML 생성까지 개발자 책임

3. 실습

1️⃣ 1세대 파일 만들기

프로젝트 v1 클래스 생성 > 워크스페이스 _ web_history_lab 생성

1) V1Application


package com.example.v1;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class V1Application {

	public static void main(String[] args) {
		SpringApplication.run(V1Application.class, args);
	}

}

2) a.html


<!-- // a.html //v1 서버 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="/a.html">a논문</a></li>
      <li><a href="/b.html">b논문</a></li>
    </ul>
    <hr />
    <h1>a논문입니다</h1>
  </body>
</html>

3) b.html


// b.html
//v1 서버
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>a논문입니다</h1>
</body>
</html>

4) c.html


<!-- // c.html //v1 서버 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="/a.html">a논문</a></li>
      <li><a href="/b.html">b논문</a></li>
      <li><a href="/bio/c.html">c논문</a></li>
    </ul>
    <hr />
    <h1>c논문입니다</h1>
  </body>
</html>

5) index.html

index 파일로 이름 지정 후 불필요한 내용 빼고 경로만 넣기!

메인페이지로 사용 가능!

💡

index 파일이 필요한 이유?

DNS 주소로 접속하면 사용하는 어떤 파일이 있는지 모른다.

localhost:8080 을 했을 때 어떤 파일이 있는지 경로를 보여주는 메인 페이지이다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="/a.html">a논문</a></li>
      <li><a href="/b.html">b논문</a></li>
      <li><a href="/bio/c.html">c논문</a></li>
    </ul>
    <hr />
  </body>
</html>

Contents