Vue.js, JSON 기반 실시간 문장 검색 앱 구축 | 웹 개발

소개

이 프로젝트에서는 문학 작품에서 아름다운 문장을 실시간으로 검색하고 표시할 수 있는 웹 애플리케이션을 구축하는 방법을 배우게 됩니다. 애플리케이션은 JSON 파일에서 데이터를 가져오고, Vue.js 를 사용하여 검색 기능을 구현하고 결과를 표시합니다.

👀 미리보기

Web app search interface preview

Real time search results display

🎯 과제

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

프로젝트를 설정하고 제공된 파일 및 디렉토리를 이해하는 방법
data.json 파일에서 데이터를 가져오기 위한 데이터 요청을 구현하는 방법
일치하는 문장을 표시하기 위한 실시간 검색 기능을 구현하는 방법
웹 페이지 스타일링을 통해 프로젝트에 마무리 작업을 추가하는 방법

🏆 성과

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

HTML, CSS 및 JavaScript 를 사용하여 웹 개발 프로젝트를 설정합니다.
Vue.js 를 사용하여 반응형 (responsive) 하고 대화형 (interactive) 웹 애플리케이션을 구축합니다.
JSON 파일에서 데이터를 가져와 웹 페이지에 표시합니다.
실시간 검색 기능을 구현하고 일치하는 키워드를 강조 표시합니다.
CSS 를 사용하여 웹 페이지의 스타일을 지정하여 전반적인 모양과 사용자 경험을 향상시킵니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

그 중:

css/style.css는 스타일 파일입니다.
index.html은 메인 페이지입니다.
data.json은 프로젝트에서 사용될 데이터입니다.
js/vue.min.js는 프로젝트에서 사용되는 vue2.x 버전 파일입니다.
js/axios.min.js는 axios 파일입니다.

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

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

데이터 요청 구현

이 단계에서는 data.json 파일에서 데이터를 가져오기 위한 데이터 요청을 완료합니다.

index.html 파일에서 <script> 섹션의 TODO 주석을 찾습니다.
data() 함수 내부에 다음 코드를 추가하여 data.json 파일에서 데이터를 가져옵니다.

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

이 코드는 초기 데이터 속성인 list와 search를 설정한 다음, mounted() 훅에서 getData() 메서드를 호출하여 data.json 파일에서 데이터를 가져옵니다.

index.html 파일을 저장하고 웹 페이지를 새로 고칩니다. 이제 data.json 파일에서 로드된 초기 데이터를 볼 수 있습니다.

실시간 검색 기능 구현

이 단계에서는 사용자의 입력에 따라 일치하는 문장을 표시하는 실시간 검색 기능을 구현합니다.

index.html 파일에서 <div class="search-form"> 섹션의 TODO 주석을 찾습니다.
<div class="search-form"> 요소 내부의 내용을 다음 코드로 바꿉니다.

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Title Sentence Author"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

이 코드는 Vue.js 지시어를 사용하여 사용자의 입력에 따라 일치하는 문장 목록을 동적으로 렌더링합니다.

다음으로, 다음 코드를 mounted() 형제에 추가합니다.

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
        ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

hightLight 계산된 속성은 일치하는 키워드를 <span class='highlight'> 태그로 감싸는 함수입니다. filterList 계산된 속성은 검색 상자에서 사용자의 입력에 따라 문장의 list를 필터링합니다.

index.html 파일을 저장하고 웹 페이지를 새로 고칩니다. 이제 실시간 검색 기능이 작동하여 일치하는 문장이 표시되고 키워드가 강조 표시되는 것을 볼 수 있습니다.

완료 후 최종 페이지 효과는 다음과 같습니다.

Image Description

요약

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

Vue.js 를 이용한 실시간 문장 검색

소개