Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[♻️ Refactor] 객관적인 퍼포먼스 비교를 위해 메타볼 애니메이션 OOP로 재설계한다. #37

Merged
merged 15 commits into from
Mar 28, 2023
Merged

[♻️ Refactor] 객관적인 퍼포먼스 비교를 위해 메타볼 애니메이션 OOP로 재설계한다. #37

merged 15 commits into from
Mar 28, 2023

Conversation

JengYoung
Copy link
Owner

@JengYoung JengYoung commented Mar 22, 2023 •
edited

📄 설명

디자인 패턴들을 접목하여 확장성 있는 설계로 리팩토링을 완료했습니다.
또한, 퍼포먼스를 객관적으로 비교한 결과, 스크립트 실행 퍼포먼스의 경우 약 50~60배의 차이를 확인할 수 있었습니다. (전체 메모리 사용량의 경우 16배)

아래의 8~9번 포스트를 확인하시면 더욱 정확한 퍼포먼스 결과를 찾을 수 있습니다.

🔗 관련 이슈

closes #36

👀 논의해 볼 사항

❓ PR을 하면서 공유되어야 할 특이한 사항들이 있었을까요? 공유해봅시다!
예시 1) A라는 내용인 줄 알았는데, 해결 과정에서 B인 것으로 확인하여 이를 추가적으로 수정했어요!
예시 2) A의 방식으로 구현하려 했으나, 리소스 비용을 고려하여 B의 방식으로 해결했어요! 어떤 게 더 나은 것 같아요? 😮

🔑 참고할 만한 소스

예시) 이 문제를 해결하면서 이러한 링크들을 참고했는데, 참고하시길 바랍니다! <링크>

@JengYoung
✨ create Metaballs
522fdc4
@JengYoung
🚨 fixed lint for better dx
062593f 
- 클래스 문법에 있어서 과하다 싶은 룰들을 제거했다.
- 또한, no-shadow와 unused-vars는 타입스크립트 lint에서 걸러주는 방식으로 해결했다.
@JengYoung JengYoung self-assigned this Mar 22, 2023
@JengYoung JengYoung linked an issue Mar 22, 2023 that may be closed by this pull request
[♻️ Refactor] 객관적인 퍼포먼스 비교를 위해 메타볼 애니메이션 OOP로 재설계한다. #36
Closed
9 tasks
@JengYoung
✨ create canvas, facade
918a5ad 
- 일단 메타볼 애니메이션을 관장하는 데 있어, 해당 클래스가 아닌 다른 외부의 관련된 어떤 것을 바꿀 수도 있다.- 이를 퍼사드 패턴을 이용하여 좀 더 캔버스의 손상 없이 자유롭게 추가할 수 있도록 하였다.
- 캔버스의 경우 Canvas 엘리먼트도 있겠지만, 해당 바깥 배경이 Gradient인 Canvas도 존재한다.
- 이러한 케이스에 따라 좀 더 입맛에 맞게 핸들링할 수 있도록 options를 추가했다.
@JengYoung JengYoung force-pushed the refactor-36/metaball-refactor branch from 7be09de to 918a5ad Compare March 23, 2023 01:11
@JengYoung
✨ create metaballs with factory
b24089b
@JengYoung
✨ create Subject/Observer absract class
1b64f21
@JengYoung
✨ create Animation subject, observers
1ba731a 
- 옵저버 패턴을 적용하여 상태 변경에 대한 업데이트 로직에 대해 각 객체들을 느슨하게 결합하였습니다.
@JengYoung
♻️ refactor codes for initializing metaballs
c699507 
- 생성 과정에 있어서 누락된 property initializaion을 추가했다. (ex: Obserer - key)
- 헷갈리지 않도록 현재 로직에서 불필요한 코드(ex: moveStrategy)들을 제거했다.
@JengYoung JengYoung force-pushed the refactor-36/metaball-refactor branch from 7cca503 to 7e32db6 Compare March 24, 2023 11:26
@JengYoung
✨ animate MetaballCanvas by App facade
c7eaa42 
- 초기화할 시점에서 canvas 역시 모델과 독립할 필요가 있다고 생각했다. 고로 분리했다.
- 이후 App에서 초기에 initialize를 수행한다.
@JengYoung JengYoung force-pushed the refactor-36/metaball-refactor branch from 7e32db6 to c7eaa42 Compare March 24, 2023 11:44
@JengYoung JengYoung force-pushed the refactor-36/metaball-refactor branch 2 times, most recently from ba274e6 to 44eab9e Compare March 28, 2023 06:33
@JengYoung
✨ optimize metaball fusion
92b15f9 
- 전체 픽셀이 아닌 두 원만 비교함으로써 최적화를 달성했다.
- 스크립트에 대한 계산 비용을 약 50배 최적화시켰다.
@JengYoung JengYoung force-pushed the refactor-36/metaball-refactor branch from 44eab9e to 92b15f9 Compare March 28, 2023 06:35
@JengYoung JengYoung added the ♻️ refactor 코드를 리팩토링합니다! label Mar 28, 2023
@JengYoung JengYoung merged commit 8bda948 into main Mar 28, 2023
1 check passed
@JengYoung JengYoung deleted the refactor-36/metaball-refactor branch March 28, 2023 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@JengYoung JengYoung

Labels
♻️ refactor 코드를 리팩토링합니다!
Projects
javascript-utils 😉
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[♻️ Refactor] 객관적인 퍼포먼스 비교를 위해 메타볼 애니메이션 OOP로 재설계한다.
1 participant
@JengYoung