Vue.js 로 동적 메뉴 트리 검색 기능 만들기 | 웹 개발

소개

이 프로젝트에서는 Vue.js 를 사용하여 동적 메뉴 트리 검색 기능을 구축하는 방법을 배우게 됩니다. 이 프로젝트는 JSON 파일에서 보조 메뉴 데이터를 가져오고, 퍼지 검색 기능을 구현하며, 페이지에 필터링된 메뉴 트리를 표시하는 것을 포함합니다.

👀 미리보기

🎯 과제

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

axios 라이브러리를 사용하여 JSON 파일에서 보조 메뉴 데이터를 가져오는 방법
사용자 입력을 기반으로 메뉴 항목을 필터링하는 검색 기능을 구현하는 방법
일치하는 텍스트를 강조 표시하여 필터링된 메뉴 트리를 페이지에 표시하는 방법

🏆 성과

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

Vue.js 를 사용하여 동적이고 대화형 사용자 인터페이스를 개발할 수 있습니다.
JSON 파일에서 데이터를 가져와 비동기 데이터 가져오기를 처리할 수 있습니다.
사용자 입력을 기반으로 데이터를 필터링하는 퍼지 검색 기능을 구현할 수 있습니다.
계층적 메뉴 트리 구조를 표시하고 일치하는 텍스트를 강조 표시할 수 있습니다.

프로젝트 구조 설정

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

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

├── js
│    ├── axios.min.js ## 비동기 데이터 획득에 사용되는 Ajax 캡슐화 라이브러리
│    ├── index.js ## 페이지 기능을 구현하기 위한 로직 코드
│    └── vue.js ## Vue.js 프레임워크의 2.x 버전
├── data.json ## 2 단계 메뉴의 전체 데이터
└── index.html ## 페이지 레이아웃

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

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

현재는 정적 레이아웃만 표시되며, 2 단계 메뉴 데이터의 비동기 획득 및 표시와 퍼지 검색 기능은 구현되지 않았습니다.

✨ 솔루션 확인 및 연습

보조 메뉴 데이터 가져오기

이 단계에서는 axios 라이브러리를 사용하여 data.json 파일에서 보조 메뉴 데이터를 가져오는 방법을 배웁니다.

/js 디렉토리에서 index.js 파일을 엽니다.
created() 라이프사이클 훅에서 axios.get() 메서드를 사용하여 data.json 파일에서 데이터를 가져옵니다:

created() {
  axios.get("../data.json").then((res) => {
    this.list = res.data;
    this.resultList = res.data;
  });
},

이 코드는 data.json 파일에서 데이터를 가져와 list 및 resultList 데이터 속성에 저장합니다.

✨ 솔루션 확인 및 연습

검색 기능 구현

이 단계에서는 보조 메뉴 항목에 대한 검색 기능을 구현하는 방법을 배웁니다.

index.js 파일에서 methods 객체에 searchData() 메서드를 추가합니다:

methods: {
  searchData() {
    // TODO: 검색 기능 구현
    this.resultList = [];
    let set = new Set();
    this.list.forEach((item1) => {
      if (item1.meta.title.search(this.search) !== -1) {
        set.add(item1);
      }
      if (item1.children) {
        item1.children.forEach((item2) => {
          if (item2.meta.title.search(this.search) !== -1) {
            set.add(item1);
          }
        });
      }
    });
    this.resultList = set;
  }
}