[강래준][08/11]

### 오늘은 어떻게 프로젝트에 기여했나요?

- 게임 페이지에 스크립트 태그를 불러오는 방법을 바꿨다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

Next.js에서 제공하는 `` 태그를 사용하여 게임 로직이 담겨 있는 자바스크립트 코드를 다음과 같이 불러올 경우 예기치 못한 에러가 발생했다.

```js
<Script src="/api/css" />
```

게임이 작동하는 페이지에서 뒤로가기를 눌렀다가 다시 원래 페이지로 돌아오면 게임이 실행되지 않았다.
자바스크립트 코드를 다음과 같이 불러오기도 했었다.

```js
export default function Linux({ game }) {
return (
<Layout>
// 중간 생략
<Script>{game}

);
};

export async function getServerSideProps(context) {
const game = fs.readFileSync('games/linux/main.js', { encoding: 'utf8' });
return {
props: { game }
};
}
```

코드를 서버 사이드 렌더링 방식으로 불러올 경우 게임 페이지로 접속하면 스크립트 태그가 하나가 아닌 여러개가 생성되고 다른 페이지로 이동해도 script 태그가 사라지지 않는 등 버그가 발생했다.
이 문제는 다음과 같이 스크립트 태그를 사용하는 방식을 변경함으로써 해결했다.

```js
useEffect(() => {
const script = document.createElement('script');
script.src = '/api/linux';
document.body.append(script);
return () => {
document.body.removeChild(script);
};
}, []);
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] CSS 게임 업데이트