Vite로 빌드한 Vanilla JavaScript 프로젝트 Github Pages 배포

Vite로 빌드한 바닐라 자바스크립트 프로젝트를 Github Pages를 통해 배포할 수 있다.간단한 프로젝트를 배포하고 싶을 때 Github Pages를 이용하면 편리하게 웹상에 나가 만든 사이트를 올릴 수 있다.코드 수정 시 변경된 내용을 반영하기 위해 다시 빌드하고 배포하는 과정은 번거로울 수 있다.Github Actions를 통해 origin에 푸시하면 자동적으로 수정 내용이 반영되도록 한다. 1.  Github Pages 세팅배포하려는 repository의 Settings -> Pages -> Build and deployment의 source를 Github Actions로 변경한다.  2. Vite 설정 추가Github Pages를 통해 https://.github.io/의 형태로 배포하고 싶..

• format_list_bulleted 기타 개발
• · 2024. 12. 22.
• textsms

[Canvas-불꽃놀이-33] index.js 통합 테스트

이전 글 : [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션) [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트) [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트)이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파jinsk-joy.tistory.com 화면 전환 및 애니메이션 제어를 위한 index.js의 통합 테스트 index.js 통합 테스트마지막으로 index.js의 통합 테스트를 진행하여 모든 테스트를 마무리하려 한다.index.js 파일은 전체 프로젝트 초기화, 이벤트 리스너, DOM..

• format_list_bulleted 불꽃놀이 프로젝트
• · 2024. 12. 21.
• textsms

[Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)

이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트) [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트)이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성) [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성)이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스jinsk-joy.tistory.com  애니메이션과 렌더 테스트 Canvas 애니메이션과 렌더 테스트이제 마지막 관문인 애니메이션과 렌더에 대한 테스트를 진행하겠다.애니메이션 테스트를 진행할 때 requestAnimationFrame에 관련된 테스트를 하느라 여러 오류가 있었다. 종..

• format_list_bulleted 불꽃놀이 프로젝트
• · 2024. 12. 19.
• textsms

[Canvas-불꽃놀이-31] Canvas 클래스 단위 테스트 (파티클 업데이트)

이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성) [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성)이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성) [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성)이전 글 : [Canvas-불꽃놀이-28] Canvas 클래스 단위 테jinsk-joy.tistory.com Tail, Text, Circle, Spark 파티클 업데이트 테스트 파티클 업데이트 테스트파티클 생성에 대한 테스트를 진행했으니 이제 업데이트에 대한 테스트를 진행하도록 한다.각 파티클 타입의 업데이트가 의도한 대로 이루어지는지 검증한다..

• format_list_bulleted 불꽃놀이 프로젝트
• · 2024. 12. 19.
• textsms

[Canvas-불꽃놀이-30] Canvas 클래스 단위 테스트 (파티클 생성)

이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성) [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성)이전 글 : [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화) [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화)이전 글 : [Canvas-불꽃놀이-27] CanvasOption 클래스 단위 테스트 [Canvas-불꽃놀이jinsk-joy.tistory.com  Tail, Text, Circle, Spark의 생성 테스트Tail, Text, Circle, Spark 파티클 생성 테스트Canvas 클래스에서 애니메이션을 진행할 파티클들의 생성이 잘 이루어지는지 검증하도록 한다.  Ca..

• format_list_bulleted 불꽃놀이 프로젝트
• · 2024. 12. 19.
• textsms

[Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성)

이전 글 : [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화) [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화)이전 글 : [Canvas-불꽃놀이-27] CanvasOption 클래스 단위 테스트 [Canvas-불꽃놀이-27] CanvasOption 클래스 단위 테스트이전 글 : [Canvas-불꽃놀이-26] TextData 클래스 단위 테스트 [Canvas-불꽃놀이-26] TextDatajinsk-joy.tistory.com Canvas 클래스 텍스트 파티클을 그리기 위한 TextData 생성 단위 테스트 TextData 생성 테스트텍스트 픽셀 데이터는 캔버스에 그린 텍스트의 이미지 데이터를 가져와 텍스트가 그려진 부분만 추출한다.텍스트 파티클을 그리기 위..

• format_list_bulleted 불꽃놀이 프로젝트
• · 2024. 12. 17.
• textsms