이 글에서 다룰 내용

1. 프로젝트 구조 설명
2. 회원가입 백엔드
   • DB 테이블 생성
   • MemberVO
   • DTO 생성 (Request / Response)
   • MemberMapper
   • MemberService
   • MemberController
3. 회원가입 프론트
4. 로그인 백엔드
   • MemberService
   • MemberController
5. 로그인 프론트
6. 공통 기능 (common.js)
7. 동작 확인

1. 프로젝트 구조 설명

백엔드

pizza-shop/
├── src/main/java/
│   └── com.pizzashop/
│       ├── controller/
│       │   ├── MenuController.java
│       │   └── MemberController.java
│       ├── dto/
│       │   ├── request/
│       │   │   ├── MemberRegisterRequest.java
│       │   │   └── MemberLoginRequest.java
│       │   └── response/
│       │       ├── ApiResponse.java
│       │       ├── MemberLoginResponse.java
│       ├── mapper/
│       │   ├── MenuMapper.java
│       │   └── MemberMapper.java
│       ├── service/
│       │   ├── MenuService.java
│       │   └── MemberService.java
│       └── vo/
│           ├── MenuVO.java
│           └── MemberVO.java

Controller → Service → Mapper → DB 순서로 요청이 흘러간다.

프론트엔드

PIZZA-SHOP/
├── css/
│   ├── style.css
│   └── auth.css
├── js/
│   ├── common.js
│   ├── menu.js
│   └── auth.js
├── index.html
├── login.html
└── register.html

2. 회원가입 백엔드

요청 흐름은 다음과 같다.

클라이언트 → Controller → Service → Mapper → DB

DB 테이블 생성

회원 정보를 저장할 members 테이블을 먼저 생성한다.

CREATE TABLE IF NOT EXISTS members (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(100) NOT NULL,
    name VARCHAR(50) NOT NULL,
    role VARCHAR(20) DEFAULT 'USER',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

MemberVO

DB 테이블과 1:1로 매핑되는 데이터 객체다.

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MemberVO {
    private int id;           // 고유번호
    private String username;  // 로그인 아이디
    private String password;  // 비밀번호 (실무에서는 암호화 필요)
    private String name;      // 닉네임
    private String role;      // 권한 (USER / ADMIN)
    private String createdAt; // 가입일
}

DTO 생성

클라이언트와 주고받는 데이터를 명확하게 분리하기 위해 DTO를 사용한다.

VO를 그대로 사용하면 클라이언트가 role 같은 민감한 필드를 임의로 넘길 수 있어 보안에 취약하다. DTO를 사용하면 필요한 필드만 주고받을 수 있다.

MemberRegisterRequest - 회원가입 요청 데이터

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MemberRegisterRequest {
    private String username;
    private String password;
    private String name;
}

MemberLoginRequest - 로그인 요청 데이터

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MemberLoginRequest {
    private String username;
    private String password;
}

ApiResponse - 공통 응답 데이터

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ApiResponse {
    private String result;  // "ok" 또는 "fail"
    private String message; // 성공 또는 실패 메시지
}

MemberLoginResponse - 로그인 응답 데이터

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MemberLoginResponse {
    private String result;   // 실행 결과
    private String name;     // 사용자 이름
    private String role;     // 사용자 역할 (USER / ADMIN)
    private String username; // 사용자 아이디
}

로그인 응답에 password는 절대 포함하면 안 된다.

MemberMapper

@Mapper
public interface MemberMapper {

    // 아이디 중복 체크 / 로그인 시 회원 조회
    @Select("SELECT * FROM members WHERE username = #{username}")
    MemberVO findByUsername(String username);

    // 회원가입 INSERT
    // id, role, created_at은 DB에서 자동 생성되므로 쿼리에서 제외
    @Insert("INSERT INTO members(username, password, name) "
            + "VALUES (#{username}, #{password}, #{name})")
    @Options(useGeneratedKeys = true, keyProperty = "id")
    int insert(MemberVO member);
}

@Options(useGeneratedKeys = true, keyProperty = "id") 는 INSERT 후 자동 생성된 id 값을 MemberVO.id에 다시 넣어준다.

MemberService - 회원가입

@Service
public class MemberService {

    @Autowired
    private MemberMapper memberMapper;

    // 1. 같은 아이디가 DB에 존재하는지 조회
    // 2. 있으면 false 반환 -> Controller에서 "중복 아이디" 응답
    // 3. 없으면 INSERT 실행 -> 성공 시 true 반환
    public boolean register(MemberRegisterRequest request) {
        MemberVO existing = memberMapper.findByUsername(request.getUsername());
        if (existing != null) {
            return false; // 중복 아이디 -> 가입 거절
        }

        // Request -> VO 변환
        MemberVO member = new MemberVO();
        member.setUsername(request.getUsername());
        member.setPassword(request.getPassword());
        member.setName(request.getName());

        return memberMapper.insert(member) > 0;
    }
}

role과 created_at은 DB에서 자동으로 설정되므로 따로 넣지 않아도 된다.

MemberController - 회원가입

@RestController
@RequestMapping("/api/member")
@CrossOrigin(origins = "*")
public class MemberController {

    @Autowired
    private MemberService memberService;

    // POST /api/member/register
    // 요청 Body : {"username": "hong", "password": "1234", "name": "홍길동"}
    // 응답 : {"result": "ok", "message": "회원가입 완료"}
    @PostMapping("/register")
    public ApiResponse register(@RequestBody MemberRegisterRequest request) {
        boolean ok = memberService.register(request);
        if (ok) {
            return new ApiResponse("ok", "회원가입 완료");
        } else {
            return new ApiResponse("fail", "이미 사용 중인 아이디입니다.");
        }
    }
}

3. 회원가입 프론트

register.html

<div class="auth-container">
    <div class="auth-box">
        <h2>회원가입</h2>
        <div class="form-group">
            <label>아이디</label>
            <input type="text" id="regId" placeholder="아이디를 입력하세요" />
        </div>
        <div class="form-group">
            <label>비밀번호</label>
            <input type="password" id="regPw" placeholder="비밀번호를 입력하세요" />
        </div>
        <div class="form-group">
            <label>이름</label>
            <input type="text" id="regName" placeholder="이름을 입력하세요" />
        </div>
        <button class="btn-submit" onclick="register()">회원가입</button>
        <p class="auth-link">
            이미 계정이 있으신가요? <a href="login.html">로그인</a>
        </p>
    </div>
</div>

auth.js - 회원가입

const AUTH_API = "http://localhost:8080/api/member";

function register() {
    const id = document.getElementById("regId").value.trim();
    const pw = document.getElementById("regPw").value.trim();
    const name = document.getElementById("regName").value.trim();

    if (!id || !pw || !name) {
        alert("모든 항목을 입력해 주세요.");
        return;
    }

    fetch(`${AUTH_API}/register`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: id, password: pw, name: name }),
    })
        .then((res) => res.json())
        .then((data) => {
            if (data.result === "ok") {
                alert("가입 완료! 로그인 페이지로 이동합니다.");
                setTimeout(() => {
                    location.href = "login.html";
                }, 1500);
            } else {
                alert("가입 실패 : 아이디를 확인해 주세요.");
            }
        })
        .catch(() => alert("서버 오류"));
}

4. 로그인 백엔드

MemberService - 로그인

// 1. 아이디로 회원 조회
// 2. 비밀번호 일치하면 MemberVO 반환 (로그인 성공)
// 3. 아이디가 없거나 비밀번호 틀리면 null 반환 (로그인 실패)
public MemberVO login(String username, String password) {
    MemberVO member = memberMapper.findByUsername(username);
    if (member != null && member.getPassword().equals(password)) {
        return member;
    }
    return null;
}

MemberController - 로그인

// POST /api/member/login
// 요청 Body : {"username": "hong", "password": "1234"}
// 응답(성공) : {"result": "ok", "name": "홍길동", "role": "USER", "username": "hong"}
// 응답(실패) : {"result": "fail", "name": null, "role": null, "username": null}
@PostMapping("/login")
public MemberLoginResponse login(@RequestBody MemberLoginRequest request) {
    MemberVO member = memberService.login(request.getUsername(), request.getPassword());
    if (member != null) {
        return new MemberLoginResponse("ok", member.getName(), member.getRole(), member.getUsername());
    } else {
        return new MemberLoginResponse("fail", null, null, null);
    }
}

5. 로그인 프론트

login.html

<div class="auth-container">
    <div class="auth-box">
        <h2>로그인</h2>
        <div class="form-group">
            <label>아이디</label>
            <input type="text" id="loginId" placeholder="아이디를 입력하세요" />
        </div>
        <div class="form-group">
            <label>비밀번호</label>
            <input type="password" id="loginPw" placeholder="비밀번호를 입력하세요" />
        </div>
        <button class="btn-submit" onclick="login()">로그인</button>
        <p class="auth-link">
            계정이 없으신가요? <a href="register.html">회원가입</a>
        </p>
    </div>
</div>

auth.js - 로그인

