yunkogong

한 줄 요약AI 코딩 도구인 Claude Code와 함께 한 달 동안 브라우저 게임 DRIFTORE를 만들었습니다. 첫 포털(CrazyGames)에서는 반려됐고, 품질을 고쳐 itch.io에 먼저 출시했습니다. 들어간 돈은 0원입니다. 👉 플레이하기: https://yun7420.itch.io/driftore왜 시작했나목표는 단순했습니다. 실제로 돈을 버는 게임을 하나 만들어 보자. 다만 조건을 하나 걸었습니다. 제 돈은 쓰지 않는다는 것입니다. 유료 에셋, 광고비, 도메인 비용 없이 무료로 할 수 있는 것만으로 끝까지 가 보기로 했습니다.코드는 Claude Code가 작성했고, 저는 방향을 정하고, 직접 플레이해 보고, 마음에 안 드는 부분을 말로 짚는 역할을 했습니다.어떤 게임인가화면 가운데 채굴 ..

지난번에는 재렌더와 실제 DOM 변경을 나눠서 정리했다. 컴포넌트가 다시 실행됐다고 화면까지 전부 바뀌는 건 아니고, 실제로 무엇을 바꿀지는 비교 과정에서 결정된다는 얘기였다.그러다 질문이 하나 생겼다. 리스트 순서가 바뀌면 React는 이전 항목과 지금 항목을 어떻게 연결할까. 사과가 첫 번째에서 두 번째로 밀렸을 때, 여전히 같은 사과라는 건 뭘 보고 아는 걸까.여기서 key가 나왔다. 리스트를 만들 때 늘 붙이던 값이다. 고유한 id를 쓰라는 것도 알고 있었다. 그런데 "왜 index는 안 돼?"라고 물으면 "성능에 안 좋으니까" 정도밖에 안 나올 것 같았다. 이번에는 그 안쪽을 정리해봤다.첫 번째 오해: key는 경고를 없애는 값인 줄 알았다리스트를 map으로 렌더링하면 key를 붙이라는 경고가 ..

2026년 9월 17일. 지난번 Virtual DOM을 정리하면서 "필터 하나 건드렸을 때 옆에 있는 테이블까지 다시 렌더되는 건 어떻게 막을까"라는 질문을 남겨뒀었다. 오늘 그걸 파봤다.이번엔 순서가 반대였다. 지난번엔 설명을 못 해서 팠는데, 이번엔 이미 코드로는 쓰고 있었다. Jotai를 써서 상태를 store에 빼놓고 있었으니까. 그런데 "왜 store에 빼?"라고 물으면 "그래야 깔끔하니까" 정도밖에 안 나올 것 같았다. 성능 얘기가 여기 붙는다는 건 어렴풋이 알았는데, 어디서 어떻게 붙는지를 몰랐다. 오늘 이해한 걸 까먹기 전에 남겨둔다.반짝이는 불이 사실 두 종류였다시작부터 걸린 게 있다. 지난 글에서 DevTools의 Highlight updates를 켜고 "일부만 반짝인다"는 걸 눈으로 ..

2026년 9월 8일. 지난번 SPA를 정리하면서 "페이지를 새로 안 받는데 그럼 화면은 대체 어떻게 바뀌는 걸까"라는 질문을 남겨뒀었다. 오늘 그걸 파봤다.시작은 또 비슷했다. "React는 Virtual DOM을 써서 빠르다"는 말을 나도 수없이 했는데, 막상 "왜 빠른데?"라고 물으면 또 말문이 막힐 것 같았다. 지난번에 한 번 당하고 나니 이번엔 미리 파보고 싶었다. 그래서 오늘 이해한 걸 까먹기 전에 일기처럼 남겨둔다. 한 줄로는 알고 있었다이 정도는 나온다. Virtual DOM은 실제 DOM을 흉내 낸 가벼운 JavaScript 객체고, 바뀐 부분만 골라서 실제 DOM에 반영한다. 여기까진 외운 문장이다.문제는 그다음이다. "그래서 그게 왜 빠른데?"한참 생각하다 알았다. 이 질문에 답하려면..