팀원들과 간단한 자기소개 웹 페이지를 만들기로 했습니다. 이전에는 배포 서버를 활용하여 통신을 하였지만 서버 없이 해결해야 하는 문제 상황이 발생하였습니다.
1. 문제 발생
배포 서버 없이 DB의 데이터를 리소스에 있는 프론트엔드로 전달하는 방법을 전혀 알지 못했습니다. 기존에는 배포 서버를 통해 프런트엔드와 통신했기에, 서버가 없는 상황에서 데이터를 어떻게 주고받아야 할지 난관에 부딪혔습니다.
2. 해결책 탐색
- JSON 통신 시도: 이전에 해왔던것 처럼, JSON을 통해 데이터를 주고받는 방법을 먼저 시도했습니다. 포스트맨을 사용해 원하는 결과가 나오는 걸 확인했지만, 결과적으로 실패했습니다. 분명히 해결 방법이 있을 거라 생각하고 다른 접근을 고민하게 되었습니다.
- 타임리프와 @Controller 사용: 이전에 했던 프로젝트에서 타임리프와 @Controller를 사용했던 경험이 떠올랐습니다. 이 방법을 활용하면 어떨까 하는 생각이 들었습니다.
3. 타임리프란?
타임리프는 자바 기반의 템플릿 엔진으로, 서버에서 HTML 파일을 동적으로 생성하는 데 사용됩니다. 이를 활용하면 서버 측에서 데이터를 쉽게 렌더링 할 수 있습니다.
<html lang="en" class="h-100" xmlns:th="http://www.thymeleaf.org"> <= 맨 위4. 뷰 리졸버의 역할
컨트롤러는 특정 뷰를 식별하기 위해 문자열 형태의 뷰 이름을 반환합니다. 뷰 리졸버(View Resolver)는 이 이름을 실제 뷰 템플릿 파일로 매핑하는 역할을 합니다. 예를 들어, 컨트롤러가 "guestBook-save"이라는 뷰 이름을 반환하면, 뷰 리졸버는 이를 "guestBook-save.html"과 같은 실제 파일로 변환해 사용자에게 보여줍니다. @Controller 어노테이션을 사용해야 합니다.
@GetMapping("/create/guestBook")
public String createQuestBook() {
return "/guestBook/guestBook-save";
}
5. 또 다른 난관 봉착 자바스크립트
API의 결과 값을 가져오고 화면에 출력하는 역할을 하는 자바스크립트를 이해하는 데에도 어려움이 있었습니다. 자바스크립트에 대한 경험이 부족했기 때문에, GPT와 구글링을 통해 필요한 정보를 빠르게 습득하고 응용하여 문제를 해결할 수 있었습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('/guestBook/guestBooks')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const guestBooksContainer = document.getElementById('guestBooks');
data.forEach(guestBook => {
const cardHTML = `
<div class="col-md-4 mb-3">
<div class="card h-100">
<img src="/images/image01.jpg" class="card-img-top" alt="Image">
<div class="card-body">
<h5 class="card-title">${guestBook.name}</h5>
<p class="card-text">${guestBook.content}</p>
</div>
</div>
</div>
`;
guestBooksContainer.insertAdjacentHTML('beforeend', cardHTML);
});
})
.catch(error => {
console.error('Error fetching guest books:', error);
alert('Failed to load guest books.');
});
});
</script>
6. 결론
앞으로 배포 서버 없이 개발해야 되는 경우가 있을지 모르겠지만, 이번 경험을 통해 배포 서버 없이 프론트엔드와 백엔드 간의 통신을 구현하는 방법을 배울 수 있었습니다. 또한, 타임리프와 @Controller의 활용 방법과 자바스크립트를 이용한 데이터 처리 방법에 대해서도 이해하게 되었습니다.
'WEB' 카테고리의 다른 글
| RDB와 NoSQL의 차이점 (3) | 2024.09.01 |
|---|---|
| 영속성 컨텍스트란? (1) | 2024.08.31 |
| Java Thread란 무엇일까? (1) | 2024.08.30 |
| SubModule이란? (0) | 2024.08.28 |
| HTML이 웹 브라우저에서 어떻게 작동할까? (1) | 2024.08.26 |
| 전략 패턴을 사용해 로그인 추상화 하기 (0) | 2024.08.08 |
| @NoArgsConstructor 액세스 레벨을 PROTECTED로 하는 이유 (1) | 2024.06.09 |
| Redis 내부동작 파헤치기 (0) | 2024.05.05 |
