update post

Author: lazy-dinosaur

content/posts/프로젝트/괴담집/괴담집 프로젝트에서 Howler.js 사용하기.md

@@ -4,7 +4,7 @@ tags:
   - goedamjip
   - howler
 createdAt: 2025-07-08 08:36:34
-modifiedAt: 2025-07-09 13:15:36
+modifiedAt: 2025-07-10 15:17:51
 publish: 프로젝트/괴담집
 related:
   - "[[괴담집]]"
@@ -13,6 +13,8 @@ series: ""
 
 # 괴담집 프로젝트에서 Howler.js 사용하기
 
+![howler landing](_assets/attachments/괴담집/howlerjs-landing.png)
+
 Howler는 웹에서의 오디오 제어를 위한 라이브러리로 좋은 성능에 다양한 기능을 지원한다.
 특히 괴담집 프로젝트에 필요한 `fade`효과나 `loop`효과 그리고 여러 소리에 대한 개별 제어등 딱 알맞는 라이브러리라고 생각된다.
 
@@ -158,14 +160,10 @@ function GoodExample() {
 2. 사운드의 캐싱 문제
 3. 중복 로딩 문제
 
-보편적인 리엑트의 훅 혹은 context를 사용하게 되면 위와 같은 문제가 발생할 수 있다.
-
-훅을 통해 관리하면 여러 인스턴스가 겹치거나 인스턴스에 대한 제어권을 놓치게 되는 상황이 발생할 수 있고 context의 경우엔 해당 context를 벗어나면 이미 다운로드해서 캐싱됬던 메모리를 잃게 되거나 각각의 컴포넌트가 별개의 캐시를 갖게 될수도 있다.
+리엑트의 생명주기와의 충돌때문에 보편적으로 위와 같은 문제가 발생할 수 있다. howler 인스턴스에 대한 제어권을 잃어버릴수 있고 메모리 누수로 이어질 수 있으며 이미 캐싱이 되어있는데 다시 시도할수도 있고 여러가지 문제가 발생할 수 있다.
 
 따라서 `Class`형식을 통해 싱글톤 패턴을 구현하여 추상화하고 추상화된 모듈을 훅을 통하여 접근할 수 있도록 하는게 좋을것이라고 판단된다.
 
-`Class`를 통해 로직을
-
 ### AudioManager 만들기
 
 ```typescript

public/meta-data.json

@@ -634,7 +634,7 @@
                             "tags": ["project", "goedamjip", "howler"],
                             "series": "",
                             "createdAt": "2025-07-08 08:36:34",
-                            "modifiedAt": "2025-07-09 13:15:36",
+                            "modifiedAt": "2025-07-10 15:17:51",
                             "publish": "프로젝트/괴담집"
                         },
   {