function login() {
    const id = document.getElementById("loginId").value.trim();
    const pw = document.getElementById("loginPw").value.trim();

    if (!id || !pw) {
        alert("아이디와 비밀번호를 입력해 주세요.");
        return;
    }

    fetch(`${AUTH_API}/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: id, password: pw }),
    })
        .then((res) => res.json())
        .then((data) => {
            if (data.result === "ok") {
                localStorage.setItem("loginUser", data.name);
                localStorage.setItem("loginRole", data.role);
                localStorage.setItem("loginUserId", data.username);
                alert(`${data.name}님 환영합니다😊`);
                setTimeout(() => {
                    location.href = "index.html";
                }, 1500);
            } else {
                alert("아이디 또는 비밀번호가 틀렸습니다.");
            }
        })
        .catch(() => alert("서버 오류"));
}

로그인 성공 시 localStorage에 사용자 정보를 저장해두면 다른 페이지에서도 로그인 상태를 유지할 수 있다.

6. 공통 기능 (common.js)

// nav 업데이트
function updateNav() {
    const isLoggedIn = localStorage.getItem("loginUser");
    const loginRole = localStorage.getItem("loginRole");
    const navArea = document.getElementById("navArea");

    if (isLoggedIn) {
        const adminMenu = loginRole === "ADMIN" ? `<a href="admin.html">메뉴 관리</a>` : "";
        const cartMenu = loginRole === "USER" ? `<a href="cart.html">장바구니</a>` : "";

        navArea.innerHTML = `
            <a href="index.html">메뉴</a>
            ${adminMenu}
            ${cartMenu}
            <a href="#" onclick="logout()">로그아웃</a>
        `;
    }
}

// 로그아웃
function logout() {
    localStorage.clear();
    location.href = "login.html";
}

로그인 상태면 역할에 따라 nav가 동적으로 바뀐다. ADMIN이면 메뉴 관리, USER면 장바구니가 추가된다.

7. 동작 확인

📸 [스크린샷 - 회원가입 화면] 아이디, 비밀번호, 이름을 입력하고 회원가입 버튼을 클릭하면 가입 완료 알림이 뜨고 자동으로 로그인 페이지로 이동한다.

📸 *[스크린샷 - 로그인 화면]
*아이디와 비밀번호를 입력하고 로그인 버튼을 클릭하면 환영 메시지가 뜨고 메인 페이지로 이동한다.

📸 [스크린샷 - 로그인 성공 후 nav 변경된 화면] 로그인 성공 시 localStorage에 사용자 정보가 저장되고, nav가 역할에 따라 동적으로 변경된다. USER면 장바구니, ADMIN이면 메뉴 관리 링크가 추가된다.

마치며

이번 글에서는 회원가입과 로그인 기능을 백엔드와 프론트엔드로 나눠서 구현해봤다.

• DTO로 요청/응답 데이터를 명확하게 분리
• MyBatis로 DB 연동
• localStorage로 로그인 상태 유지

다음 편에서는 관리자 페이지에서 메뉴 CRUD 기능을 구현할 예정이다.

1. 프로젝트 구조 설명
2. index.html 생성
3. style.css 생성
4. menu.js 생성
5. CRUD 기능 구현
   • 전체 메뉴 조회 (GET)

1. 프로젝트 구조 설명

PIZZA-SHOP/
├── css/
│   └── style.css
├── js/
│   └── menu.js
└── index.html

2. index.html 생성

• index.html은 피자 메뉴 목록을 보여주는 메인 페이지다.

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>PIZZA</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <!-- 메뉴 목록 화면 -->
        <header>
            <h1>PIZZA SHOP</h1>
            <nav id="navArea">
                <a href="index.html">메뉴</a>
                <a href="login.html">로그인</a>
                <a href="register.html">회원가입</a>
            </nav>
        </header>

        <div class="hero">
            <h2>오늘의 피자 한 입 🍕</h2>
            <p>맛있는 피자를 즐겨보세요.</p>
        </div>

        <div class="filter">
            <button class="active" onclick="filterMenu('전체', this)">전체</button>
            <button onclick="filterMenu('클래식', this)">클래식</button>
            <button onclick="filterMenu('프리미엄', this)">프리미엄</button>
            <button onclick="filterMenu('사이드', this)">사이드</button>
        </div>

        <div class="menu-grid" id="menuGrid"></div>

        <footer>2026 Pizza Shop. All rights reserved.</footer>
        <script src="js/menu.js"></script>
    </body>
</html>

<div class="menu-grid" id="menuGrid"> 는 비어있는 상태로 시작하고 menu.js에서 API를 호출해 동적으로 메뉴 카드를 채워준다.

3. style.css 생성

style.css는 피자 쇼핑몰의 전체 디자인을 담당한다.

/* 공통 스타일 */
:root {
    --color-bg: #fffdf0;
    --color-dark: #2b1f1d;
    --color-primary: #ff5252;
    --color-accent: #ffb74d;
    --color-light: #ffffff;
    --color-border: #f0e6db;
    --color-text: #4a3b32;
    --color-muted: #a1887f;
    --font-main: "Ansungtangmyeon", "Comic Sans MS", "Apple SD Gothic Neo", sans-serif;
    --radius: 20px;
    --shadow: 0 8px 24px rgba(235, 190, 160, 0.2);
    --transition: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

CSS 변수(:root)를 사용하면 색상, 그림자, 애니메이션 등을 한 곳에서 관리할 수 있어 유지보수가 편리하다.

헤더 / 네비게이션

header {
    background: var(--color-bg);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: var(--color-primary);
    text-decoration: none;
    margin-left: 20px;
    font-size: 15px;
    font-weight: bold;
}

display: flex + justify-content: space-between으로 로고는 왼쪽, 네비게이션은 오른쪽에 배치한다.

필터 버튼

.filter {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px 10px;
}

.filter button {
    padding: 8px 20px;
    border: 2px solid var(--color-accent);
    border-radius: 20px;
    background: var(--color-bg);
    color: var(--color-accent);
    cursor: pointer;
}

.filter button:hover,
.filter button.active {
    background: var(--color-accent);
    color: var(--color-bg);
}

메뉴 그리드

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
    padding: 20px 40px 60px;
    max-width: 1100px;
    margin: 0 auto;
}

repeat(auto-fill, minmax(230px, 1fr))를 사용하면 별도의 미디어 쿼리 없이도 화면 크기에 따라 자동으로 열 수가 조정되는 반응형 그리드가 완성된다.

메뉴 카드

.menu-card {
    background: var(--color-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.menu-card:hover {
    transform: translateY(-4px);
}

.menu-card .img-area {
    background: var(--color-light);
    height: 160px;
    overflow: hidden;
    text-align: center;
    line-height: 160px;
    font-size: 60px;
}

4. menu.js 생성

menu.js는 API를 호출해 메뉴 데이터를 받아오고, 화면에 카드를 동적으로 렌더링하는 역할을 한다.

const API = "http://localhost:8080/api/menu";
let allMenus = []; // 전체 메뉴 캐시

window.onload = function () {
    loadMenus();
    updateNav();
};

allMenus에 전체 메뉴를 캐싱해두면 카테고리 필터링 시 API를 다시 호출하지 않아도 된다.

전체 메뉴 불러오기

function loadMenus() {
    fetch(API)
        .then((res) => res.json())
        .then((data) => {
            allMenus = data;
            renderMenus(data);
        })
        .catch((err) => console.error("메뉴 불러오기 실패: ", err));
}

카드 렌더링

function renderMenus(menus) {
    const grid = document.getElementById("menuGrid");
    grid.innerHTML = "";

    if (menus.length === 0) {
        grid.innerHTML = '<p style="text-align:center; color:#999; padding:40px;">메뉴가 없습니다.</p>';
        return;
    }

    menus.forEach((menu) => {
        const card = document.createElement("div");
        card.className = "menu-card";

        const imgContent = menu.imgUrl
            ? `<img src="${menu.imgUrl}" alt="${menu.name}" style="width:100%; height:160px; object-fit:contain; display:block;">`
            : getCategoryEmoji(menu.category);

        card.innerHTML = `
            <div class="img-area">${imgContent}</div>
            <div class="info">
                <div class="category">${menu.category}</div>
                <h3>${menu.name}</h3>
                <div class="price">${menu.price.toLocaleString()}원</div>
                <div class="btn-group">
                    <button onclick="order('${menu.name}', ${menu.price})">주문하기</button>
                    <button onclick="addToCart(${menu.id}, '${menu.name}', ${menu.price})">장바구니 담기</button>
                </div>
            </div>
        `;
        grid.appendChild(card);
    });
}

imgUrl이 있으면 이미지를, 없으면 카테고리별 이모지를 대신 보여준다.

function getCategoryEmoji(category) {
    if (category == "클래식") return "⭐";
    if (category == "프리미엄") return "👑";
    if (category == "사이드") return "🍟";
}

카테고리 필터링

function filterMenu(category, event) {
    document.querySelectorAll(".filter button").forEach((btn) => {
        btn.classList.remove("active");
    });
    event.target.classList.add("active");

    if (category === "전체") {
        renderMenus(allMenus);
    } else {
        const filtered = allMenus.filter((m) => m.category === category);
        renderMenus(filtered);
    }
}

5. CRUD 기능 구현 - ① 전체 메뉴 조회 (GET)

전체 메뉴 조회 (GET)

페이지가 로드되면 자동으로 API를 호출해 전체 메뉴를 가져온다.

카테고리 버튼을 클릭하면 해당 카테고리만 필터링되어 보여진다.

마치며

이번 글에서는 피자 쇼핑몰 프론트엔드의 기본 구조를 만들어봤다.

• index.html로 화면 구조 잡기
• style.css로 디자인 입히기
• menu.js로 API 연동 및 동적 렌더링

다음 편에서는 로그인/회원가입 기능을 구현할 예정이다.

학원에서 위 이미지와 같이 Spring Boot로 coffee shop 페이지를 만들어 보았다.
배운 내용을 제대로 익히기 위해 복습 겸 피자 가게 페이지를 직접 만들어보려 한다.

이 글에서 다룰 내용

• 피자 메뉴 전체 조회
• 메뉴 단건 조회
• 메뉴 등록
• 메뉴 수정
• 메뉴 삭제

사용 기술 스택

• Spring Boot
• MySQL
• Lombok
• Postman
• MyBatis

1. MySQL 에서 DB 생성 및 테이블 생성

1. 쿼리 작성 및 실행

-- pizza_db 생성
create database if not exists pizza_db default character set utf8mb4;

-- pizza_db 사용
use pizza_db;

-- menu 테이블 생성
create table menu(
    id int auto_increment primary key,
    name varchar(100) not null,
    size varchar(10) not null,
    price int not null,
    category varchar(50) not null,
    img_url varchar(255)
)

2. pizza_db의 menu 테이블 생성 완료

2. application.properties 설정 (DB 연결, MyBatis)

# 프로젝트 이름
spring.application.name=pizza-shop

# DB 연결 설정
# url - 어떤 DB에 연결할지 (localhost:3306 = 내 컴퓨터의 MySql_db = 사용 할 DB 이름)
spring.datasource.url=jdbc:mysql://localhost:3306/pizza_db?useSSL=false&serverTimezone=Asia/Seoul

# username/password = MySql 로그인 정보
spring.datasource.username=<username>
spring.datasource.password=<password>

# driver = Mysql 전용 드라이버 클래스 (Mysql 8.x 버전용)
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Mybatis 설정
# VO 클래스가 있는 패키지 등록 -> 쿼리 결과를 VO 객체로 자동 변환해줌
mybatis.type-aliases-package=com.example.demo.vo
# DB 컬럼명 (img_url)을 Java 필드명(imgUrl)으로 자동 변환 (언더스코어 -> 카멜케이스)
mybatis.configuration.map-underscore-to-camel-case=true

3. 프로젝트 생성 및 패키지 생성

1. controller - 클라이언트 요청을 받고 응답을 반환
2. service - 비즈니스 로직 담당
3. vo - 데이터를 담는 객체 (DB 테이블과 매핑)
4. mapper - DB에 접근해서 쿼리 실행

4. MenuVO 클래스 생성

• DB 테이블과 매핑되는 데이터 객체

  package com.pizzashop.vo;
  

import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;

@Data @NoArgsConstructor @AllArgsConstructor public class MenuVO {

private int id; // 고유 아이디
private String name; // 메뉴명
private String size; // 피자 사이즈 
private int price; // 가격
private String category; // 카테고리
private String imgUrl; // 이미지 URL

}

| 어노테이션 | 기능 |
|-----------|------|
| `@Data` | getter, setter, toString 등을 자동 생성 |
| `@NoArgsConstructor` | 기본 생성자 자동 생성 (매개변수 없음) |
| `@AllArgsConstructor` | 전체 필드 생성자 자동 생성 (모든 필드 포함) |

#### @Data
```java
// 이걸 직접 안 써도 됨
public String getName() { return name; }
public void setName(String name) { this.name = name; }

@NoArgsConstructor

// 이걸 자동 생성
public MenuVO() {}

@AllArgsConstructor

// 이걸 자동 생성
public MenuVO(int id, String name, String size, int price, String category, String imgUrl) {}

5. MenuMapper 인터페이스 생성

Mapper를 인터페이스로 생성하는 이유

직접 구현 코드를 작성하지 않아도 MyBatis가 자동으로 구현체를 만들어주기 때문이다. 개발자는 어떤 쿼리를 실행할지만 정의하면 된다.

@Mapper

MyBatis에게 "이 인터페이스가 Mapper입니다" 라고 알려주는 어노테이션이다. Spring이 자동으로 구현체를 생성하고 Bean으로 등록해준다.

@Options(useGeneratedKeys = true, keyProperty = "id")

INSERT 후 DB에서 자동 생성된 id 값을 MenuVO 객체에 자동으로 담아주는 옵션이다.

package com.pizzashop.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.pizzashop.vo.MenuVO;

@Mapper
public interface MenuMapper {

//    메뉴 전체 조회
    @Select("SELECT * FROM menu ORDER BY id ASC")
    List<MenuVO> findAll();

//    메뉴 단건 조회
    @Select("SELECT * FROM menu WHERE id = #{id}")
    MenuVO findById(int id);

//    메뉴 등록
    @Insert("INSERT INTO menu (name, size, price, category, img_url) VALUES (#{name}, #{size}, #{price}, #{category}, #{imgUrl})")
    @Options(useGeneratedKeys = true, keyProperty = "id")
    boolean insert(MenuVO menu);

//    메뉴 수정
    @Update("UPDATE menu SET name=#{name}, size=#{size}, price=#{price}, category=#{category}, img_url=#{imgUrl} WHERE id=#{id}")
    boolean update(MenuVO menu);

//    메뉴 삭제
    @Delete("DELETE FROM menu WHERE id=#{id}")
    boolean delete(int id);

}

6. MenuService 클래스 생성

Service 클래스란?

Controller와 Mapper 사이에서 비즈니스 로직을 처리하는 계층이다. Controller는 요청/응답만 담당하고, 실제 처리 로직은 Service에서 담당한다.

클라이언트 → Controller → Service → Mapper → DB

@Autowired

Spring이 자동으로 객체(Bean)를 찾아서 주입해주는 어노테이션이다. 직접 new로 객체를 생성할 필요 없이 Spring이 알아서 넣어준다.

// @Autowired 없으면 직접 생성해야 함
MenuMapper menuMapper = new MenuMapper();

// @Autowired 있으면 Spring이 알아서 주입
@Autowired
private MenuMapper menuMapper;

@Service

Spring에게 "이 클래스가 Service입니다" 라고 알려주는 어노테이션이다. 자동으로 Bean으로 등록되어 @Autowired로 주입받을 수 있다.

package com.pizzashop.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.pizzashop.mapper.MenuMapper;
import com.pizzashop.vo.MenuVO;

@Service
public class MenuService {
// @Autowired = Spring이 알아서 MenuMapper 객체를 여기에 주입해줌(직접 new를 할 필요 없음)
        @Autowired
        private MenuMapper menuMapper;

//        전체 메뉴 조회
        public List<MenuVO> getAll() {return menuMapper.findAll();}

//        단건 메뉴 조회
        public MenuVO getById(int id) {return menuMapper.findById(id);}

//        메뉴 등록 / 수정 / 삭제
//        insert 결과가 1이상이면 true(성공), 0이면 false(실패)
        public boolean add(MenuVO menu) {return menuMapper.insert(menu);}
        public boolean update(MenuVO menu) {return menuMapper.update(menu);}
        public boolean delete(int id) {return menuMapper.delete(id);}

}

7. MenuConroller 클래스 생성

package com.pizzashop.controller;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.pizzashop.service.MenuService;
import com.pizzashop.vo.MenuVO;

@RestController
@RequestMapping("/api/menu")
@CrossOrigin(origins="*")
public class MenuController {

    @Autowired
    private MenuService menuService;

//    메뉴 조회
    @GetMapping
    public List<MenuVO> getAll() {
        return menuService.getAll();
    }

//    단건 조회
    @GetMapping("/{id}")
    public MenuVO getById(@PathVariable("id") int id) {
        return menuService.getById(id);
    }

//    메뉴 등록
    @PostMapping
    public Map<String, Object> add(@RequestBody MenuVO menu) {
        boolean success = menuService.add(menu);
        if(success) return Map.of("result", "ok", "message", "등록 완료");
        return Map.of("result", "fail", "message", "등록 실패");
    }

//    메뉴 수정
    @PutMapping("/{id}")
    public Map<String, Object> update(@PathVariable("id") int id, @RequestBody MenuVO menu) {
        menu.setId(id);
        boolean success = menuService.update(menu);
        if(success) return Map.of("result", "ok", "message", "수정 완료");
        return Map.of("result", "fail", "message", "수정 실패");
    }

//    메뉴 삭제
    @DeleteMapping("/{id}")
    public Map<String, Object> delete(@PathVariable("id") int id) {
        boolean success = menuService.delete(id);
        if(success) return Map.of("result", "ok", "message", "삭제 완료");
        return Map.of("result", "fail", "message", "삭제 실패");
    }
}

8. Postman으로 API 실행해보기

1. 메뉴 등록 (이미지 URL은 피자스쿨의 이미지 URL 사용)

2. 전체 메뉴 조회 3. 단건 메뉴 조회 4. 메뉴 수정

5. 메뉴 삭제

마무리

이번 글에서는 피자 가게 메뉴 CRUD를 직접 구현해봤다.

학원에서 배운 내용을 다시 만들어보니 전체적인 흐름이 더 명확하게 이해됐다.

클라이언트 → Controller → Service → Mapper → DB

VO, Mapper, Service, Controller 각각의 역할을 이해하고 나니 Spring Boot의 구조가 훨씬 익숙하게 느껴졌다.

다음 글에서는 피자 가게 프론트 연동을 해볼 예정이다.

1. JDK (JDK 17-LTS 버전) 설치

1. 아래 사이트 접속 > Other Downloads 클릭 https://adoptium.net/

2. JDK 17-LTS 탭 클릭 > 운영체제에 맞는 JDK 설치

2. 스프링부트 설치

1. 아래 사이트 접속 > ECLIPSE 탭 선택 > 운영체제에 맞는 프로그램 설치 https://spring.io/tools

2. 압축 풀고 → 경로 설정 - Launch

3. 롬복 설치

1. 아래 사이트 접속 > 파일 다운로드 https://projectlombok.org/download

2. Specify locatio...버튼 클릭 > 이전에 설치한 SpringToolsForEclipse.exe 파일 선택 > instaal / Up... 버튼 클릭 > Quit Inst... 버튼 클릭

   
   ## ⚠️ 롬복 설치 시 아래와 같은 에러가 난다면? 

3. 관리자 권한으로 cmd창 열기 > lombok.jar가 있는 디렉토리로 이동

4. java -jar lombok.jar 명령어 실행 > 설치 재시도

4. MySQL 설치

1. 아래 사이트 접속 > 다운로드 버튼 클릭 https://dev.mysql.com/downloads/installer/

2. Custom > Next 클릭

3. 왼쪽 Available Products에서 오른쪽으로 이동 > Next ✅ MySQL Server 8.0.46 - X64 ✅ MySQL Workbench 8.0.47 - X64

4. 설치 완료 후 > Execute 클릭

5. root 계정의 비밀번호를 설정 (이 비밀번호는 나중에 DB 접속 시 반드시 필요하므로 반드시 기억/기록해두기)

6. 이후 나오는 화면들은 모두 기본값 유지 후 Next 클릭

   
   

⚠️ MySQL 삭제 후 재설치 시 주의사항

단순히 프로그램만 제거하면 재설치 시 오류가 발생할 수 있다. 아래 순서대로 완전히 삭제 후 재설치

1. 프로그램 제거

제어판 → 프로그램 추가/제거에서 아래 항목을 모두 제거

• MySQL Server
• MySQL Workbench
• MySQL Installer

2. 잔여 파일 삭제

C:\Program Files\MySQL
C:\ProgramData\MySQL

💡 ProgramData는 숨김 폴더 탐색기 상단 보기 → 숨긴 항목 체크 후 접근

3. 재부팅 후 재설치 진행 ✅

5. Postman 설치

1. 아래 사이트 접속 > 다운로드 > 로그인 후 실행 https://www.postman.com/downloads/
   ## ⚠️ Postman 삭제 후 재설치 시 주의사항

단순히 프로그램만 제거하면 재설치 시 오류가 발생할 수 있다. 아래 순서대로 완전히 삭제 후 재설치

1. 프로그램 제거

제어판 → 프로그램 추가/제거에서 아래 항목을 제거

• Postman

2. 잔여 파일 삭제

C:\Users\[사용자명]\AppData\Roaming\Postman
C:\Users\[사용자명]\AppData\Local\Postman

💡 AppData는 숨김 폴더! 탐색기 상단 보기 → 숨긴 항목 체크 후 접근

3. 재설치 진행 ✅

예시 {1, 2, 3} 에서 2개 뽑기

순열

• 가짓수 : 6개
• 예시 : {1,2}, {1,3}, {2,1}, {2,3}, {3,1}, {3,2}

조합

• 가짓수 : 3개
• 예시 : {1,2}, {1,3}, {2,3}

한 줄 요약

• 부분집합 : 각 원소를 포함할지 말지 결정하며 나올 수 있는 모든 집합 (빈 집합 포함!)
• 순열 : r개의 원소를 나열 (순서 중요!)
• 조합 : r개의 원소를 나열 (순서는 중요하지 않음)

'탐욕스러운 알고리즘' : 나중을 생각하지 않고 지금 할 수 있는 최선의 선택을 한다.

특징

• 빠르다 : 모든 경우를 탐색하지 않음
• 항상 최적해를 보장하진 않음
• 특정 조건이 성립할 때만 사용 가능
  • 조건은 문제마다 다르며, 문제를 풀면서 감을 익혀야 함
  • ex) 동전 문제 : 큰 동전이 작은 동전의 배수 관계일 때 성립

예제 1) 동전 거스름돈

