참고: id="post-form", id="post-title" 등은 JavaScript에서 이 요소들을 쉽게 찾기 위한 이름표입니다.
3. 🧠 main.js 실습: Mock API로 POST 통신 구현
이제 main.js 파일을 열고, 입력된 데이터를 JSON 형식으로 만들어서 가상 서버에 전송하는 Mock API 로직을 작성해 봅시다.
main.js 파일 내용 (전체 복사)
JavaScript
// main.js 파일
// 1. 필요한 HTML 요소 가져오기
const postForm = document.getElementById('post-form');
const resultDiv = document.getElementById('post-result');
// 2. 💡 Mock API 함수 정의: POST 요청 흉내
// 실제 서버에 보낼 데이터(formData)를 인수로 받습니다.
function mockPostApi(formData) {
return new Promise((resolve, reject) => {
// 실제 통신처럼 2초 후에 결과를 반환합니다.
setTimeout(() => {
console.log("Mock API (POST) 요청 데이터:", formData);
// 💡 서버에서 성공적으로 저장했을 때 반환할 JSON 데이터 흉내
const successResponse = {
status: 201, // 201 Created (자원 생성 성공) 상태 코드 흉내
message: "게시글이 Mock 서버에 성공적으로 등록되었습니다.",
id: Math.floor(Math.random() * 1000)
};
// 💡 성공을 가정하고 JSON 응답을 전달합니다.
resolve(successResponse);
// (실패 테스트 시: 서버 에러를 가정하고 싶다면 아래 코드를 사용)
// reject(new Error("데이터 유효성 검사 실패!"));
}, 2000);
});
}
// 3. 폼 제출(Submit) 이벤트 리스너 등록
postForm.addEventListener('submit', function(event) {
event.preventDefault(); // 💡 가장 중요! 폼의 기본 제출 동작(페이지 이동)을 막습니다.
resultDiv.innerHTML = '<p style="color: blue;">데이터 전송 및 처리 중... (2초 대기)</p>';
// 4. 입력된 폼 데이터 가져오기
const title = document.getElementById('post-title').value;
const content = document.getElementById('post-content').value;
// 5. 💡 JSON 형식으로 데이터 포장
// 이 형태 그대로 백엔드 파트너의 DTO/Entity로 전달됩니다.
const postData = {
title: title,
content: content,
writer: "VSCode 개발자"
};
// 6. Mock API 호출 및 Promise 체이닝 시작
mockPostApi(postData) // JSON 데이터를 Mock API에 전달
.then(response => {
// 7. 성공 응답을 받았을 때 실행되는 로직
console.log("POST 성공 응답:", response);
resultDiv.innerHTML = `
<h3 style="color: green;">✅ 전송 및 저장 성공!</h3>
<p>메시지: ${response.message}</p>
<p>할당된 ID: ${response.id}</p>
<p>전송된 데이터: ${JSON.stringify(postData)}</p>
`;
postForm.reset(); // 폼 초기화
})
.catch(error => {
// 8. 오류가 발생했을 때 실행되는 로직
console.error("POST 통신 오류:", error);
resultDiv.innerHTML = `<h3 style="color: red;">❌ 전송 실패!</h3><p>오류: ${error.message}</p>`;
});
});
4. ✨ 결과 확인 및 다음 단계
실습 확인
VS Code에서 main.js 파일을 저장합니다.
Live Server 브라우저 화면에서 **"제목"**과 **"내용"**을 입력합니다.
"가상으로 데이터 전송" 버튼을 클릭합니다.
2초 후, "전송 및 저장 성공!" 메시지와 함께 전송한 데이터가 표시되는 것을 확인합니다.
Mock API를 실제 API로 전환하는 방법
백엔드 파트너가 Spring Boot에서 실제 POST API를 완성하면, 당신은 main.js 파일에서 mockPostApi(postData) 호출 부분 대신 아래와 같이 Fetch API 코드로 교체해 주기만 하면 됩니다. 로직의 나머지 부분은 전혀 수정할 필요가 없습니다!
JavaScript
// 💡 실제 Fetch API로 전환 (참고)
fetch('http://localhost:8080/api/save', { // 실제 서버 주소와 엔드포인트
method: 'POST',
headers: {
'Content-Type': 'application/json' // JSON 형식임을 서버에 알려줍니다.
},
body: JSON.stringify(postData) // JSON 문자열로 변환하여 전송
})
// ... 이후 .then() 및 .catch() 로직은 그대로 사용합니다.
이렇게 Mock API를 사용해 백엔드 서버 없이도 프론트엔드의 핵심 기능(데이터 전송 및 처리)을
