Drum_Machine

Drum_Machine

? 목차

• ? 목차
• Drum_Machine
  • ? 다음으로 제작됨
    • 기술 스택
    • 주요 특징
  • 라이브 데모
  • 시작하기
    • 프로젝트 구조
    • 설정
    • 설치하다
    • 용법
    • 테스트 실행
  • 저자
  • ? 미래 기능
  • ? 기여
  • ️ 당신의 지지를 보여주세요
  • 감사의 말
  • 특허

Drum_Machine

Drum Machine App은 드럼 머신을 시뮬레이션하는 대화형 애플리케이션입니다. 직관적이고 친숙한 사용자 인터페이스로 설계된 이 응용 프로그램을 사용하면 사용자는 화면 키나 컴퓨터 키보드를 통해 다양한 타악기 사운드를 연주할 수 있습니다.

? 다음으로 제작됨

기술 스택

반응-리덕스

• 이 프로젝트에서는 React를 사용합니다.

HTML

• 이 프로젝트는 HTML을 사용합니다.

CSS

• CSS는 전체 페이지에 디자인을 제공하는 데 사용됩니다.

린터

• Linter는 코드의 오류를 확인하고 해결하는 데 도움이 되는 도구입니다.
이 프로젝트에는 두 개의 린터가 포함됩니다.
• CSS
• 자바스크립트

주요 특징

• 온천
• CRA
• 스타일
• 툴킷
• 반응-리덕스
• 전개

(맨 위로)

라이브 데모

여기에서 데모를 볼 수 있습니다.

(맨 위로)

시작하기

로컬 복사본을 실행하려면 다음 단계를 따르세요. 이 프로젝트를 진행하려면 컴퓨터에 Node.js와 npm이 설치되어 있어야 합니다.

-Node.js -npm

-다음을 사용하여 이 저장소를 로컬 컴퓨터에 복제합니다.

자식 클론 https://github.com/ClaudiaRojasSoto/Drum_Machine.git

- 프로젝트 폴더로 이동합니다.

CD 수학_마술사

- 프로젝트 종속성을 설치합니다.

npm 설치

개발 서버를 시작하려면 다음 명령어를 실행하세요.

npm 시작

프로젝트 구조

프로젝트는 다음 폴더 및 파일 구조를 따릅니다.

• /src : 애플리케이션의 소스 파일이 포함되어 있습니다.
• /src/index.js : JavaScript 애플리케이션의 기본 진입점입니다.
• /src/App.js : 구성 요소가 렌더링되는 애플리케이션의 최상위 구성 요소입니다.
• /src/components : React 구성 요소의 디렉터리입니다.
• /src/components/Display.js : 디스플레이 구성 요소
• /src/components/DrumMachine.js : DrumMachine용 폴더입니다.
• /src/components/DrumPad.js : Drumpad용 폴더입니다.
• /src/redux : Redux 관리를 위한 디렉터리입니다.
• /src/redux/store.js : Redux 저장소 구성.
• /src/redux/actions : Redux 작업을 위한 폴더입니다.
• /src/redux/DrumMachineActions : DrumMachine 작업 관리용 폴더입니다.
• /src/redux/reducers : Redux 감속기를 위한 폴더입니다.
• /src/redux/reducers/DrumMachineReducer.js : DrumMachine 감속기 관리를 위한 감속기입니다.
• /public : 애플리케이션의 공용 파일과 자산을 포함합니다.
• /public/index.html : 애플리케이션의 기본 HTML 파일입니다.
• /build : 생성된 프로덕션 파일이 포함되어 있습니다.

설정

이 저장소를 원하는 폴더에 복제하세요: https://github.com/ClaudiaRojasSoto/Drum_Machine.git

설치하다

이 프로젝트를 다음과 함께 설치하세요: Stylelint 및 ESLint 설치

용법

프로젝트를 실행하려면 다음 명령을 실행하십시오. 웹 브라우저만 있으면 됩니다.

테스트 실행

테스트를 실행하려면 다음 명령을 실행하세요. npm start 테스트를 위해 이 프로젝트를 실행하려면 간단한 웹 브라우저만 있으면 됩니다.

저자

? 클라우디아 로하스

• GitHub: @githubhandle
• 링크드인: 링크드인
• 엔젤리스트: 엔젤리스트

(맨 위로)

? 미래 기능

• 사용자 키 - 로그인

(맨 위로)

? 기여

기여, 문제 및 기능 요청을 환영합니다!

이슈 페이지를 확인해 보세요.

(맨 위로)

️ 당신의 지지를 보여주세요

이 프로젝트가 마음에 든다면 이 계정을 팔로우하여 지지를 보여주세요.

(맨 위로)

감사의 말

• 협업 환경에서 Git 및 GitHub를 배울 수 있는 기회를 제공하는 Microverse입니다.

• Git 및 GitHub에 대한 풍부한 정보를 제공하는 GitHub Docs.

(맨 위로)

특허

이 프로젝트는 MIT입니다.

(맨 위로)