동전 {500, 100, 50, 10, 5, 1} 으로 1200원을 거슬러줄 때 최소 동전 개수를 구하라.

코드

public class GreedyPractice {
    static void main(String[] args) {
        int[] moneyList = {500, 100, 50, 10, 5, 1};
        int amount = 1200;
        int totalCount = 0;
        for (int money : moneyList) {
            int count = amount / money;
            if (count > 0) {
                System.out.println(money + "짜리 동전 X " + count + "개");
                totalCount += count;
                amount -= money * count;
            }
            if (amount == 0) break;
        }
        System.out.println("최소 동전 개수 : " + totalCount + "개");
    }
}

출력

500짜리 동전 X 2개
100짜리 동전 X 2개
최소 동전 개수 : 4개

동작 원리

내림차순으로 정렬된 동전 배열을 반복문으로 돌려 제일 큰 동전부터 선택한다.

int count = amount / money;  // 현재 동전으로 줄 수 있는 최대 개수

→ 1200 / 500 = 2개

totalCount += count;         // 총 개수에 더하기
amount -= money * count;     // 금액에서 빼기

→ totalCount = 2, amount = 1200 - 1000 = 200원 남음

다음 동전 100원이 들어오면

→ 200 / 100 = 2개 → totalCount = 4, amount = 200 - 200 = 0원

if (amount == 0) break;      // 금액이 0이면 종료

→ 반복문 종료, 최소 동전 개수 4개 출력

예제 2) 최대 회의 수 구하기

문제 : 하나의 회의실에서 겹치지 않게 최대한 많은 회의를 열어라. 각 회의는 {시작 시간, 종료 시간} 으로 주어진다.

코드

int[][] meetings = {
        {1, 4}, {3, 5}, {0, 6}, {5, 9}, {3, 7},
        {5, 9}, {6, 10}, {8, 11}, {8, 12}, {2, 14}, {12, 16}
};

Arrays.sort(meetings, (a, b) -> a[1] - b[1]);

int count = 0;
int lastEnd = 0;
for (int[] meeting : meetings) {
    int start = meeting[0];
    int end = meeting[1];

    if (lastEnd <= start) {
        lastEnd = end;
        count += 1;
        System.out.println(count + "번째 회의! 시작 시간 : " + start + ", 끝 시간 : " + end);
    }
}
System.out.println("총 회의 수 : " + count);

출력

1번째 회의! 시작 시간 : 1, 끝 시간 : 4
2번째 회의! 시작 시간 : 5, 끝 시간 : 9
3번째 회의! 시작 시간 : 12, 끝 시간 : 16
총 회의 수 : 3

동작 원리

종료 시간이 짧을수록 새로운 회의를 더 많이 열 수 있으므로 종료 시간을 기준으로 오름차순 정렬한다.

Arrays.sort(meetings, (a, b) -> a[1] - b[1]);

a[1] - b[1] 의 반환값으로 정렬 방향을 결정한다.

• 양수 → 두 요소의 자리를 바꿈
• 음수 → 자리를 바꾸지 않음

a = 5, b = 6 → 5 - 6 = -1 (음수) → 자리 유지 → 오름차순
a = 6, b = 5 → 6 - 5 =  1 (양수) → 자리 바꿈 → 오름차순

그러므로 a[1] - b[1]는 어떤 값이 들어와도 항상 오름차순이 된다. 내림차순을 하고 싶으면 b[1] - a[1] 이와 같이 작성하면 된다.

정렬 후 반복문으로 종료 시간이 짧은 회의부터 가져온다.

if (lastEnd <= start) {
    lastEnd = end;
    count += 1;
}

이전 회의 종료 시간(lastEnd)과 현재 회의 시작 시간(start)을 비교해서 현재 회의 시작 시간이 같거나 늦다면 회의를 시작할 수 있으므로 count 를 1 증가시키고 lastEnd 를 현재 회의 종료 시간으로 갱신한다.

마무리

코드를 보고 선생님의 설명을 들을 때는 이해가 됐다고 생각했는데, 막상 문제만 놓고 혼자 풀어보려니 쉽지 않았다. 그리디는 단순히 코드를 외우는 게 아니라 문제마다 어떤 기준이 최선인지를 파악하는 게 핵심인 것 같다. 앞으로 문제를 많이 풀어보면서 감을 익혀야겠다. 💪

계층적 구조를 표현하는 비선형 자료구조

예시

1. 회사 조직도
2. 가족 관계도 등
   

트리 용어 정리

