내 포켓몬 컬렉션 앱 만들기: 로컬 데이터, 상호 작용 및 JavaScript 이벤트-JS 튜토리얼-php.cn

내 포켓몬 컬렉션 앱 만들기: 로컬 데이터, 상호 작용 및 JavaScript 이벤트

Patricia Arquette

풀어 주다： 2024-11-17 16:08:02

원래의

1043명이 탐색했습니다.

Creating My Pokémon Collection App: Local Data, Interactivity, and JavaScript Events

소개

이 프로젝트를 시작했을 때 내 목표는 간단했습니다. 사용자가 포켓몬과 포켓몬의 세부정보를 탐색할 수 있는 포켓몬 컬렉션 앱을 만드는 것이었습니다. JavaScript, Node.js 및 로컬 데이터를 결합하여 사용자가 포켓몬 이미지, 능력 및 유형을 볼 수 있는 대화형 앱을 구축하는 동시에 이벤트 리스너, 동적 콘텐츠 업데이트 등을 통해 기술을 연마했습니다. 파트너와 함께 이 작업을 진행하는 동안, 저는 구체적으로 제 작업에 집중할 예정입니다. 결합 방법은 다음과 같습니다!

프로젝트 개요

이 앱은 포켓몬 이미지와 통계 모음을 표시하도록 설계되었습니다. 이를 통해 사용자는 쉽게 각 포켓몬을 클릭하여 세부 정보를 확인하고 마우스 오버 상호 작용을 통해 기본 이미지와 대체 이미지 간에 전환할 수 있습니다. 저는 Pokémon 데이터를 로컬에서 제공했기 때문에 앱 자체 내에서 데이터를 렌더링, 업데이트 및 상호 작용하는 방법에 집중할 수 있었습니다.

db.json을 사용하여 로컬 데이터 설정

외부 API에서 가져오는 대신 이름, 유형, 능력, 이미지 경로와 같은 속성을 포함한 포켓몬 데이터로 로컬 db.json 파일을 만들었습니다. http://localhost:3500/pokemon에서 로컬 서버를 실행하면 JavaScript의 fetch 메소드를 사용하여 이 데이터를 가져올 수 있습니다. 단순화된 설정 덕분에 앱을 완전히 오프라인으로 구축하고 테스트할 수 있었습니다.

코드 연습

프로젝트의 핵심 부분에 제가 어떻게 접근했는지 살펴보겠습니다.

데이터 가져오는 중: 첫 번째 단계는 로컬 서버에서 포켓몬 데이터를 가져오는 것이었습니다. 가져오기 요청을 처리하고 포켓몬 세부 정보를 JSON 형식으로 반환하기 위해 getAllPokemon 함수를 만들었습니다.

   function getAllPokemon() {
     return fetch(pokemonURL).then(response => response.json());
   }

로그인 후 복사

이 함수는 http://localhost:3500/pokemon에서 포켓몬 데이터를 가져온 다음 각 포켓몬을 동적으로 렌더링하는 데 사용합니다.

포켓몬 표시: 컬렉션을 채우기 위해 가져온 포켓몬 데이터를 반복하고 각 항목을 이미지로 렌더링하는 displayPokemons 함수를 사용했습니다. 또한 각 이미지에 클릭 이벤트 리스너를 추가했는데, 이를 통해 선택 시 포켓몬 세부정보가 열립니다.

   const displayPokemons = () => {
     getAllPokemon().then(pokemonArr => {
       pokemonArr.forEach(renderPokemon);
       handleClick(pokemonArr[0]); // Display first Pokémon by default
     });
   }

로그인 후 복사

renderPokemon 기능은 각 포켓몬에 대한 이미지를 생성하고 스타일을 추가하며 클릭 이벤트를 첨부하여 세부 정보를 표시합니다.

이벤트 리스너: 상호작용 추가 이 프로젝트에서는 두 가지 주요 이벤트 리스너 유형을 사용했습니다. 새로운 포켓몬을 추가하기 위한 양식 제출 리스너와 이미지 간 전환을 위한 마우스오버/마우스아웃 이벤트입니다. 이러한 청취자들은 앱을 더욱 매력적이고 사용자 친화적으로 만들었습니다.

양식 제출:

새 포켓몬을 추가하기 위해 입력 필드에서 값을 수집하고 새 포켓몬을 컬렉션에 추가하는 제출 리스너를 양식에 설정했습니다. 이 새로운 포켓몬은 페이지를 새로 고칠 필요 없이 렌더링됩니다.
```
   function getAllPokemon() {
     return fetch(pokemonURL).then(response => response.json());
   }
```
로그인 후 복사
로그인 후 복사
여기서 event.preventDefault()는 양식이 페이지를 다시 로드하는 것을 중지하여 원활한 사용자 경험을 보장합니다.
대체 이미지에 대한 마우스오버 이벤트:

사용자가 세부정보 섹션에서 포켓몬 이미지 위로 마우스를 가져가면 대체 이미지로 전환되어 진화 또는 변형을 시뮬레이션합니다. 마우스오버 이벤트는 이 스위치를 트리거하고, 마우스아웃은 이를 되돌립니다.
```
   const displayPokemons = () => {
     getAllPokemon().then(pokemonArr => {
       pokemonArr.forEach(renderPokemon);
       handleClick(pokemonArr[0]); // Display first Pokémon by default
     });
   }
```
로그인 후 복사
로그인 후 복사
이 효과는 사용자에게 각 포켓몬과 상호 작용하고 그 특성을 시각적으로 탐색할 수 있는 재미있는 방법을 제공합니다.

과제 및 학습 포인트

한 가지 과제는 이벤트 리스너와 동적 요소가 빠르게 추적하기 어려워질 수 있으므로 JavaScript를 모듈식으로 유지하고 관리 가능하도록 구조화하는 것이었습니다. 코드를 더 작은 함수로 분류하고 이벤트 리스너를 선택적으로 사용하여 성능과 가독성을 최적화하는 방법을 배웠습니다.

마무리

이 포켓몬 컬렉션 프로젝트는 JavaScript를 적용하고, 로컬 데이터 가져오기를 실험하고, 매력적인 이벤트 기반 상호 작용을 추가할 수 있는 흥미로운 방법이었습니다. 처음부터 이 앱을 구축하면서 프런트엔드와 백엔드 개념 모두에 대한 귀중한 경험을 얻었고 앞으로 더 많은 대화형 프로젝트를 탐색할 영감을 얻었습니다.