프로젝트 의 React 스킬 트리

React 드래그 앤 드롭 퍼즐 게임 만들기

초급

이 프로젝트에서는 React 를 사용하여 드래그 앤 드롭 퍼즐 게임을 만들 것입니다. 이 프로젝트는 React 컴포넌트, 상태 관리, 사용자 상호 작용 처리에 대해 배우는 초보자에게 훌륭한 프로젝트입니다.

javascriptweb-development

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

소개

이 프로젝트에서는 React 를 사용하여 드래그 앤 드롭 퍼즐 게임을 만들 것입니다. 이 프로젝트는 React 컴포넌트, 상태 관리, 사용자 상호 작용 처리에 대해 배우는 초보자에게 훌륭한 프로젝트입니다. 이 프로젝트가 끝나면 기능적인 퍼즐 게임을 갖게 될 것입니다.

👀 미리보기

Puzzle game preview animation

🎯 과제

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

  • 새로운 React 애플리케이션 설정 방법
  • 메인 퍼즐 게임 컴포넌트 생성 방법
  • 상태 관리 및 퍼즐 이미지 설정 방법
  • 화면에 퍼즐 조각 표시 방법
  • 드래그 앤 드롭 기능 구현 방법
  • PuzzleGame 컴포넌트를 메인 애플리케이션 파일에 통합하는 방법
  • 퍼즐 스타일링을 위한 CSS 추가 방법

🏆 성과

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

  • React 애플리케이션을 설정하고 컴포넌트를 생성할 수 있습니다.
  • 상태를 관리하고 사용자 상호 작용을 처리할 수 있습니다.
  • 드래그 앤 드롭 기능을 구현할 수 있습니다.
  • 퍼즐을 시각적으로 매력적으로 만들기 위해 스타일링을 통합할 수 있습니다.

강사

labby
Labby
Labby is the LabEx teacher.