1. 노드(Node) : 트리의 각 원소
2. 엣지(Edge) : 노드를 연결하는 선, 간선
3. 루트(Root) : 최상위 노드
4. 부모(Parent) : 바로 위에 연결된 노드
5. 자식(Child) : 바로 아래에 연결된 노드
6. 형제(Sibling) : 같은 부모를 가진 노드
7. 리프(Leaf) : 자식이 없는 노드
8. 내부 노드(Internal Node) : 자식이 있는 노드
9. 깊이(Depth) : 루트에서 해당 노드까지의 엣지 수
   • ex) A의 깊이 = 0, B의 깊이 = 1, D의 깊이 = 2
10. 레벨(Level) : 깊이와 동일하게 쓰이거나 깊이 + 1로 쓰임
11. 높이(Height) : 트리 전체의 깊이 최댓값
12. 서브트리(Subtree) : 특정 노드를 루트로 하는 트리

트리 직접 구현해보기

아래 트리 구조를 코드로 구현하고 출력해보자.

        1
      / | \
     2  3  4
    / \    |
   5  6    7

코드

import java.util.ArrayList;
import java.util.List;

public class TreeConceptPractice {

    static class Tree {
        int data;
        List<Tree> children;

        Tree(int data) {
            this.data = data;
            this.children = new ArrayList<>();
        }

        void addChild(Tree child) { this.children.add(child); }
    }

    static void printTree(Tree node, String prefix) {
        if (node == null) return;
        System.out.println(prefix + node.data);
        for (Tree child : node.children) {
            printTree(child, prefix + "    ");
        }
    }

    static void main(String[] args) {
        Tree root = new Tree(1);
        Tree n2 = new Tree(2);
        Tree n3 = new Tree(3);
        Tree n4 = new Tree(4);
        Tree n5 = new Tree(5);
        Tree n6 = new Tree(6);
        Tree n7 = new Tree(7);

        root.addChild(n2);
        root.addChild(n3);
        root.addChild(n4);
        n2.addChild(n5);
        n2.addChild(n6);
        n4.addChild(n7);

        printTree(root, "");
    }
}

출력

1
    2
        5
        6
    3
    4
        7

동작 원리

printTree(root, "")가 호출되면 "" + 1이 출력된다. 이후 반복문으로 루트(1)의 자식들을 순서대로 순회하는데, 각 자식마다 재귀함수가 실행된다.

1의 자식은 2, 3, 4 순서로 처리되며, 2가 넘어가면 2의 자식인 5, 6이 먼저 출력된다. 2가 끝나면 3, 그다음 4와 4의 자식인 7 순서로 출력된다.

가능한 모든 경우의 수를 전부 시도해보는 알고리즘

✅ 장점 : 정확성 100% 보장

❌ 단점 : 경우의 수가 많으면 시간이 오래 걸림

언제 사용하는가?

• 경우의 수가 충분히 작을 때 (보통 1,000만 이하)
• 더 효율적인 알고리즘이 떠오르지 않을 때
• 정답을 먼저 구한 뒤 최적화할 때

시간복잡도 기준

• 반복문 1개 : O(n) → n이 1억이면 약 0.1초
• 반복문 2중 : O(n²) → n이 1만이면 약 0.1초
• 반복문 3중 : O(n³) → n이 500이면 약 0.1초

예제 1) 3자리 영문 소문자 비밀번호

3자리 영문 소문자 (a ~ z)를 완전 탐색으로 모두 출력하라. 총 몇 가지인지도 출력하라.

코드

public class BruteForcePractice {
    static void main(String[] args) {
        int count = 0;
        for (char i = 'a'; i <= 'z'; i++) {
            for (char j = 'a'; j <= 'z'; j++) {
                for (char k = 'a'; k <= 'z'; k++) {
                    count++;
                    if (count <= 3) {
                        System.out.println("" + i + j + k);
                    } else if (count == 4) {
                        System.out.println("...");
                    } else if (count == 17576) {
                        System.out.println("" + i + j + k);
                    }
                }
            }
        }
        System.out.println("총 : " + count + "가지");
    }
}

출력

aaa
aab
aac
...
zzz
총 : 17576가지

동작 원리

완전탐색은 가능한 모든 경우의 수를 다 구하는 방법이다. 3자리 비밀번호를 구해야 하므로 반복문을 3중으로 중첩해서 처음(a)부터 끝(z)까지 모든 경우를 순회하면 된다.

예제 2) 두 수의 합

배열 {1, 7, 11, 15, 3, 6} 에서 두 수의 합이 9가 되는 쌍을 찾아라.

코드

int[] arr = {1, 7, 11, 15, 3, 6};
int sumCount = 0;
for (int i = 0; i < arr.length; i++) {
    for (int j = i + 1; j < arr.length; j++) {
        if (arr[i] + arr[j] == 9) {
            sumCount++;
            System.out.println(arr[i] + " + " + arr[j] + " = " + (arr[i] + arr[j]));
        }
    }
}
System.out.println("총 : " + sumCount + "가지");

출력

3 + 6 = 9
총 : 1가지

동작 원리

두 수의 합이 9가 되는 쌍을 찾아야 하기에 반복문은 2중으로 사용하였다. j를 i+1로 설정한 이유는 j가 항상 i보다 크기 때문에 (3, 6)과 (6, 3) 같이 순서만 다른 중복 쌍이 생기지 않는다.

예제 3) 두 수의 차이

배열 {3, 10, 2, 8, 5, 1} 에서 두 수의 차이가 가장 큰 쌍을 찾아라.

코드

int[] arr2 = {3, 10, 2, 8, 5, 1};
int answer = Integer.MIN_VALUE;
int indexI = 0;
int indexJ = 0;

for (int i = 0; i < arr2.length; i++) {
    for (int j = 0; j < arr2.length; j++) {
        if (i != j && arr2[i] - arr2[j] > answer) {
            indexI = i;
            indexJ = j;
            answer = arr2[i] - arr2[j];
        }
    }
}
System.out.println("두 수의 차이가 가장 큰 쌍 : "
        + arr2[indexI] + " - " + arr2[indexJ] + " = " + answer);

출력

두 수의 차이가 가장 큰 쌍 : 10 - 1 = 9

동작 원리

두 수의 차이가 가장 큰 쌍을 찾아야 하므로 2중 반복문으로 처음부터 끝까지 두 수의 차이값을 구한다. 현재 차이값이 answer보다 크면 answer를 현재값으로 갱신하고 인덱스도 저장한다.

이번엔 안쪽 변수 j의 초기값을 0으로 한 이유는 뺄셈의 경우 숫자 위치에 따라 값이 완전히 달라지기 때문이다. 예를 들어 3 - 10과 10 - 3은 완전히 다른 값이다.

제미나이 API는 무료로 사용할 수 있다. 이번 포스팅에서는 별도의 프레임워크 없이 JavaScript로 채팅 화면에 Gemini API를 연동하는 방법을 정리해본다.

1. API 키 발급

Google AI Studio 에 접속해서 API 키를 발급받는다.

👉 https://aistudio.google.com/

접속 후 로그인 → "API 키 만들기" 클릭

2. API 키 생성 확인

생성된 키를 복사해둔다.

⚠️ 주의: API 키는 코드에 직접 하드코딩하지 말자.
config.js 파일을 따로 만들어서 관리하고, .gitignore에 추가하는 것을 권장한다.

// config.js (git과 블로그에는 올리지 않음)
const CONFIG = {
  API_KEY: "여기에_본인_API_KEY_입력"
};

// main.js
const API_KEY = CONFIG.API_KEY;

3. API 호출 코드

아래는 채팅 화면에 Gemini API를 연동한 전체 코드다.

async function ask() {
  const inputElement = document.getElementById("questionInput");
  const prompt = inputElement.value;

  // 빈 입력 체크
  if (!prompt || prompt.trim() === "") {
    document.getElementById("output").innerText = "질문을 입력해주세요.";
    return;
  }

  // 입력창 바로 초기화
  inputElement.value = "";

  // [1단계] 화면에 질문과 "...(생각 중)" 상태를 먼저 표시
  const chatGrid = document.getElementById("chatMessagesGrid");
  chatGrid.innerHTML = `
    <article class='message-card active' role=listitem>
      <div class='message-card-user'>${prompt}</div>
      <div class='message-card-bot'>
        <div class="bot-logo">
          👩‍💻 Assistant AI
        </div>
        <div class="bot-answer thinking">...(생각 중)</div>
      </div>
    </article>`;

  try {
    // [2단계] Gemini API 호출
    const res = await fetch(
      `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${API_KEY}`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }]
        })
      }
    );

    if (!res.ok) throw new Error("API 호출 실패");

    const data = await res.json();
    const text =
      data.candidates?.[0]?.content?.parts?.[0]?.text ??
      "응답을 가져올 수 없습니다.";

    // [3단계] 자연스러운 UX를 위해 1.5초 딜레이
    await new Promise(resolve => setTimeout(resolve, 1500));

    // [4단계] "...(생각 중)"을 실제 답변으로 교체
    const botAnswerDiv = chatGrid.querySelector('.bot-answer');
    if (botAnswerDiv) {
      botAnswerDiv.classList.remove('thinking');
      botAnswerDiv.innerText = text;
    }

  } catch (err) {
    console.error("에러 발생:", err);
    const botAnswerDiv = chatGrid.querySelector('.bot-answer');
    if (botAnswerDiv) botAnswerDiv.innerText = "오류가 발생했습니다.";
  }
}

window.ask = ask;

4. 작동 결과

질문을 입력하면 ...(생각 중) 상태가 먼저 표시되고, 응답이 오면 실제 답변으로 교체된다.

작동 원리

1. 질문 입력
   ↓
2. 화면에 질문 + "..." (로딩 상태) 즉시 표시
   ↓
3. Gemini API에 POST 요청
   ↓
4. 응답 수신 후 "..."을 실제 답변으로 교체

응답을 받아오는 경로는 다음과 같다.

const text =
      data.candidates?.[0]?.content?.parts?.[0]?.text ??
      "응답을 가져올 수 없습니다.";

Gemini API는 응답을 candidates 배열 형태로 반환하기 때문에, 옵셔널 체이닝(?.)으로 안전하게 접근한다.

현재 한계 및 개선 포인트

현재는 응답이 완전히 생성된 후에 한 번에 화면에 출력된다. 스트리밍을 적용하면 ChatGPT처럼 글자가 순차적으로 타이핑되는 효과를 구현할 수 있다

마무리

별도의 프레임워크나 백엔드 서버 없이도 Gemini API를 빠르게 연동할 수 있었다. 다음 단계로는 대화 기록 누적, 마크다운 렌더링, 그리고 스트리밍 방식으로의 전환을 시도해볼 예정이다.

매 라운드에서 최솟값을 선택해 앞으로 보내는 방식의 정렬 알고리즘이다.

1. 선택 정렬을 적용할 배열 생성 및 출력

import java.util.Arrays;

public class SelectionSort {
    public static void main(String[] args) {
        int[] arr = {3, 8, 4, 9, 2, 1};
        System.out.println("정렬 전 : " + Arrays.toString(arr));
    }
}

정렬 전 : [3, 8, 4, 9, 2, 1]

2. 선택 정렬 메서드 정의

import java.util.Arrays;

public class SelectionSort {
    public static void main(String[] args) {
        int[] arr = {3, 8, 4, 9, 2, 1};
        System.out.println("정렬 전 : " + Arrays.toString(arr));
        selectionSortVisual(arr);
        System.out.println("정렬 후 : " + Arrays.toString(arr));
    }

    // 선택 정렬 메서드
    static void selectionSortVisual(int[] arr) {
        int n = arr.length;

        for (int i = 0; i < n - 1; i++) {
            // i번째 위치부터 끝까지 최솟값의 인덱스를 찾음
            int minIndex = i; // 현재 최솟값의 인덱스
            System.out.println((i + 1) + "번째 인덱스 " + i + " ~ " + (n - 1) + "에서 최솟값 선택");

            for (int j = i + 1; j < n; j++) {
                System.out.printf("arr[%d] = %d vs 현재 최솟값[%d] = %d -> ", j, arr[j], minIndex, arr[minIndex]);
                if (arr[j] < arr[minIndex]) {
                    minIndex = j;
                    System.out.println("최솟값 갱신 ! 새 최솟값 = " + arr[minIndex]);
                } else {
                    System.out.println("유지");
                }
            }

            // i번째와 최솟값 위치 교환
            if (minIndex != i) {
                System.out.printf("교환 : arr[%d] = %d <-> arr[%d] = %d%n", i, arr[i], minIndex, arr[minIndex]);
                int temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            } else {
                System.out.println("교환 없음");
            }

            System.out.println((i + 1) + "번째 완료 " + Arrays.toString(arr));
            System.out.println();
        }
    }
}

