프로젝트 의 JavaScript 스킬 트리

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

초급

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

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

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

👀 미리보기

Web app search interface preview
Real time search results display

🎯 과제

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

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

🏆 성과

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

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

강사

labby
Labby
Labby is the LabEx teacher.