jQuery Academy · 강의

데이터를 활용한 동적 콘텐츠 생성

데이터 속성을 jQuery와 결합해 대화형 구성 요소를 만들고 저장된 데이터에 따라 UI를 업데이트하며 유연한 콘텐츠 표시를 구축합니다.

데이터를 활용한 동적 콘텐츠 생성은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

데이터를 활용한 동적 콘텐츠

레슨 2에 오신 것을 환영합니다! 이전 레슨에서는 HTML5 데이터 속성을 사용하여 데이터를 저장하고 가져오는 방법을 배웠습니다.

이제 한 단계 더 나아가 보겠습니다. 이러한 속성을 jQuery와 결합하여 웹 페이지의 콘텐츠를 동적으로 생성하고 업데이트하는 방법을 살펴보겠습니다. 이를 통해 UI를 상호작용적이고 유연하게 만들 수 있습니다!

동적 콘텐츠가 필요한 이유

제품 목록, 사용자 프로필 또는 뉴스 기사가 있다고 가정해 보겠습니다. 모든 것을 하드코딩하는 대신 data-* 속성을 사용하여 기본 데이터를 정의할 수 있습니다.

업데이트: 기존 요소에 새 정보를 반영합니다.
생성: 데이터를 바탕으로 완전히 새로운 요소를 만듭니다.
제어: 데이터를 사용하여 UI 동작(예: 표시/숨기기)을 제어합니다.

이 방식을 사용하면 콘텐츠 데이터와 표현 방식을 분리할 수 있습니다.

기존 요소 업데이트하기

콘텐츠 업데이트부터 시작해 보겠습니다. data-* 속성을 가진 요소를 만들고 jQuery로 해당 데이터를 읽어 페이지의 다른 부분에 채울 수 있습니다.

선택한 항목의 세부 정보를 표시하거나 상태 메시지를 업데이트할 때 매우 유용합니다.

코드: 항목 세부 정보 업데이트

버튼을 클릭하여 한 요소의 데이터 속성이 다른 요소의 텍스트를 어떻게 업데이트하는지 확인해 보세요.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

설명: 콘텐츠 업데이트하기

이 예제에서 #productCard div에는 data-product-name과 data-product-price가 포함되어 있습니다.

버튼을 클릭하면 .data('productName')과 .data('productPrice')가 이 값을 가져옵니다.
그런 다음 .text()를 사용하여 가져온 값을 #displayedName과 #displayedPrice span에 삽입합니다.

이를 통해 한 요소에서 데이터를 읽고 다른 요소의 콘텐츠를 업데이트하는 방법을 알 수 있습니다.

새 요소 만들기

업데이트뿐만 아니라 데이터 속성을 사용하여 완전히 새로운 HTML 요소를 생성할 수도 있습니다. 목록, 갤러리 또는 동적 양식을 만들 때 특히 강력한 방법입니다.

새 요소에 사용할 템플릿과 같은 데이터나 설정을 데이터 속성에 저장한 다음, jQuery로 요소를 구성하여 DOM에 삽입할 수 있습니다.

코드: 목록에 항목 추가하기

아래 버튼을 클릭하여 버튼의 데이터 속성에서 콘텐츠를 가져온 새 목록 항목을 동적으로 추가해 보세요.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

설명: 요소 만들기

여기서 #addBtn 버튼에는 data-new-item-text와 data-new-item-value가 있습니다.

클릭하면 이 값을 가져옵니다.
$('
')가 새 목록 항목 요소를 만듭니다.
.text()가 결합된 데이터로 해당 요소를 채웁니다.
마지막으로 $('#myList').append(newItem)이 이 새
를 순서 없는 목록에 추가합니다.

이는 동적 목록이나 격자를 만드는 데 사용되는 기본적인 패턴입니다!

데이터를 활용한 상호작용형 컴포넌트

데이터 속성은 텍스트에만 사용하는 것이 아닙니다! 상호작용형 컴포넌트의 설정도 저장할 수 있습니다. 예를 들어 어떤 요소를 전환할지 또는 어떤 애니메이션을 재생할지 지정할 수 있습니다.

이렇게 하면 JavaScript 로직을 하드코딩된 ID나 클래스와 분리할 수 있어 코드의 모듈성과 재사용성이 높아집니다.

질문: 동적 콘텐츠

다음 HTML 및 jQuery 코드를 살펴보세요.

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

이 코드가 실행된 후 $('#infoBox').data('status')를 사용하여 가져오면 data-status 속성의 새 값은 무엇일까요?

복습: 데이터를 활용한 동적 콘텐츠

잘하셨습니다! 이 레슨에서는 데이터 속성을 활용하여 진정한 동적 웹 콘텐츠를 만드는 방법을 배웠습니다.

데이터 속성을 읽고 그 값을 삽입하여 기존 요소를 업데이트할 수 있습니다.
동적으로 새 HTML 요소를 생성하고 다른 요소의 데이터로 채울 수 있습니다.
이 방식을 사용하면 데이터와 표현 방식을 분리하여 UI를 더욱 유연하고 상호작용적으로 만들 수 있습니다.

이제 더욱 유연하고 매력적인 사용자 인터페이스를 만들 준비가 되었습니다!

자주 묻는 질문

“데이터를 활용한 동적 콘텐츠 생성” 강의는 무료인가요?

네 — “데이터를 활용한 동적 콘텐츠 생성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“데이터를 활용한 동적 콘텐츠 생성”에서 뭘 배우나요?

데이터 속성을 jQuery와 결합해 대화형 구성 요소를 만들고 저장된 데이터에 따라 UI를 업데이트하며 유연한 콘텐츠 표시를 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“데이터를 활용한 동적 콘텐츠 생성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

HTML5 데이터 속성 활용
데이터를 활용한 동적 콘텐츠 생성
클라이언트 측 템플릿 통합 기초

← jQuery Academy(으)로 돌아가기