3. 동작 원리 설명

① minIndex 초기화

바깥쪽 루프에서 minIndex = i로 초기화한다.
여기서 minIndex는 값이 아닌 인덱스(위치)를 저장하는 변수이므로, arr[i]가 아닌 i로 초기화한다는 점에 주의한다.
즉, 현재 i 위치를 일단 최솟값의 위치라고 가정하고 시작한다.

② 안쪽 루프에서 최솟값 탐색

j는 i + 1부터 시작해서 배열 끝까지 순회한다.
arr[j]와 arr[minIndex]를 비교해 arr[j]가 더 작으면 minIndex = j로 갱신한다.
안쪽 루프가 끝나면 minIndex에는 i번째 이후 구간에서의 최솟값 인덱스가 담겨 있다.

③ 교환 (Swap)

안쪽 루프 종료 후, minIndex != i이면 arr[i]와 arr[minIndex]를 교환한다.
이미 최솟값이 제자리(minIndex == i)라면 교환하지 않는다.

④ 반복

위 과정을 n - 1번 반복하면 배열 전체가 오름차순으로 정렬된다.

4. 실행 결과

정렬 전 : [3, 8, 4, 9, 2, 1]

1번째 인덱스 0 ~ 5에서 최솟값 선택
arr[1] = 8 vs 현재 최솟값[0] = 3 -> 유지
arr[2] = 4 vs 현재 최솟값[0] = 3 -> 유지
arr[3] = 9 vs 현재 최솟값[0] = 3 -> 유지
arr[4] = 2 vs 현재 최솟값[0] = 3 -> 최솟값 갱신 ! 새 최솟값 = 2
arr[5] = 1 vs 현재 최솟값[4] = 2 -> 최솟값 갱신 ! 새 최솟값 = 1
교환 : arr[0] = 3 <-> arr[5] = 1
1번째 완료 [1, 8, 4, 9, 2, 3]

2번째 인덱스 1 ~ 5에서 최솟값 선택
arr[2] = 4 vs 현재 최솟값[1] = 8 -> 최솟값 갱신 ! 새 최솟값 = 4
arr[3] = 9 vs 현재 최솟값[2] = 4 -> 유지
arr[4] = 2 vs 현재 최솟값[2] = 4 -> 최솟값 갱신 ! 새 최솟값 = 2
arr[5] = 3 vs 현재 최솟값[4] = 2 -> 유지
교환 : arr[1] = 8 <-> arr[4] = 2
2번째 완료 [1, 2, 4, 9, 8, 3]

...

정렬 후 : [1, 2, 3, 4, 8, 9]

5. 시간 복잡도

• 비교 횟수 : n²/2번 → 바깥 루프 n번 × 안쪽 루프 평균 n/2번
• 교환 횟수 : 최대 n-1번 → 라운드마다 딱 1번만 교환

선택 정렬은 최선의 경우에도 항상 이중 루프를 돌기 때문에 O(n²)이다.
데이터 개수가 많을수록 성능이 급격히 떨어지므로, 소규모 데이터나 학습용으로 적합한 알고리즘이다.

6. 공간 복잡도

temp, minIndex 같은 변수 몇 개만 사용하고 추가 배열을 만들지 않기 때문에 메모리를 거의 사용하지 않는다.

7. 특징

① 교환 횟수가 적다

라운드당 최대 1번만 교환하므로, 교환 비용이 비싼 상황(예: 디스크 I/O, 큰 객체 이동)에서 버블 정렬보다 유리하다.

② 이미 정렬된 배열도 O(n²)

최솟값을 찾는 비교 자체는 항상 수행되기 때문에 최적화가 불가능하다.

③ 불안정 정렬 (Unstable Sort)

같은 값의 상대적 순서가 바뀔 수 있다.
예를 들어 [3a, 3b, 1]을 정렬하면 3a와 3b의 순서가 뒤바뀔 수 있다.
안정 정렬이 필요한 경우에는 삽입 정렬이나 병합 정렬을 사용해야 한다.

함수가 자기 자신을 호출하는 것

• 장점 : 이해가 선행된다면 코드가 직관적이고 읽기 쉬운 경우가 있음
• 단점 : 함수 호출마다 스택 메모리 사용 -> 깊어지면 StackOverFlowError

재귀의 두 가지 필수 요소

📌 예제 1 : 팩토리얼 구하기 (5!)

5! = 5 × 4 × 3 × 2 × 1 = 120

코드

static long factorial(int n) {
    if (n == 0) {   // 기저 조건 : 0! = 1
        return 1;
    }
    return n * factorial(n - 1);  // 재귀 호출
}

🔍 동작 방식 — factorial(5) 호출 시

재귀 함수는 크게 두 단계로 나뉜다.

1단계 : 호출 스택이 쌓이는 과정 (↓ 내려가기)

factorial(5)
  └─ 5 * factorial(4)
         └─ 4 * factorial(3)
                └─ 3 * factorial(2)
                       └─ 2 * factorial(1)
                              └─ 1 * factorial(0)
                                     └─ n == 0 → return 1  🛑 기저 조건 도달!

2단계 : 값이 반환되는 과정 (↑ 올라오기)

return 1
return 1 * 1  = 1
return 2 * 1  = 2
return 3 * 2  = 6
return 4 * 6  = 24
return 5 * 24 = 120  🎯

정답 : 120

📌 예제 2 : 피보나치 수열 구하기

피보나치 수열 : 1, 1, 2, 3, 5, 8, 13, 21, 34 ...
규칙 : 앞의 두 수를 더하면 다음 수가 된다.

코드

static int fibRecursive(int n) {
    // 기저 조건
    if (n == 1 || n == 2) {
        return 1; // n이 1이거나 2면 무조건 1 반환, 재귀 실행 x
    }
    // 재귀 호출
    return fibRecursive(n - 1) + fibRecursive(n - 2);
}

🔍 동작 방식 — fibRecursive(4) 호출 시

반환값은?

피보나치 수열의 4번째 값 = 3 (1, 1, 2, 3, 5 ...)

어떻게 그 값이 나오는가?

재귀 함수는 트리 아래로 내려가며 쪼개고, 위로 올라오며 합산한다.

fib(1) = 1   ← 기저조건 (바로 반환)
fib(2) = 1   ← 기저조건 (바로 반환)

fib(3) = fib(2) + fib(1) = 1 + 1 = 2
fib(4) = fib(3) + fib(2) = 2 + 1 = 3

1단계 : 호출 스택이 쌓이는 과정 (↓ 내려가기)

fibRecursive(4)
  └─ fibRecursive(3) + fibRecursive(2)
         └─ fibRecursive(2) + fibRecursive(1)
                └─ n==1 또는 n==2 → return 1  🛑 기저 조건 도달!

2단계 : 값이 반환되는 과정 (↑ 올라오기)

fib(1) = 1
fib(2) = 1
fib(3) = fib(2) + fib(1) = 1 + 1 = 2
fib(4) = fib(3) + fib(2) = 2 + 1 = 3  🎯

호출 트리 시각화

📌 예제 3 : 하노이의 탑

문제 설명

기둥이 세 개 있음 — A, B, C

• 기둥 A에는 크기가 다른 원판이 n개 쌓여 있다.
• 모든 원판을 기둥 C로 옮겨야 한다.

규칙은 딱 두 가지:

1. 한 번에 하나의 원판만 이동할 수 있다.
2. 작은 원판 위에 큰 원판을 올릴 수 없다.

💡 목표: 원판이 n개일 때 최소 이동 횟수를 구하라!

🔢 예시

원판 1개 → 이동 횟수: 1

A → C  (끝!)

바로 C로 옮기면 됨. 기저 조건(Base Case) 에 해당

원판 2개 → 이동 횟수: 3

1. 작은 원판: A → B
2. 큰 원판:   A → C
3. 작은 원판: B → C

원판 3개 → 이동 횟수: 7

1. 제일 작은 원판: A → C
2. 중간 원판:      A → B
3. 제일 작은 원판: C → B
4. 제일 큰 원판:   A → C  ← 핵심 이동!
5. 제일 작은 원판: B → A
6. 중간 원판:      B → C
7. 제일 작은 원판: A → C

크게 세 덩어리로 보면:

💻 코드 구현

static int hanoiCount = 0; // 이동 횟수 카운터

static void hanoi(int n, char from, char to, char temp) {
    // 기저 조건: 원판이 1개면 바로 이동
    if (n == 1) {
        System.out.println("원판" + n + " 이동: " + from + " → " + to);
        hanoiCount++;
        return;
    }

    // 1단계: 위의 (n-1)개를 from → temp (to를 임시 공간으로)
    hanoi(n - 1, from, temp, to);

    // 2단계: 가장 큰 원판을 from → to
    System.out.println("원판" + n + " 이동: " + from + " → " + to);
    hanoiCount++;

    // 3단계: temp의 (n-1)개를 temp → to (from을 임시 공간으로)
    hanoi(n - 1, temp, to, from);
}

📊 count++ 발생 위치 정리

기저 조건 count++  →  4번  (n=1인 hanoi 4개)
n=2 중간 count++   →  2번  (hanoi(2) 두 번의 2단계)
n=3 중간 count++   →  1번  (hanoi(3)의 2단계)
─────────────────────────
합계               →  7번

💬 마치며 재귀는 개념 자체는 단순하지만, 막상 코드를 보면 흐름을 머릿속으로 따라가기가 쉽지 않았다. 특히 하노이의 탑처럼 재귀가 여러 겹으로 쌓이는 경우엔 더 그랬다. 짝꿍이 알려준 방법대로 직접 그려보며 이해해 보려 했다. 그게 생각보다 훨씬 효과적이었다. 재귀는 익숙해질수록 점점 더 자연스럽게 읽히는 것 같다. 앞으로 문제를 더 풀면서 감각을 키워볼 생각이다.

ArrayList · HashSet · TreeSet · HashMap · TreeMap

오늘 자바의 자료구조인 컬렉션 프레임워크(ArrayList, HashSet, TreeSet, HashMap, TreeMap)를 공부했다. 수많은 메서드가 있지만, 가장 많이 쓰이는 위주로 정리해 보았다.

📁 컬렉션 정리

🔍 메서드 정리

List & Set 공통 메서드

List<String> list = new ArrayList<>();
list.add("Apple");        // [Apple]
list.add("Banana");       // [Apple, Banana]
list.remove("Apple");     // [Banana]
list.contains("Banana");  // true
list.size();              // 1
list.isEmpty();           // false
list.clear();             // []

Set<String> set = new HashSet<>();
set.add("Apple");
set.add("Apple");  // 중복 → 무시됨
set.size();        // 1

List 전용 메서드

Set은 순서가 없어 인덱스 개념이 없으므로 아래 메서드는 List에서만 사용할 수 있다.

List<String> list = new ArrayList<>();
list.add("Apple");
list.add("Banana");
list.add("Cherry");

list.get(0);               // "Apple"
list.set(1, "Blueberry");  // [Apple, Blueberry, Cherry]
list.indexOf("Cherry");    // 2
list.indexOf("Mango");     // -1 (없는 요소)

Map 메서드

키와 값을 쌍으로 저장하는 구조.

Map<String, Integer> map = new HashMap<>();
map.put("홍길동", 90);
map.put("이순신", 85);
map.put("홍길동", 95);  // 키 중복 → 값 95로 덮어쓰기

map.get("홍길동");         // 95
map.get("강감찬");         // null (없는 키)
map.containsKey("이순신"); // true
map.keySet();              // [홍길동, 이순신]
map.values();              // [95, 85]
map.remove("이순신");      // 이순신 쌍 삭제

// keySet()으로 전체 순회
for (String key : map.keySet()) {
    System.out.println(key + " : " + map.get(key));
}

Tree 계열 전용 메서드 (TreeSet / TreeMap)

정렬이 보장되기 때문에 범위 검색과 최솟값/최댓값 조회가 가능.

