[Canvas-불꽃놀이-20] Particle 클래스 단위 테스트

이전 글 : [Canvas-불꽃놀이-19] CanvasOption 단위 테스트 [Canvas-불꽃놀이-19] CanvasOption 단위 테스트이전 글 : [Canvas-불꽃놀이-18] utils.js 단위 테스트 [Canvas-불꽃놀이-18] utils.js 단위 테스트이전 글 : [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서 [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순jinsk-joy.tistory.com Particle 클래스 단위 테스트 진행 Particle 클래스 단위 테스트Particle.js 전체 코드 확인더보기import { randomFloat, setRgbaColor } from "@/js/utils.js";import { PARTICLE } from..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 6.
• textsms

[Canvas-불꽃놀이-19] CanvasOption 단위 테스트

이전 글 : [Canvas-불꽃놀이-18] utils.js 단위 테스트 [Canvas-불꽃놀이-18] utils.js 단위 테스트이전 글 : [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서 [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서이전 글 : [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기 [Canvas-불꽃놀이-16] SparkPajinsk-joy.tistory.com CanvasOption 클래스를 테스트하여 캔버스 크기, 속성 등 검증하기 CanvasOption 환경 설정CanvasOption 클래스 전체 코드더보기import { ANIMATION, SCREEN, POS, FONT } from "@/js/constants.js";cla..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 5.
• textsms

[Canvas-불꽃놀이-18] utils.js 단위 테스트

이전 글 : [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서 [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서이전 글 : [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기 [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기이전 글 : [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트 [Canvas-불꽃놀이-15] Circjinsk-joy.tistory.com isEven을 제외한 나머지 유틸리티 메서드에 대해 단위테스트를 진행 (Jest 문서)  utils.js 단위 테스트utils.js 코드 전체 보기더보기import { PARTICLE } from "@/js/constants.js";/** * @pa..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 4.
• textsms

[Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서

이전 글 : [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기 [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기이전 글 : [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트 [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생jinsk-joy.tistory.com Jest설치와 Particle 클래스와 자식 클래스 테스트 코드 작성 이제 프로젝트의 마무리로 테스트 코드를 작성해 의도한 대로 프로젝트가 동작하는지 확인해 보도록 하겠다. 1. Jest 설치와 기본 설정다음과 같이 Jest를 설치하고 테스트..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 3.
• textsms

[Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기

이전 글 : [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트 [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 :jinsk-joy.tistory.com 불꽃놀이에 잔상 효과를 적용해 생동감 더해주기 앞서 완성한 불꽃놀이를 보면 움직임은 있으나 잔상이 없어서 정적인 느낌이 강하고 단조로워 보였다.이에 각 파티클에 붙는 잔상 효과를 추가하여 움직임이 좀 더 자연스럽고 생동감 있는 불꽃놀이를 만들어보기..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 2.
• textsms

[Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트

이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글jinsk-joy.tistory.com CircleParticle 클래스를 완성하여 화면에 렌더 해보기이전 글에 원형 불꽃 효과를 생성하였다. 이번에는 이 효과를 적용할 CircleParticle 클래스를 완성하여 실제로 화면에 렌더 해보겠다. 1. CircleParticle 클래스 구현이전의 원형 불꽃 효과의 내용을 바..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 30.
• textsms