Colin's Blog
자바스크립트에서 JSON 데이터를 사용하여 동적으로 온라인 검색하는 방법

인터넷에서 데이터를 검색하고 표시하는 웹 애플리케이션을 개발할 때, JSON (JavaScript Object Notation) 데이터를 사용하는 것은 흔한 일입니다. JSON은 데이터를 구조화하고 전송하기 위해 사용되는 일반적인 형식으로, 많은 웹 서비스가 JSON을 사용하여 데이터를 전송합니다.

이 글에서는 자바스크립트를 사용하여 JSON 데이터를 가져와 온라인에서 동적으로 검색하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, JSON 데이터를 가져와야 합니다. 이를 위해서는 자바스크립트의 fetch API를 사용할 수 있습니다. 다음은 간단한 예시입니다:

fetch('http://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직 작성
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류 발생:', error);
  });

위 예시에서는 fetch 함수를 사용하여 http://example.com/data.json URL에서 데이터를 가져옵니다. response.json() 메서드는 응답을 JSON 형식으로 파싱합니다. 가져온 데이터는 두번째 then 블록에서 사용할 수 있습니다.

2. 데이터 검색 및 표시하기

JSON 데이터를 가져온 후, 원하는 데이터를 검색하여 화면에 표시할 수 있습니다. 예를 들어, 사용자가 검색어를 입력하면 해당 검색어와 매칭되는 데이터를 찾아서 표시하는 기능을 만들 수 있습니다.

const searchData = (data, query) => {
  return data.filter(item => {
    // 필요한 검색 로직 작성
    return item.name.toLowerCase().includes(query.toLowerCase());
  });
};

const displaySearchResults = (results) => {
  // 검색 결과를 화면에 표시하는 로직 작성
};

// JSON 데이터 가져오기
fetch('http://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    const searchInput = document.getElementById('search-input');
    searchInput.addEventListener('input', () => {
      const query = searchInput.value;
      const searchResults = searchData(data, query);
      displaySearchResults(searchResults);
    });
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류 발생:', error);
  });

위 예시에서는 searchData 함수를 사용하여 검색어와 매칭되는 데이터를 찾습니다. 검색어와 데이터의 문자열을 비교할 때 대소문자를 구분하지 않도록 소문자로 변환합니다.

displaySearchResults 함수는 검색 결과를 화면에 표시하는 로직을 담고 있습니다. 이 함수를 사용하면 검색 결과를 동적으로 업데이트할 수 있습니다.

마지막으로, searchInput 요소에 입력값이 변경될 때마다 검색을 수행하고 결과를 표시하는 이벤트 리스너를 추가합니다.

3. 추가적인 개선

검색 기능 외에도 페이징, 정렬, 필터링 등의 기능을 구현할 수 있습니다. 이를 위해 자바스크립트의 기능을 활용하여 JSON 데이터를 동적으로 처리할 수 있습니다. 또한, UI를 개선하여 사용자 경험을 향상시킬 수도 있습니다.

const searchData = (data, query, page, pageSize) => {
  // 필요한 검색 로직 작성
};

const displaySearchResults = (results, page, pageSize) => {
  // 검색 결과를 화면에 표시하는 로직 작성
};

// JSON 데이터 가져오기
fetch('http://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    const searchInput = document.getElementById('search-input');
    const currentPage = 1;
    const pageSize = 10;

    const performSearch = () => {
      const query = searchInput.value;
      const searchResults = searchData(data, query, currentPage, pageSize);
      displaySearchResults(searchResults, currentPage, pageSize);
    };

    searchInput.addEventListener('input', performSearch);

    performSearch();
  })
  .catch(error => {
    console.error('데이터를 가져오는 중 오류 발생:', error);
  });

위 예시에서는 검색어 외에도 현재 페이지와 페이지 크기를 추가로 전달하여 검색 결과를 제어합니다. performSearch 함수는 검색어와 페이지 정보를 통해 검색을 수행하고 결과를 표시합니다. 초기 로딩 시에도 검색을 수행할 수 있도록 performSearch 함수를 호출합니다.

결론

이제 자바스크립트에서 JSON 데이터를 사용하여 온라인에서 동적으로 검색하는 방법을 알아봤습니다. JSON 데이터를 가져오고, 데이터를 검색하고, 결과를 화면에 표시하는 기능을 구현하기 위해 자바스크립트의 다양한 기능을 활용할 수 있습니다. 이를 통해 사용자에게 더 나은 검색 경험을 제공할 수 있습니다.

© 2018 Colin. All rights reserved.