[TIL] 24.10.07 트래블슈팅

트래블슈팅

1. 개요

서버에서 getGameAsset으로 사용중인 데이터 테이블을 클라이언트 부분에서도 사용해서 stageId 나 Item점수 등을 활용하고 싶다.

2. 트러블슈팅

2.1 배경 (아키텍처 다이어그램)

2.2 발단

서버에서는 getGameAsset으로 데이터 테이블을 사용하는 방법을 알고 있는데 클라이언트에서도 getGameAsset을 사용하면 서버와 클라이언트의 분리가 제대로 되지 않는 것 같은 생각이 들었다.

 

2.3 전개

그래서 다른 방식으로 클라이언트가 데이터테이블을 알게 할 수 없을까 찾아보았다.

 

2.4 위기

도무지 방법이 떠오르지 않아서 튜터님께 질문을 하게 되었다.

2.5 절정

클라이언트가 public 폴더의 내용을 알고 있는것은 서버를 실행할때

app.use(express.static("public"));

을 통해서 공개를 했기 때문이었다. 그렇다면 데이터 테이블이 들어있는 폴더인 assets폴더를 똑같이 정적서빙 하거나 아예public 폴더안에 assets를 포함시킨다면 정적서빙을 추가하지 않아도 되는 방법이 있었다.

그렇게 public폴더에 assets를 포함시키고 클라이언트 에서는 import 하는 방식으로 개발을 하려 했고 성공적으로 되나 싶었지만 브라우저에서 오류를 확인하게 되었다.

 

2.6 결말

.json 형식을 import할때 그냥 import 하는것은 type: module을 정의하고 나서 사용할 수 있는 기능인데, 이 기능이 브라우저에서는 또 사용이 안된다고 되어있었다. 그럼 방법은 없나? 싶었지만 실험적 기능을 사용하여 해결하였다.

import items from "./assets/item.json" with { type: 'json'};

실험적 기능이라고 소개되어있던 with type json을 통해 import하니 오류없이 잘 해결 되었다.

 

3. 마무리

이번 트러블 슈팅을 요약하면 다음과 같습니다.
(1) 서버가 알고있던 데이터테이블을 클라이언트도 동일하게 알게 하고싶다.
(2) 정적서빙이란 것을 알게 되었고 import with라는 것을 알게되었다.
(3) 다음에는 클라이언트에 직접 데이터테이블을 넣지 않는다면 어떻게 할 수 있을지 고민해봐야겠다.