'this' 키워드를 사용하여 자바스크립트 요리 레시피 검색 기능 개발 방법

18 Sep 2023

javascript

자바스크립트에서 ‘this’ 키워드는 매우 중요한 역할을 합니다. ‘this’ 키워드를 올바르게 사용하면 객체 내에서 메서드를 호출하거나 객체의 속성에 접근하는 등의 작업을 할 수 있습니다. 이번 블로그 포스트에서는 ‘this’ 키워드를 사용하여 자바스크립트에서 요리 레시피를 검색하는 기능을 개발하는 방법을 알아보겠습니다.

1. 검색 기능을 위한 HTML과 CSS 구성

먼저, 검색 기능을 위한 HTML과 CSS를 구성해야 합니다. 사용자가 레시피를 입력할 수 있는 검색 창과 검색 버튼 등의 요소를 포함해야 합니다. CSS로 스타일링하여 웹 페이지에 맞게 디자인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>요리 레시피 검색</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>요리 레시피 검색</h1>
  <div class="search-container">
    <input type="text" id="search-input" placeholder="레시피를 입력하세요">
    <button id="search-button">검색</button>
  </div>
  <div id="search-results"></div>
  
  <script src="search.js"></script>
</body>
</html>

2. 자바스크립트로 검색 기능 구현

검색 기능을 구현하기 위해 자바스크립트 파일인 ‘search.js’를 생성합니다. 이 파일에서 ‘this’ 키워드를 사용하여 검색 기능을 구현할 수 있습니다. 아래는 예시 코드입니다.

// search.js

// 요리 레시피 데이터 배열
var recipes = [
  {
    name: "스파게티",
    ingredients: ["면", "소스", "양파", "토마토"],
    instructions: "1. 면을 삶고, 소스를 넣어 섞는다. 2. 양파와 토마토를 썰어 넣는다."
  },
  {
    name: "샐러드",
    ingredients: ["상추", "토마토", "오이", "드레싱"],
    instructions: "1. 상추, 토마토, 오이를 잘게 썰어 섞는다. 2. 드레싱을 추가한다."
  },
  // 더 많은 레시피 데이터...
];

// 검색 버튼 클릭 이벤트 리스너
document.getElementById("search-button").addEventListener("click", function() {
  var searchInput = document.getElementById("search-input").value;  // 검색어 가져오기
  var searchResults = document.getElementById("search-results");  // 검색 결과 표시할 요소
  
  searchResults.innerHTML = "";  // 검색 결과 초기화
  
  // 레시피 배열을 순회하면서 검색어와 일치하는 레시피 찾기
  recipes.forEach(function(recipe) {
    if (recipe.name.toLowerCase().includes(searchInput.toLowerCase())) {
      // 검색어와 일치하는 레시피를 검색 결과에 추가하기
      var recipeElement = document.createElement("div");
      recipeElement.innerHTML = "<h3>" + recipe.name + "</h3><p>" + recipe.ingredients.join(", ") + "</p><p>" + recipe.instructions + "</p>";
      searchResults.appendChild(recipeElement);
    }
  });
});

3. 검색 결과 표시하기

위 자바스크립트 코드에서는 검색 버튼 클릭 이벤트 리스너를 등록하여 사용자가 검색 버튼을 클릭하면 검색 기능이 동작하도록 합니다. 검색어와 일치하는 레시피를 찾아 HTML 요소를 동적으로 생성하여 검색 결과로 표시합니다.

위의 예시 코드를 ‘search.js’ 파일에 저장한 후, 브라우저에서 ‘index.html’ 파일을 실행시키면 검색 기능이 작동되는 것을 확인할 수 있습니다.

이제 ‘this’ 키워드를 활용하여 자바스크립트에서 요리 레시피를 검색하는 기능을 개발하는 방법을 알아봤습니다. 이를 응용하여 여러분만의 독특한 검색 기능을 만들어보세요!