💻 [6주 차 실습 코드 모음 – HTML, Controller 흐름]

💻 6주 차 실습 코드 모음 – HTML, Controller

6주 차는 HTML을 이용한 UI 구성과 Spring Boot 기반의 Controller 작성까지 실습했습니다.
폼 입력부터 서버 응답까지의 흐름을 처음부터 끝까지 따라가며 웹 애플리케이션의 기초 구조를 익혔습니다.

---

🖥️ HTML 입력 폼 구성

<!-- 회원가입 입력 폼 예시 -->
<form action="/register" method="post">
  <label>이름:</label>
  <input type="text" name="name">
  <label>나이:</label>
  <input type="number" name="age">
  <button type="submit">제출</button>
</form>

📌 사용자의 입력값을 서버로 전송하기 위한 기본적인 HTML 폼 구조를 익힘

 

📋 테이블과 리스트 구성

<!-- 테이블 예시 -->
<table border="1">
  <thead>
    <tr><th>이름</th><th>나이</th></tr>
  </thead>
  <tbody>
    <tr><td>Kevin</td><td>25</td></tr>
  </tbody>
</table>

📌 사용자 정보를 시각적으로 구조화해서 출력하는 방식 실습

 

⚙️ Spring Boot Controller 기본 구조

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "index";  // templates/index.html
    }

    @PostMapping("/register")
    public String register(String name, int age, Model model) {
        model.addAttribute("userName", name);
        model.addAttribute("userAge", age);
        return "welcome";  // templates/welcome.html
    }
}

📌 사용자 입력을 받아 Model에 담고 View로 전달하는 기본 흐름 체득

 

📨 템플릿(Thymeleaf) 활용 출력 예제

<p th:text="'안녕하세요, ' + ${userName} + '님. 나이는 ' + ${userAge} + '세입니다.'"></p>

📌 Spring Controller에서 전달한 데이터를 HTML에서 출력하는 방법 익힘

 

🎨 정적 리소스 연결 (CSS 적용)

<link rel="stylesheet" href="/css/style.css">

📌 static 디렉터리 안에 CSS를 두고 HTML에 연결하는 방식 실습

 

💥 Controller 예외 처리 예시

@ExceptionHandler(Exception.class)
public String error(Exception e, Model model) {
    model.addAttribute("message", e.getMessage());
    return "error";
}

📌 에러 발생 시 사용자 친화적인 에러 페이지로 연결하는 기본 처리 흐름

---

📝 마무리

6주 차 실습은 웹 애플리케이션의 흐름을 처음부터 끝까지 한 사이클 체험해본 것 같았다.
Spring Boot가 단순한 백엔드 프레임워크가 아니라
UI와 컨트롤러를 연결하는 중심축이라는 것을 배운 시간이기도 했다.