// TreeSet 예제
TreeSet<Integer> treeSet = new TreeSet<>();
treeSet.add(30); treeSet.add(10); treeSet.add(50); treeSet.add(20);
// 자동 정렬됨 → [10, 20, 30, 50]

treeSet.first();         // 10 (최솟값)
treeSet.last();          // 50 (최댓값)
treeSet.subSet(10, 40);  // [10, 20, 30] (40 미포함)
treeSet.headSet(30);     // [10, 20] (30 미포함)
treeSet.tailSet(20);     // [20, 30, 50]

// TreeMap 예제
TreeMap<String, Integer> treeMap = new TreeMap<>();
treeMap.put("banana", 2); treeMap.put("apple", 5); treeMap.put("cherry", 1);
// 키 기준 알파벳 정렬 → {apple=5, banana=2, cherry=1}

treeMap.firstKey();                 // "apple"
treeMap.lastKey();                  // "cherry"
treeMap.subMap("apple", "cherry"); // {apple=5, banana=2}

⚡ 성능 비교 Hash vs Tree

HashSet / HashMap은 해시 함수로 데이터 위치를 바로 찾아가기 때문에 O(1) 로 매우 빠르다.
반면 TreeSet / TreeMap은 데이터를 넣을 때마다 기존 데이터들과 비교해 정렬된 위치를 탐색하므로 O(log n) 의 비용이 발생한다.

정렬이 꼭 필요한 경우가 아니라면, Hash 계열을 사용하는 것이 기본 !

🔢 집합 연산 (Set)

Set은 수학의 집합과 동일한 개념이라 합집합, 교집합, 차집합 연산을 메서드 하나로 처리할 수 있다.

⚠️ 이 메서드들은 원본 Set을 직접 수정하므로 원본을 보존하려면 새로운 Set에 복사한 뒤 사용.

Set<Integer> A = new HashSet<>(Arrays.asList(1, 2, 3, 4, 5));
Set<Integer> B = new HashSet<>(Arrays.asList(3, 4, 5, 6, 7));

// 합집합 (A ∪ B) → [1, 2, 3, 4, 5, 6, 7]
Set<Integer> union = new HashSet<>(A);
union.addAll(B);
System.out.println(union);

// 교집합 (A ∩ B) → [3, 4, 5]
Set<Integer> intersection = new HashSet<>(A);
intersection.retainAll(B);
System.out.println(intersection);

// 차집합 (A - B) → [1, 2]
Set<Integer> difference = new HashSet<>(A);
difference.removeAll(B);
System.out.println(difference);

결과를 정렬된 상태로 보고 싶다면 → TreeSet으로 변환

Set<Integer> A = new HashSet<>(Arrays.asList(5, 3, 1, 4, 2));
Set<Integer> B = new HashSet<>(Arrays.asList(3, 4, 5, 6, 7));

Set<Integer> union = new HashSet<>(A);
union.addAll(B);

System.out.println(union);               // HashSet → 순서 무작위
System.out.println(new TreeSet<>(union)); // TreeSet → 자동 정렬: [1, 2, 3, 4, 5, 6, 7]

😎 언제 어떤 컬렉션을 쓸까?

순서가 중요할 때 → List

List<String> playlist = new ArrayList<>();
playlist.add("노래 A");
playlist.add("노래 B");
playlist.add("노래 A");  // 중복 OK
System.out.println(playlist.get(0));  // 노래 A

중복 제거가 필요할 때 → Set

Set<String> visited = new HashSet<>();
visited.add("Seoul");
visited.add("Tokyo");
visited.add("Seoul");  // 중복 → 무시됨
System.out.println(visited.size());  // 2

관계(Key-Value)를 저장할 때 → Map

Map<String, Integer> score = new HashMap<>();
score.put("홍길동", 90);
score.put("이순신", 85);
System.out.println(score.get("홍길동"));  // 90

💊 접근 제어자 종류 및 범위

접근 범위: private < default < protected < public

🔒 private

특징

• 같은 클래스 내부에서만 접근 가능
• 외부에서 직접 접근 불가 → getter / setter로 간접 접근
• 캡슐화의 핵심, 가장 강력한 접근 제한

  예시 코드

public class AccessModifier {
public class AccessModifier {
    public static void main(String[] args) {
        Person p = new Person();
        // p.name = "홍길동";  ❌ 컴파일 에러!
        System.out.println(p.setName("")); // ✅ setter로 접근
        System.out.println(p.getName()); // ✅ getter로 접근

    }
}

class Person {
    private String name;  // 외부에서 직접 접근 불가

    // getter로 간접 접근 허용
    public String getName() {
        return this.name;
    }

    // setter에서 해당 데이터 수정
    public String setName(String name) {
        if (name != null && name != "" && name.length() > 0) {
            this.name = name;
            return this.name;
        }
        return "빈 문자열은 입력할 수 없습니다. 이름을 다시 입력해 주세요.";
    }
}

주로 사용하는 경우

• 클래스의 필드(멤버 변수) 거의 대부분에 사용
• 외부에 노출할 필요 없는 내부 로직 메서드에 사용
• 데이터 유효성 검사가 필요한 경우 setter와 함께 사용

📦 default (package-private)

특징

• 접근 제어자를 아무것도 명시하지 않은 상태
• 같은 패키지 내에서만 접근 가능
• 다른 패키지에서는 import 해도 접근 불가

예시 코드

실제로는 아래처럼 패키지가 나뉘어 있을 때 동작한다.

📁 com.example.service
    ├── UserService.java      ← 같은 패키지
    └── UserRepository.java  ← 같은 패키지

📁 com.example.controller
    └── UserController.java  ← 다른 패키지 → UserRepository 접근 불가

같은 파일(같은 패키지)에서 default로 선언된 클래스와 메서드에 접근하는 예시다.

public class AccessModifier {
    public static void main(String[] args) {
        UserRepository repo = new UserRepository();  // ✅ 같은 패키지라 접근 가능
        System.out.println(repo.findById(1));        // ✅ "User-1" 출력

        // 다른 패키지에서 아래처럼 접근하면 컴파일 에러!
        // import com.example.service.UserRepository;
        // UserRepository repo = new UserRepository();  ❌
    }
}

class UserRepository {        // default 클래스 (접근 제어자 없음)
    String findById(int id) { // default 메서드 (접근 제어자 없음)
        return "User-" + id;
    }
}

주로 사용하는 경우

• 패키지 내부에서만 사용할 유틸리티 클래스
• 외부에 노출하고 싶지 않은 패키지 내부 구현체
• 같은 패키지 내 클래스들이 협력할 때

🛡️ protected

특징

• 같은 패키지 + 다른 패키지의 자식 클래스(상속)에서 접근 가능
• 상속 관계에서 부모의 기능을 자식이 사용/오버라이딩할 수 있게 열어줌
• public보다는 제한적, 상속을 의도한 설계에서 사용

예시 코드

public class AccessModifier {
    public static void main(String[] args) {
        Dog dog = new Dog();
        dog.bark();
        // 출력:
        // 강아지이(가) 숨을 쉰다.
        // 강아지이(가) 짖는다.

        Animal animal = new Animal();
        // animal.name = "고양이";  ❌ 상속받은 자식이 아니므로 외부에서 직접 접근 불가
        // animal.breathe();       ❌ 상속받은 자식이 아니므로 외부에서 직접 접근 불가
    }
}

class Animal {
    protected String name;  // 자식 클래스에서 접근 가능

    protected void breathe() {  // 자식 클래스에서 오버라이딩 가능
        System.out.println(name + "이(가) 숨을 쉰다.");
    }
}

class Dog extends Animal {  // Animal을 상속받은 자식 클래스
    public void bark() {
        this.name = "강아지";  // ✅ protected 필드 접근 가능 (상속)
        breathe();             // ✅ protected 메서드 호출 가능 (상속)
        System.out.println(name + "이(가) 짖는다.");
    }
}

주로 사용하는 경우

• 상속을 설계할 때 자식 클래스에서만 접근 가능하도록 열어줄 때
• 템플릿 메서드 패턴에서 자식이 오버라이딩할 메서드
• 부모 클래스의 핵심 필드를 자식이 직접 사용해야 할 때

🌍 public

특징

• 어디서든 접근 가능 (패키지, 상속 관계 무관)
• API의 진입점, 외부에 공개할 기능에 사용
• 하나의 .java 파일에 public 클래스는 1개만 가능하며 파일명과 일치해야 함

  예시 코드

public class AccessModifier {
    public static void main(String[] args) {
        Person p = new Person();
        p.name = "홍길동";  // 내부 변수 수정 가능
        System.out.println(p.name); // 내부 변수 바로 조회 가능

    }
}

class Person {
    public String name;  // 외부에서 직접 접근 불가

    // getter로 간접 접근 허용
    public String getName() {
        return this.name;
    }

    // setter에서 해당 데이터 수정
    public String setName(String name) {
        if (name != null && name != "" && name.length() > 0) {
            this.name = name;
            return this.name;
        }
        return "빈 문자열은 입력할 수 없습니다. 이름을 다시 입력해 주세요.";
    }
}

주로 사용하는 경우

• 외부에 공개하는 API, 라이브러리의 진입점
• 다른 패키지에서도 사용해야 하는 공통 유틸리티 메서드
• 클래스 자체를 외부에서 사용해야 할 때

🔑 핵심 요약

"최소한의 접근 권한을 부여하라" (Principle of Least Privilege)

1. private: 기본값으로 생각하자. 클래스 필드는 특별한 이유가 없으면 private
2. default: 패키지 내부 구현 숨기기. 외부에 굳이 노출 안 해도 될 때
3. protected: 상속 설계 시. 자식 클래스에만 열어줄 때
4. public: 진짜 외부에 공개해야 할 API에만 접근 제어자를 제대로 활용하면 코드 변경의 파급 효과를 최소화하고, 유지보수성이 크게 향상된다.

오늘은 클래스 설계 실습 문제 두 가지를 풀었다.
기초 문제에서는 Car 클래스를, 심화 문제에서는 은행 계좌 시스템을 구현했다.

🚗 문제 1. Car 클래스 만들기 기초

문제 요구사항

• 속성 : brand(제조사), model(모델명), speed(속도)
• 메서드
  • accelerate(int amount) — 속도 증가
  • breakSpeed(int amount) — 속도 감소 (0 미만이면 0)
  • getInfo() — 제조사, 모델명, 속도 출력
• Car 객체 2개를 만들어 accelerate, breakSpeed 후 getInfo 출력하기

내 풀이

class Car {
    private String brand;
    private String model;
    private int speed;

    public Car(String brand, String model, int speed) {
        this.brand = brand;
        this.model = model;
        this.speed = speed;
    }

    public void accelerate(int amount) {
        if (amount < 0) {
            System.out.println("음수값은 입력이 불가합니다.");
        } else {
            this.speed = this.speed + amount;
            System.out.println("⬆️ 속도 " + amount + " 증가");
        }
    }

    public void breakSpeed(int amount) {
        if (amount < 0) {
            System.out.println("음수는 입력이 불가합니다.");
        } else {
            this.speed = this.speed - amount;
            if (this.speed < 0) { this.speed = 0; }
            System.out.println("⬇️ 속도 " + amount + " 감소");
        }
    }

    public void getInfo() {
        System.out.println("제조사 : " + this.brand);
        System.out.println("모델명 : " + this.model);
        System.out.println("속도 : " + this.speed);
    }
}

테스트 코드

Car car = new Car("테슬라", "모델S", 1);
Car car2 = new Car("제네시스", "GV70", 2);

System.out.println("-------- car 1 --------");
car.getInfo();
car.accelerate(9);
car.getInfo();
car.breakSpeed(4);
car.getInfo();

System.out.println("-------- car 2 --------");
car2.getInfo();
car2.accelerate(9);
car2.getInfo();
car2.breakSpeed(2);
car2.getInfo();

출력 결과

-------- car 1 --------
제조사 : 테슬라
모델명 : 모델S
속도 : 1
⬆️ 속도 9 증가
제조사 : 테슬라
모델명 : 모델S
속도 : 10
⬇️ 속도 4 감소
제조사 : 테슬라
모델명 : 모델S
속도 : 6
-------- car 2 --------
제조사 : 제네시스
모델명 : GV70
속도 : 2
⬆️ 속도 9 증가
제조사 : 제네시스
모델명 : GV70
속도 : 11
⬇️ 속도 2 감소
제조사 : 제네시스
모델명 : GV70
속도 : 9

🏦 문제 2. 은행 계좌 시스템 설계 심화

문제 요구사항

• 속성 : balance(잔액, private), owner(예금주)
• 메서드
  • deposit(long amount) — 입금 (음수면 무시)
  • withdraw(long amount) — 출금 (잔액 부족 시 "잔액 부족" 출력)
  • transfer(BankAccount to, long amount) — 이체 송금
• 계좌 2개를 만들어 입금 → 이체 → 잔액 출력까지 구현하기

내 풀이

class BankAccount {
    private int balance;
    private String owner;

