feat: 키보드 동작 트리거를 위한 custom event #6
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@BonhaengLee 이해 안되는 부분 있으면 말씀주세요~ |
behoney
force-pushed
the
feat/custom-event
branch
from
8a9d376 to
38c90ac
Compare
Deploying with
|
| Latest commit: |
38c90ac
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://73afd461.febase4-3d-team1.pages.dev |
| Branch Preview URL: | https://feat-custom-event.febase4-3d-team1.pages.dev |
ImHyeLim1209
approved these changes
Feb 23, 2023
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
overview
document에 dispatch 할 수 있는 custom event를 선언하고,
해당 custom event에 대한 핸들러를 구현했습니다.
이해를 돕기 위해서 데모 용도의 코드를 추가했습니다.
키보드 입력에 대응하는 키가 눌리도록 ("a" 키 누르면 "A"에 해당하는 키보드 매쉬가 움직이면서 소리나도록) 작업해두었습니다.
index.tsx에addEventListener참고해주세요.2023-02-21.11.24.34.mov
사이트에 접속해서 키보드 a 와 s 눌러보시길 바랍니다.
detail
custom event를 대해 선언해주려고 298ac74 에서
document에ThreeEventType과ThreeCustomEvent를 선언했습니다. (좋은 이름 추천해줘도 좋겠습니다.ThreeEvent이름은 이미@react-three/fiber에게 선점당했어요.위의 커스텀 이벤트 선언을 통해
document.addEventListener('threekeyboardevent', keyboardEventHander)처럼 이벤트핸들러 바인딩이 가능합니다.298ac74 의 src/components/Keyboard/Key/index.tsx 를 봐주세요.
커스텀 이벤트 생성을 돕고자 helper function 추가했습니다. 38c90ac 에서 추가한
genCustomKeyEventFromCharacter이름의 함수를 확인해주세요.38c90ac 에서 데모 용도의 document의 keydown 이벤트 리스너를 등록했습니다. 키보드 움직임+소리 재생 기능을 원할 땐 해당 방식으로 호출하면 됩니다.