Vue.js 검색 기능 마스터하기 - 웹 개발 필수

소개

이 프로젝트에서는 Vue 2 를 사용하여 간단한 검색 기능을 만드는 방법을 배우게 됩니다. 이 검색 기능을 통해 사용자는 콘텐츠를 검색하고 관련 결과를 표시할 수 있습니다. 이 프로젝트는 Vue.js 의 기본 사항과 웹 애플리케이션에서 검색 기능을 구현하는 방법을 이해하는 데 도움이 될 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비하는 방법
index.html 파일에 HTML 구조를 추가하는 방법
검색 기능을 처리하기 위한 JavaScript 로직을 구현하는 방법
CSS 를 사용하여 검색 입력 및 검색 결과를 스타일링하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 를 사용하여 반응형 (responsive) 하고 상호 작용적인 사용자 인터페이스를 생성할 수 있습니다.
관련 콘텐츠를 필터링하고 표시하는 검색 기능을 구현할 수 있습니다.
HTML, CSS 및 JavaScript 를 통합하여 완전한 웹 애플리케이션을 생성할 수 있습니다.
Vue.js 에서 데이터 및 계산된 속성 (computed properties) 을 사용할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

이 질문에 대한 초기 코드는 이미 제공되었습니다. 코딩 환경을 열면 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css
├── images
│   ├── bar.png
│   ├── birds.png
│   ├── cat.png
│   ├── dog.png
│   ├── fox.png
│   └── lion.png
├── index.html
└── vue.min.js

css 폴더에는 검색 입력 및 검색 결과를 스타일링하는 데 사용될 style.css 파일이 포함되어 있습니다. images 폴더에는 검색 결과에 표시될 이미지가 포함되어 있습니다. index.html 파일은 프로젝트의 메인 HTML 파일이며, vue.min.js 파일은 Vue.js 라이브러리입니다.

프로젝트의 주요 목표는 검색 기능을 구현하기 위해 필요한 HTML 구조, JavaScript 로직 및 CSS 스타일을 추가하여 index.html 파일을 완성하는 것입니다.

HTML 구조 추가

이 단계에서는 index.html 파일에 HTML 구조를 추가합니다.

index.html 파일을 열고 다음 코드를 추가합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Function</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Please search" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filteredList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      // JavaScript code will be added in the next step
    </script>
  </body>
</html>

이 HTML 구조는 검색 입력 필드와 검색 결과를 표시하는 래퍼 (wrapper) 를 포함합니다. 검색 입력 필드는 search 데이터 속성에 바인딩되고, 검색 결과는 filteredList 배열을 반복하기 위해 v-for 지시어를 사용하여 표시됩니다.

JavaScript 로직 추가

이 단계에서는 index.html 파일에 JavaScript 로직을 추가합니다.

<script> 태그 안에 다음 코드를 추가합니다:

class Post {
  constructor(title, link, img) {
    this.title = title;
    this.link = link;
    this.img = img;
  }
}

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post(
        "kitty",
        "https://unsplash.com/s/photos/cat",
        "./images/cat.png"
      ),
      new Post("puppy", "https://unsplash.com/@joeyc", "./images/dog.png"),
      new Post(
        "polar bear",
        "https://unsplash.com/@hansjurgen007",
        "./images/bar.png"
      ),
      new Post(
        "little lion",
        "https://unsplash.com/@hansjurgen007",
        "./images/lion.png"
      ),
      new Post(
        "little bird",
        "https://unsplash.com/@eugenechystiakov",
        "./images/birds.png"
      ),
      new Post(
        "fox",
        "https://unsplash.com/@introspectivedsgn",
        "./images/fox.png"
      )
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter((post) => {
        return post.title.includes(this.search);
      });
    }
  }
});

이 JavaScript 코드는 Post 클래스를 정의하고 검색 기능을 처리하기 위해 필요한 데이터와 계산된 속성을 사용하여 새로운 Vue 인스턴스를 생성합니다.

Post 클래스는 제목, 링크 및 이미지 속성을 가진 게시물 인스턴스를 생성하는 데 사용됩니다.
Vue 인스턴스 (app) 는 다음과 같은 속성으로 생성됩니다:
- el: Vue 인스턴스를 마운트할 요소를 지정합니다.
- data: 검색 입력에 대한 search 속성과 postList 항목의 배열을 포함합니다.
- computed: 검색 입력에 따라 postList를 필터링하는 filteredList 계산된 속성을 정의합니다.

CSS 스타일 수정

css/style.css는 몇 가지 초기 스타일로 제공되었습니다.

스타일을 더 사용자 정의하려면 CSS 파일을 수정하여 검색 입력 및 검색 결과의 모양을 변경할 수 있습니다.

또는 스타일을 그대로 두고 다음 단계로 진행할 수 있습니다.

프로젝트 실행

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

Vue.js 검색 기능 개발

소개