    public BankAccount(String owner, int balance) {
        this.balance = balance;
        this.owner = owner;
    }

    public void deposit(long amount) {
        if (amount < 0) {
            System.out.println("값을 잘못 입력하였습니다.");
        } else {
            this.balance += amount;
            System.out.println(amount + "원 입금이 완료되었습니다.");
            System.out.println(this.owner + "님의 잔액은 총 " + this.balance + "원 입니다.");
        }
    }

    public void withdraw(long amount) {
        if (this.balance < amount) {
            System.out.println("잔액 부족");
        } else {
            this.balance -= amount;
            System.out.println(amount + "원 출금이 완료되었습니다.");
            System.out.println(this.owner + "님의 잔액은 총 " + this.balance + "원 입니다.");
        }
    }

    public int transfer(BankAccount to, long amount) {
        String toOwner = to.owner;
        int toBalance = to.balance;

        if (this.balance < amount) {
            System.out.println("잔액이 부족하여 이체가 불가 합니다. 현재 총 잔액 : " + this.balance);
        } else if (amount == 0) {
            System.out.println("최소 1원이상 부터 이체가 가능합니다.");
        } else {
            this.balance -= amount;
            to.balance += amount;
            System.out.println(toOwner + "님께 총" + amount + "원 이체가 완료 되었습니다.");
            return toBalance;
        }
        return 0;
    }

    public void getBalance() {
        System.out.println("이름 : " + this.owner);
        System.out.println("총 남은 잔액 : " + this.balance);
    }
}

테스트 코드

BankAccount owner1 = new BankAccount("홍길동", 0);
owner1.deposit(100);
owner1.withdraw(50);

BankAccount owner2 = new BankAccount("김유신", 0);
owner2.deposit(300);
owner2.withdraw(100);
owner2.transfer(owner1, 200);

owner1.getBalance();
owner2.getBalance();

출력 결과

100원 입금이 완료되었습니다.
홍길동님의 잔액은 총 100원 입니다.
50원 출금이 완료되었습니다.
홍길동님의 잔액은 총 50원 입니다.

300원 입금이 완료되었습니다.
김유신님의 잔액은 총 300원 입니다.
100원 출금이 완료되었습니다.
김유신님의 잔액은 총 200원 입니다.

홍길동님께 총200원 이체가 완료 되었습니다.
이름 : 홍길동
총 남은 잔액 : 250
이름 : 김유신
총 남은 잔액 : 0

💡 오늘 헷갈렸던 것 — 객체 참조 vs 값 복사

transfer() 구현 중 상대 계좌의 잔액이 바뀌지 않는 문제가 발생했다.

원인은 객체의 필드값을 지역 변수에 복사하면 원본 객체와 연결이 끊긴다는 것.

// ❌ 지역 변수에 복사 — 원본 객체 잔액 그대로
int toBalance = to.balance;
toBalance += amount;

// ✅ 객체 직접 접근 — 실제 잔액 변경됨
to.balance += amount;

Java에서 int 같은 기본형은 값을 복사해서 전달한다.
객체의 필드를 지역 변수에 담으면 그 순간 원본과의 연결이 끊기기 때문에,
다른 객체의 상태를 변경하려면 객체 자체(to.balance)를 통해 직접 접근해야 한다.

이번에는 부트캠프에서 배운 HTML/CSS/Typescript로 Gemini API를 이용한 AI 채팅 사이트를 만들어보았습니다. (디자인 구성은 Claude와 Gemini의 도움을 받았습니다.)

1. 전체 레이아웃 구조

AI 채팅 페이지의 레이아웃은 크게 사이드바(Sidebar) 와 메인 화면(Main) 두 영역으로 나뉩니다.

• 사이드바 → 채팅 목록 관리
• 메인 화면 → 실제 채팅이 이루어지는 공간

2. Sidebar 구조

사이드바는 Header / Body / Footer 3단 구조입니다.

3. Main 구조

메인화면도 동일하게 Header / Body / Footer 3단 구조입니다.

4. HTML 레이아웃 구성

CSS를 입히기 전, HTML만으로 먼저 골격을 잡았습니다.

<div>
  <header class="main-header">...</header>

  <main>
    <section class="prompt-section">...</section>   <!-- 프롬프트 필터 + 카드 -->
    <section class="chat-messages">...</section>     <!-- 대화 메시지 영역 -->
    <section class="question-section">...</section>  <!-- 질문 입력창 -->
  </main>

  <aside class="chat-sessions-sidebar">...</aside>   <!-- 채팅 목록 사이드바 -->
  <div class="sidebar-overlay"></div>                <!-- 사이드바 오버레이 -->
</div>

5. CSS 변수 (Custom Properties)

CSS 변수는 :root에 정의하면 파일 전체에서 var(--이름) 형태로 사용할 수 있습니다.
색상과 크기를 한 곳에서 관리하기 때문에 유지보수가 훨씬 쉬워집니다.

:root {
    --color-bg: #fff5f7; /* 페이지 배경 색상 */
    --color-sidebar-bg: #fce4ec; /* 사이드바 배경 색상 */
    --color-header-bg: #ffffff; /* 메인 헤더 배경 색상 */
    --color-header-logo: #ff97af; /* 메인 헤더 로고 색상 */
    --color-accent: #ffb3c6; /* 강조 */
    --color-text: #7b3a52; /* 기본 텍스트 색상 */
    --color-border: #f4c0d1; /* 테두리 색상 */

    --font-main: "Segoe UI", "Apple SD Gothic Neo", "snas-serif";
    --radius: 12px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --transition: 0.2s ease;
}

// 사용법
.body {
    color: var(--color-text);
}

CSS로 배경과 폰트 색상을 수정해 보았습니다.

6. 다음 단계

다음 글에서는 아래 내용을 순서대로 다룰 예정입니다.

1. CSS로 레이아웃 잡기 (Flexbox / Grid)
2. TypeScript로 채팅, 대화 목록, 필터링 구현
3. Gemini API 연결

이 포스팅은 시리즈로 이어집니다. 다음 글에서는 스타일 코드 작성과, TypeScript로 간단한 채팅 기능을 구현해 보겠습니다.

실행 전에 코드 작성 단계에서 타입 에러를 미리 잡아주는 언어. 브라우저는 TS를 직접 실행할 수 없으므로, tsc 명령으로 컴파일해 .js 파일로 변환 후 사용한다.

// 예시
tsc app.ts

2. 타입 선언 기본 문법

// 기본 타입 → 변수명 : 타입 = 값;
const name: string = "홍길동";
const age: number = 20;
const subjects: string[] = ["국어", "영어", "수학"];

// Union → | 로 두 가지 이상 허용
// 변수에 string 타입의 값을 할당하고, 추후 number 값을 할당할 수 있음
let userId: string | number = 'id-123';
userId = 123;

// Optional → ? 로 값이 없어도 가능
let nickname?: string;

// Literal 타입 → 정해진 값만 허용
let color: 'red' | 'blue' | 'black' = 'blue';
color = 'pink'; // Error: 'pink'는 허용되지 않음

3. type alias

자주 쓰는 타입 조합에 이름을 붙여 재사용한다.

// 1. type 키워드로 이름 정의
type Color = 'red' | 'blue' | 'black';

// 2. 정의한 이름으로 해당 타입 사용 가능
let color: Color = 'red';

4. Interface

객체가 가져야 할 프로퍼티를 정의한다. (객체의 설계도)

interface Employee {
  id: number;
  name: string;
  department: string;
}

컴파일 후 사라지는 이유

Interface는 타입 검사 전용 도구다. JavaScript에는 "interface"라는 개념이 없기 때문에, TypeScript 컴파일러가 타입 검사를 마치면 JS로 변환될 때 완전히 제거된다. 런타임에 어떤 흔적도 남기지 않아 번들 크기에도 영향을 주지 않는다.

// TypeScript (.ts)
interface Employee {
  id: number;
  name: string;
}
const emp: Employee = { id: 1, name: "김철수" };

// 컴파일 결과 (.js) — interface 흔적 없음
const emp = { id: 1, name: "김철수" };

Interface vs Class Interface는 설계도만 정의하고, Class는 실제 동작하는 코드를 만든다. implements 키워드로 클래스가 인터페이스를 따르도록 강제할 수 있다.

5. Class

public / private / readonly 로 각 프로퍼티의 접근 범위를 제한한다.

class Employee {
  public   name: string;      // 어디서든 접근 가능 (기본값)
  private  salary: number;    // 클래스 내부에서만 접근 가능
  readonly id: number;        // 읽기 전용 — 초기화 후 변경 불가

  // 생성자 매개변수에 접근 제어자를 쓰면 선언 + 할당 동시에
  constructor(
    public department: string,
    name: string,
    salary: number,
    id: number
  ) {
    this.name   = name;
    this.salary = salary;
    this.id     = id;
  }

