HTML문서에서 데이터를 받아오는 방법은 크게 두 가지로 나뉜다. 서버 사이드 렌더링과 클라이언트 사이드에서의 동적 데이터 로딩이다.
1. 서버 사이드 렌더링 (SSR)
서버 사이드 렌더링에서는 서버에서 HTML 문서를 생성할 때 데이터를 함께 처리하여 최종적인 HTML 문서를 클라이언트 (브라우저)에 보냅니다. Thymeleaf, Jinja, ERB, ASP.NET Razor 등 다양한 서버 사이드 템플릿 엔진이 이 역할을 한다.
1.1. 예시: Thymeleaf를 사용한 데이터 렌더링
<html />
<!-- 서버 사이드에서 Thymeleaf를 사용하여 변수 값(예: ${userName})을 HTML에 삽입 -->
<p>Hello, <span th:text="${userName}">User Name</span>!</p>
서버에서 userName 션수의 값을 처리하여 최종 HTML 문서에 포함시킨다. 클라이언트는 이미 데이터가 삽입된 완성된 HTML을 받게 된다.
2. 클라이언트 사이드에서의 동적 데이터 로딩
클라이언트 사이드에서는 JavaScript를 사용하여 서버로부터 데이터를 동적으로 요청하고 받아온 후, 이를 웹 페이지에 동적으로 표시할 수 있다. AJAX, Fetch API, Axios 등을 통해 이를 구현할 수 있다.
2.1. 예시:FetchAPI를 사용한 데이터 로딩
<html />fetch('/some-data-endpoint') .then(response => response.json()) // 데이터를 JSON 형태로 파싱 .then(data => { document.getElementById('someElement').textContent = data.userName; });
Fetch API를 사용하여 서버의 '/some-data-endpoint'로부터 데이터를 비동기적으로 요청하고, 응답으로 받은 데이터(data.userName)를 특정 HTML 요소에 표시한다.
3. 데이터 속성 (data-* Attributes)
HTML5는 data-* 속성을 사용하여 HTML 요소에 추가 정보를 저장할 수 있는 방법을 제공한다. 서버 사이드 렌더링과 클라이언트 사이드 스크립트 모두 이 데이터를 사용할 수 있다.
3.1. 예시: data-* 속성 사용
<html />
<!-- 서버 사이드에서 데이터 주입 -->
<div id="userProfile" data-user-id="12345" data-user-name="Jane Doe"></div>
<script>
// 클라이언트 사이드에서 데이터 사용
const userProfile = document.getElementById('userProfile');
const userId = userProfile.getAttribute('data-user-id');
const userName = userProfile.getAttribute('data-user-name');
console.log(userId, userName);
</script>
이렇게 하면 서버 사이드에서 처리한 데이터를 HTML 요소에 직접 주입할 수 있으며, 클라이언트 사이드 JavaScript에서 해당 데이터를 읽어 추가적인 처리를 할 수 있다.
'Front End > HTML + CSS + JavaScript' 카테고리의 다른 글
| Javascript 이벤트 버블링(eventBubbling) 해결 방법과 다양한 이벤트 처리 정리 (3) | 2024.07.22 |
|---|---|
| HTML 블로그 안에서 페이지 이동하기, id, label값 주기 , 블로그 순간이동 (0) | 2023.07.01 |
| HTML submit, butten tag 버튼, , reset 버튼 (0) | 2023.06.30 |
| HTML input type 라디오 버튼 체크박스, radio check box (1) | 2023.06.16 |
| HTML drop down 드랍다운 선택 select 태그 (0) | 2023.06.16 |
