20-24일 차: 드럼 머신

프로젝트

이름에서 알 수 있듯이 트리거될 때 소리를 재생하는 드럼 패드가 있는 사이트를 만들 예정입니다 🥁. 이 사이트는 React와 SASS로 만들어졌습니다. 나는 이것을 완료하는 데 3일이 걸릴 것이라고 생각했지만 상황이 이것을 4일로 밀었습니다. 인생은 항상 방해가 되니 더 준비해야 해요 💪

내가 배운 것

React에서 구성 요소를 동적으로 렌더링하는 방법

Array.map()와 같은 배열과 메서드를 사용할 수 있습니다.

render() {
    const soundArr = ["blip", "clan", "clap", "cymbal", "kclick", "piano1", "piano2", "snaps", "whoop"];
    const keyArr = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];

    return (
        <div id="drum-machine">
            <p id="drum-title">Drum Machine</p>
            <Display />
            {soundArr.map((soundClip, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
        </div>
    );
}

onkeydown 문서의 이벤트

HTML 문서에서 키 누름을 감지하기 위해 onkeydown 이벤트를 사용할 수 있습니다.

document.onkeydown = (e) => {
    let pressedSound = document.getElementById(e.key.toUpperCase());
    if(pressedSound) {
        pressedSound.play();
        document.getElementById("display").innerText = pressedSound.parentElement.id;
}

이전에는 onkeypress 이벤트가 있었지만 지금은 사용되지 않습니다.

배경 이미지 위에 그라데이션 오버레이 추가

이를 위해 background-image CSS 속성을 사용할 수 있습니다.

background-image: linear-gradient(180deg, rgba(0,255,233,0.0) 0%, rgba(0,0,0,1) 100%), 
    url('https://t4.ftcdn.net/jpg/03/58/36/11/360_F_358361101_z9baaIEmkyst0OQ8mov82r9hen7glZGb.jpg');

후기

라마단이 거의 끝나가고 있습니다. 즉, Eid 준비가 다가오고 있다는 뜻입니다. 매우 바쁜 한 주가 될 것입니다. 이드 축제 기간 내내 이 일을 계속할 수 있기를 바랍니다.

어쨌든 전 세계 무슬림에게 행복한 Eid! ✨

Github에서 저를 팔로우하세요!
또한 !