  // private 값은 getter 메서드로만 노출
  getSalary(): number {
    return this.salary;
  }
}

const emp = new Employee("개발팀", "이영희", 5000, 1);

emp.name;           // OK — public
emp.department;     // OK — public (생성자 단축 선언)
emp.getSalary();    // OK — 5000
emp.salary;         // Error: private 프로퍼티
emp.id = 99;        // Error: readonly 프로퍼티

6. 제네릭

T는 어떤 타입이든 넣을 수 있는 '빈 박스'와 같다. 함수나 인터페이스를 정의할 때 타입을 미리 지정하지 않고, 실제로 사용할 때 타입을 결정하여 코드의 재사용성을 높인다.

function identity<T>(value: T): T {
  return value;
}

identity<string>("hello");  // T = string
identity<number>(42);       // T = number

실용 예시: API 응답 래퍼

interface ApiResponse<T> {
  data:    T;
  status:  number;
  message: string;
}

interface User { id: number; name: string; }
interface Post { title: string; body: string; }

// 같은 구조, 다른 data 타입
const userRes: ApiResponse<User> = {
  data: { id: 1, name: "박민준" },
  status: 200,
  message: "ok",
};

const postRes: ApiResponse<Post> = {
  data: { title: "TypeScript 입문", body: "..." },
  status: 200,
  message: "ok",
};

7. 네이밍 규칙

8. 정리

01. TypeScript는 JavaScript에 안전망을 씌운 것 런타임 에러를 작성 단계에서 발견하면 디버깅 시간이 크게 줄어든다.

02. 팀 프로젝트에서 빛을 발한다 타입 선언은 처음엔 번거롭게 느껴지지만, 팀 프로젝트에서 코드를 처음 보는 사람도 타입만 보면 의도를 파악할 수 있다. 결국 타입이 곧 문서다.

계산기를 직접 다시 구현해 보면서, 집에 있는 실물 계산기를 모델 삼아 CSS로 최대한 비슷하게 재현해 보았다.

CSS를 거의 처음 다뤄보다 보니 레이아웃을 어떻게 잡아야 할지 감이 잘 오지 않아 선생님 코드를 참고하면서 속성을 하나씩 추가하고, 브라우저에서 바로 확인하는 방식으로 작업했다.

그러다 보니 자연스럽게 이 속성이 뭘 하는 건지 찾아보게 됐고, 특히 + 버튼을 두 칸 차지하게 만드는 부분에서 grid-row: span 2를 처음 알게 됐다.

계산기 핵심 로직 분석

1. 상태 관리

let currentInput = "0";
let previousInput = "";
let operator = null;
let shouldReset = false;

계산기의 상태는 네 가지 변수로 관리된다. currentInput은 현재 화면에 보이는 숫자, previousInput은 연산자 앞에 입력된 숫자, operator는 선택된 연산자를 저장한다.

shouldReset은 연산자를 누른 직후 다음 숫자 입력 시 화면을 초기화할지 여부를 나타내는 플래그다.

예를 들어 5 + 3 = 을 입력하면, 5를 누르면 currentInput = "5", +를 누르면 previousInput = "5", operator = "+", shouldReset = true로 바뀐다. 이후 3을 누르면 shouldReset이 true이므로 화면을 초기화하고 currentInput = "3"으로 새로 시작한다. 마지막으로 =를 누르면 계산이 실행된다.

2. 숫자 입력

function inputNum(num) {
    if (shouldReset) {
        currentInput = num;
        shouldReset = false;
    } else {
        if (currentInput.length >= 10) return;
        currentInput = currentInput === "0" ? num : currentInput + num;
    }
    updateDisplay();
}

숫자 버튼을 눌렀을 때 실행되는 함수다. 두 가지 경우를 처리한다.

첫 번째로 shouldReset이 true이면, 연산자를 누른 직후이므로 화면을 초기화하고 새 숫자로 시작한다.

두 번째 삼항 연산자로 현재값이 "0"인지 확인한다. "0"이면 새 숫자로 교체하고, "0"이 아니면 뒤에 이어 붙인다. "0" 상태에서 그냥 뒤에 붙이면 "09" 같은 숫자가 되기 때문이다.

3. 연산자 입력

function setOperator(op) {
    if (operator && !shouldReset) {
        calculate();
    }
    previousInput = currentInput;
    operator = op;
    shouldReset = true;

    const symbols = { "+": "+", "-": "-", "*": "X", "/": "÷" };
    expressionEl.textContent = `${previousInput} ${symbols[op]}`
}

연산자 버튼을 눌렀을 때 실행되는 함수다. 3 + 5 * 처럼 숫자 입력 후 연산자를 또 누르면 3 + 5 를 먼저 계산하고 * 로 이어간다.

symbols 객체는 * 를 X, / 를 ÷ 로 변환해 사용자에게 계산식을 보기 좋게 화면에 표시하기 위해 사용한다.

4. 계산

function calculate() {
    if (!operator || !previousInput) return;

    const prev = parseFloat(previousInput);
    const curr = parseFloat(currentInput);
    let result;   

    switch (operator) {
        case "+": result = prev + curr; break;
        case "-": result = prev - curr; break;
        case "*": result = prev * curr; break;
        case "/":
            if (curr === 0) {
                currentInput = "오류";
                expressionEl.textContent = "";
                operator = null;
                updateDisplay();
                return;
            }
            result = prev / curr;
            break;
    }
}

= 버튼을 눌렀을 때 실행되는 함수다. currentInput을 문자열로 관리하는 이유는 사용자가 893을 입력할 때 숫자로 받으면 덧셈이 되어버리기 때문이다. 그래서 문자열로 받고 parseFloat으로 변환해서 계산한다.

/ 연산에서 curr이 0이면 수학적으로 정의할 수 없으므로 "오류"를 표시하고 함수를 종료한다.

사용자의 행동에 반응하고, 데이터를 처리하며, 웹페이지를 살아있게 만드는 프로그래밍 언어

HTML이 뼈대를 만들고, CSS가 꾸며주면, JavaScript는 거기에 생명을 불어넣는 역할

버튼을 누르면 반응하고, 데이터를 계산하고, 서버와 소통하고, 화면을 실시간으로 바꾸는 등 웹에서 일어나는 모든 동적인 것들을 말한다.

HTML = 사람의 몸 (뼈, 장기) CSS = 사람의 외모 (옷, 헤어스타일) JS = 사람의 뇌 + 근육 (생각하고, 판단하고, 움직임)

script 태그는 어디에 위치해야 할까?

HTML 파일에서 JavaScript를 불러올 때 script 태그의 위치를 어디에 놓아야 좋을지 궁금했다.

1. head 안에 넣는 경우

<head>
  <script src="app.js"></script>
</head>

HTML이 다 그려지기 전에 JS가 실행되어 오류가 날 수 있다.

2. body 맨 아래에 넣는 경우

<body>
  <h1>Hello</h1>
  <script src="app.js"></script>
</body>

- HTML을 다 그린 후 JS가 실행되어 안전하다.
- JS 파일이 크면 페이지 로딩이 느려질 수 있다.

3. head 안에 async 사용

<head>
  <script async src="app.js"></script>
  <script async src="util.js"></script>
  <script async src="main.js"></script>
</head>

- HTML 로딩과 JS 로딩을 동시에 진행한다.
- JS 로딩이 끝나면 즉시 실행한다.
- 순서가 보장되지 않아 JS끼리 의존성이 있으면 위험하다.

4. head 안에 defer 사용

<head>
  <script defer src="app.js"></script>
  <script defer src="util.js"></script>
  <script defer src="main.js"></script>
</head>

- HTML 로딩과 JS 로딩을 동시에 진행한다.
- HTML이 다 그려진 후에 JS가 실행되므로 오류가 날 위험이 없다.
- script 태그가 여러 개일 때 순서가 보장된다.

변수 선언

변수란? 데이터를 담아두는 이름표가 붙은 상자

각각 언제 사용할까?

1. var - 구버전으로 사용 지양 var x = 1; var x = 2; // 재선언 가능

2. let - 나중에 값이 바뀔 때 사용 let count = 1; count = 3; // 재할당 가능

3. const - 값이 고정일 때 (기본적으로 이걸 먼저 사용하기) const name = "철수"; name = "영희"; // ❌ 오류 발생!

구조만 있는 HTML 텍스트에 스타일을 입혀주는 언어 ex) html - 사람, css - 옷

• HTML 문서에 'style' 태그 안에 삽입할 수도 있고
• 별도의 파일로 분리하는 것도 가능

css 선택자 우선순위

id > class > tag

박스 모델(Box Model)

1. content : 텍스트, 내용
2. padding : 텍스트와 테두리의 공간
3. border : 테두리
4. margin : 요소 바깥의 외부 공간

🔎 CSS 사용해보기

1. 외부 CSS 파일 연결해서 사용해보기

1) style.css 파일 생성 
2) head 태그 안에 아래와 같은 코드를 추가하여 사용

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

2. 내부 head > style 태그 안에서 사용해보기

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 사용해보기</title>
    <style>
        /* 스타일 추가 */
        body {
            font-family: 'Chiron GoRound TC';
            background: rgb(255, 254, 246);
            color: rgb(21, 20, 20);
        }
    </style>

</head>

Bootstrap이란?

CSS가 옷을 직접 만들고 코디해서 입는 거라면 Bootstrap은 이미 만들어져 있는 옷을 코디해서 입는 거라고 이해했다.

🔎 부트스트랩 사용해보기

별도의 설치 없이 CDN으로 바로 사용 가능

1. 부트스트랩 홈페이지 접속 > Docs 페이지에서 CDN 링크 복사 https://getbootstrap.com/docs/5.3/getting-started/introduction/

   
   

2. 아래 코드와 같이 head 태그 안에 링크 붙여넣기 *참고 : rel="stylesheet"가 없으면 브라우저가 이게 CSS 파일인지 몰라서 적용을 안 해서 추가해 줘야 함

   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
   </head>

3. 부트스트랩에서 사용하고 싶은 컴포넌트 복사 후 body 태그 안에 붙여 넣으면 사용 가능

   <body>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
   
      <button type="button" class="btn btn-link">Link</button>
   </body>

   
   4. 결과 

간단히 말하면 웹페이지의 구조를 태그를 이용하여 정의하는 언어

• HyperText : 하이퍼링크를 통해 다른 페이지로 이동할 수 있는 텍스트
• Markup: 태그를 이용하여 텍스트에게 역할을 주는 것 Ex) 제목, 줄바꿈, 비디오 등
• Language : 브라우저가 이해할 수 있는 언어

html 문서의 기본 구조

<!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> 
</body>
</html>

• !DOCTYPE html : 현재 문서가 HTML 언어로 작성한 웹 문서
• html : 웹 문서의 시작과 끝
• ** lang="en" :** 페이지가 어떤 언어로 작성됐는지 명시.
• head : 메타데이터와 웹페이지의 타이틀
• meta charset="UTF-8" : 문자 인코딩 방식을 UTF-8로 설정하는 것. UTF-8은 대부분의 언어를 지원하기에 한글이 깨지지않음.
• width=device-width : 페이지의 너비를 기기 너비에 맞춤
• *initial-scale=1.0 : * 처음 화면을 보여줄 때 1배율로 보여줌
• title : 웹 브라우저 탭에 뜨는 제목
• body : 브라우저 화면에 보이는 부분

오늘 배운 태그

시맨틱 태그(Semantic Tag) :태그 이름 자체에 의미가 담겨 있음 ex) header 시맨틱 태그를 쓰는 이유는? 다른 개발자들과 협업을 할 때 코드의 가독성을 높인다.

배운 내용을 바탕으로 아래와 같이 나의 자기소개서 구조를 만들어봤다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - 서지현</title>
</head>

<body>
    <!-- 헤더 : 페이지 상단 영역 -->
    <header>
        <h1>jhwest.dev</h1>
        <nav>
            <ul>
                <li><a href="#about">About Me</a>
                <li><a href="#favorites">Favorites</a>
                <li><a href="#experience">Experience</a>
                <li><a href="#guestbook">Guestbook</a>
            </ul>
        </nav>
    </header>

    <!-- main: 페이지의 내용 부분 -->
    <main>
        <!-- section: 주제별 구역 -->
        <section id="about">
            <h2>ABOUT ME</h2>
            <P>나를 소개합니다.</P>
            <!-- 테이블 -->
            <!-- 
                table : 표 전체
                thead : 헤더 행 그룹
                tbody : 본문 행 그룹
                tr : 행(row)
                th : 헤더 셀(굵게 + 가운데 정렬)
                td : 일반 셀
            -->
            <table border="1">
                <tr>
                    <th>이름</th>
                    <td>서지현</td>
                </tr>
                <tr>
                    <th>MBTI</th>
                    <td>INFP</td>
                </tr>
                <tr>
                    <th>사는 곳</th>
                    <td>인천</td>
                </tr>
            </table>

        </section>

        <section id="favorites">
            <h2>FAVORITES</h2>
            <P>내가 좋아하는 것들</P>

            <!-- dl dt dd -->
            <dl>
                <dt>1. 내가 제일 좋아하는 음식은?</dt>
                <dd>피자</dd>
                <dt>2. 최애 영화 혹은 드라마는?</dt>
                <dd>선재업고튀어, 미지의서울, 그해우리는 등</dd>
                <dt>3. 취미는?</dt>
                <dd>재봉틀, 걷기</dd>
            </dl>

        </section>


        <section id="experience">
            <h2>EXPERIENCE</h2>
            <!-- 이미지 + 캡션 -->
            <figure>
                <img src="#" alt="산티아고 순례길" width="500">
                <figcaption>사진 1. 산티아고 순례길</figcaption>
            </figure>
        </section>

        <section id="guestbook">
            <h2>GUEST BOOK</h2>
            <!-- 
                form : 데이터를 사용자에게 입력 받아 서버에 전송하는 컨테이너
                action : 데이터를 보낼 URL
                method : GET(URL에 노출) VS POST(숨겨서 전송)
            -->
            <form action="#" method="post">
                <!-- fieldset : 연관된 입력 요소를 그룹화-->
                <fieldset>
                    <label for="name">이름</label>
                    <input type="text" id="name" name="name" placeholder="이름을 입력해 주세요." required>
                    <br><br>

                    <!-- textarea : 여러 줄 텍스트 입력 -->
                    <label for="message">메세지</label><br>
                    <textarea id="message" name="message" rows="5" cols="40" placeholder="메세지를 입력해 주세요."></textarea>

                    <!-- type = "submit" : 데이터 전송 -->
                    <button type="submit">전송</button>
                    <!-- type = "reset" : 모든 입력 값 초기화 -->
                    <button type="reset">초기화</button>
                </fieldset>
            </form>
        </section>

    </main>

    <!-- footer : 사이트 하단 영역 -->
    <footer>
        <p>&copy; 2026. 서지현. All rights reserved.</p>
    </footer>

</body>
</html>