어제 오늘 내일

[Spring Boot 입문 - 12] 화면 만들기 2 - 게시글 등록 & AJAX(Fetch) 통신 본문

IT/SpringBoot

[Spring Boot 입문 - 12] 화면 만들기 2 - 게시글 등록 & AJAX(Fetch) 통신

hi.anna 2026. 2. 15. 07:49

메인 화면에 있는 "글 등록" 버튼을 눌렀을 때 이동할 입력 화면을 만들고,

자바스크립트(JS)를 이용해 기존에 만들어둔 API에 데이터를 전송하는 과정을 구현합니다.

HTML form 태그의 기본 submit 기능을 쓰지 않고, 자바스크립트(JS)를 이용해 API를 호출하는 방식을 사용합니다.

이유는 우리가 만든 컨트롤러가 REST Controller(JSON 데이터를 받음)이기 때문입니다.

Step 1. 페이지 이동 컨트롤러 추가

"글 등록" 버튼을 눌렀을 때, 등록 화면(posts-save.html)을 보여주도록 컨트롤러에 메소드를 추가합니다.

  • 위치: src/main/java/com/example/board/controller/IndexController.java
// ... 기존 코드 ...

@RequiredArgsConstructor
@Controller
public class IndexController {

    private final BoardService boardService;

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("posts", boardService.findAllDesc());
        return "index";
    }

    // ▼▼▼ 여기 추가하세요 ▼▼▼
    @GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save"; // posts-save.html을 호출
    }
}

Step 2. 등록 화면 만들기 (posts-save.html)

제목, 작성자, 내용을 입력받는 폼입니다. 디자인은 부트스트랩을 사용합니다.

  • 위치: src/main/resources/templates/posts-save.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>게시글 등록</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1>📝 게시글 등록</h1>

    <div class="col-md-12">
        <div class="col-md-4">
            <form>
                <div class="form-group mb-3">
                    <label for="title">제목</label>
                    <input type="text" class="form-control" id="title" placeholder="제목을 입력하세요">
                </div>
                <div class="form-group mb-3">
                    <label for="author"> 작성자 </label>
                    <input type="text" class="form-control" id="author" placeholder="작성자를 입력하세요">
                </div>
                <div class="form-group mb-3">
                    <label for="content"> 내용 </label>
                    <textarea class="form-control" id="content" placeholder="내용을 입력하세요" style="height: 150px"></textarea>
                </div>
            </form>

            <button type="button" class="btn btn-primary" id="btn-save">등록</button>
            <a href="/" role="button" class="btn btn-secondary">취소</a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/app/index.js"></script>
</body>
</html>

Step 3. API 호출용 JS 만들기 (index.js)

이제 버튼을 눌렀을 때 실행될 로직을 작성합니다. 요즘은 jQuery 없이 Vanilla JS(순수 자바스크립트)의 fetch 함수를 많이 사용합니다. 깔끔하게 fetch로 작성해 드릴게요.

  • 경로 생성: src/main/resources/static/js/app 폴더를 만들어주세요.
  • 파일 생성: src/main/resources/static/js/app/index.js
var main = {
    init : function () {
        var _this = this;
        // btn-save라는 ID를 가진 버튼이 클릭되면 save 함수 실행
        document.getElementById('btn-save').addEventListener('click', function () {
            _this.save();
        });
    },
    save : function () {
        // 1. 화면의 입력값들을 가져옵니다.
        var data = {
            title: document.getElementById('title').value,
            author: document.getElementById('author').value,
            content: document.getElementById('content').value
        };

        // 2. Fetch API를 이용해 데이터를 보냅니다.
        fetch('/api/v1/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify(data) // 자바 객체를 JSON 문자열로 변환
        }).then(function (response) {
            if (response.ok) {
                alert('글이 등록되었습니다.');
                window.location.href = '/'; // 메인 페이지로 이동
            } else {
                alert('등록에 실패했습니다.');
            }
        }).catch(function (error) {
            alert(JSON.stringify(error));
        });
    }

};

main.init();

코드 설명

  • data 객체: HTML의 input 태그에서 값을 꺼내 자바스크립트 객체로 만듭니다.
  • JSON.stringify(data): 자바스크립트 객체를 JSON 문자열(Text)로 변환하여 서버로 보냅니다.
  • fetch('/api/v1/posts', ...): 9편에서 만든 BoardApiController의 save 메소드로 요청을 보냅니다.

✅ 테스트 및 결과 확인

  1. 서버를 재실행(Run)합니다. (정적 파일인 JS나 HTML이 추가되었으므로 재시작 필요)
  2. http://localhost:8080 접속 -> "글 등록" 버튼 클릭.
  3. 등록 화면에서 제목, 작성자, 내용을 입력하고 "등록" 버튼 클릭.
  4. alert('글이 등록되었습니다.') 창이 뜨고, 메인 화면으로 돌아오면 성공!
  5. 메인 화면 목록에 방금 쓴 글이 보입니다.

 

축하합니다! 이제 여러분은 DB - 백엔드 API - 프론트엔드 화면을 모두 연결하여 데이터가 흐르는 완전한 웹 애플리케이션을 만드셨습니다.

하지만 아직 "게시글 수정" 기능이 화면에 연결되지 않았죠?
다음 13편에서는 게시글 수정 화면(Update)을 만들고 API와 연결해보겠습니다.

반응형
저작자표시 (새창열림)

'IT > SpringBoot' 카테고리의 다른 글

[Spring Boot 입문 - 13] 화면 만들기 3 - 게시글 수정 & 삭제 (CRUD 완성)  (0) 2026.02.16
[Spring Boot 입문 - 11] 화면 만들기 1 - 타임리프(Thymeleaf) & 목록 조회  (0) 2026.02.15
[Spring Boot 입문 - 10] 게시판 작성일/수정일 자동화하기 (JPA Auditing)  (0) 2026.02.14
[Spring Boot 입문 - 9] 게시판(CRUD) 기능 만들기 - 백엔드 API 구현  (0) 2026.02.14
[Spring Boot 입문 - 8] 데이터베이스 연동? SQL 몰라도 됩니다 (feat. JPA, H2)  (0) 2026.02.13
공유하기 링크
'IT/SpringBoot' Related Articles more
Comments