[JavaScript] 공지사항 더보기 데이터 가져오기

공지사항 더보기 로직 설계

1. 이벤트 발생: 사용자가 '더보기' 버튼을 클릭합니다. 🖱️ (addEventListener)
2. 데이터 요청: 자바스크립트가 서버에 "다음 공지사항 5개만 줘!"라고 요청을 보냅니다. 📡 (fetch)
3. 데이터 수신: 서버가 보내준 데이터(주로 JSON 형식)를 받습니다. 📩
4. 화면 업데이트: 받은 데이터를 바탕으로 HTML 문자열을 만들어 기존 목록 끝에 추가합니다. ✨ (appendChild 또는 insertAdjacentHTML)

---

● 공지사항 더보기버튼을 클릭시 데이터를 가져오기

// 1. 더보기 버튼을 선택합니다.
const moreBtn = document.querySelector('#more-btn');

// 2. 버튼에 클릭 이벤트를 연결합니다.
moreBtn.addEventListener('click', function() {
  
  // 3. 서버에서 데이터를 가져옵니다. (예시 주소입니다)
  fetch('https://api.example.com/notices?limit=5')
    .then(response => response.json()) // 응답을 JSON으로 변환
    .then(data => {
      // 여기에 데이터를 가져온 후 '화면에 그리는 로직'이 들어갑니다.
      console.log(data); 
    });
});

 

● 화면을 그리는 로직

const noticeList = document.querySelector('.notice-list'); // 부모 <ul> 선택


data.forEach(item => {
  // 새로운 li 태그 문자열을 만듭니다.
  let html = `<li>${item}</li>`;

  // 이제 noticeList의 안쪽 끝에 이 html을 추가하려면 어떤 속성을 쓸까요?
  // (기존 내용을 유지하면서 추가하는 방식입니다)
  noticeList.innerHTML += html;
});

 

※ 해당 내용은 Google Gmini3.0과 함께 공부한 내용입니다.