<div id="readability-page-1" class="page"><div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="11키티즈 개발에 사용한 기술과 사용 후기">
    <meta itemprop="description" content="40일의 개발 기간을 거쳐 11 키티즈를 런칭했다.">
    <meta itemprop="datePublished" content="2024-04-02T00:50:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          2 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <p>40일의 개발 기간을 거쳐 11 키티즈를 런칭했다.</p>

<p><img src="https://lovemewithoutall.github.io/assets/images/2024-04-02-11kitties-tech/game-image.png" alt="game"></p>

<p>귀여운 고양이를 키우는 게임을 만들기 위해 사용한 기술과, 사용하려 했지만 폐기한 기술을 하나씩 정리해보고자 한다.</p>

<h2 id="사용한-기술">사용한 기술</h2>

<h3 id="개발-환경">개발 환경</h3>

<ol>
  <li>Bun
    <ol>
      <li>채택 사유: 빠르다</li>
      <li>후기
        <ul>
          <li>장점</li>
        </ul>
        <ol>
          <li>아주 빠르다.
            <ol>
              <li>빌드 속도가 <code>node</code> 대비 3배 이상 빠르다</li>
              <li>로컬 서버가 즉시 실행된다</li>
            </ol>
          </li>
          <li>문서가 꽤 친절하다
       * 단점</li>
          <li>트러블 슈팅에 필요한 레퍼런스가 적다</li>
          <li>버그가 많다.
            <ol>
              <li>bun 단독으로 사용하기에는 문제가 없다. 하지만 다른 도구와 함께 사용할 때 문제가 발생한다.</li>
              <li>사례: 기본 설정만으로는 <code>production build</code>를 할 수 없었다. bun의 환경변수 설정이 <code>Vite</code>의 환경변수 설정과 충돌하여 항상 <code>development build</code>만 되는 오류가 있었다. 이 문제를 해결하기 위해 빌드를 할 때마다 환경에 따른 <code>.env</code> 파일을 프로젝트 루트 디렉토리에 복사하는 스크립트를 추가해야 했다.</li>
            </ol>
          </li>
          <li>Test suite의 레퍼런스 부족. 그래서 <code>github copilot</code>의 테스트 코드 자동 생성 기능을 그대로 사용할 수 없고, 생성된 테스트 코드를 약간 수정해야 했다. 하지만 잘 동작한다</li>
          <li><code>pwa</code>와 함께 작동하기 위해서는 아래와 같은 의존성 overrides가 필요하다
            <div><pre><code><span>"overrides"</span><span>:</span><span> </span><span>{</span><span>
  </span><span>"@rollup/plugin-node-resolve"</span><span>:</span><span> </span><span>"^15.2.3"</span><span>
</span><span>}</span><span>
</span></code></pre></div>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>biome
    <ol>
      <li>채택 사유
        <ol>
          <li><code>eslint/prettier</code>가 <code>webstorm</code>에서 정상 작동하지 않는다</li>
          <li><code>eslint</code>와 <code>prettier</code>의 설정 충돌이 꼴보기 싫다</li>
        </ol>
      </li>
      <li>후기
        <ol>
          <li>잘 동작한다</li>
          <li>레퍼런스는 극히 드물다</li>
          <li>웹스톰과 연동이 적당히 잘 된다(버그는 있다)</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Vite
    <ol>
      <li>채택 사유: 사실상의 표준</li>
      <li>후기: 빠르고 설정이 편리하다.</li>
    </ol>
  </li>
</ol>

<h3 id="라이브러리">라이브러리</h3>

<ol>
  <li>React 18
    <ol>
      <li>채택 사유
        <ol>
          <li>익숙함</li>
          <li>풍부한 생태계</li>
          <li>강력함</li>
          <li>커리어</li>
        </ol>
      </li>
      <li>후기: 만족</li>
    </ol>
  </li>
  <li>Zustand
    <ol>
      <li>채택 사유
        <ol>
          <li>다른 store를 물리치고 대세가 됨</li>
          <li>편리한 <code>localStorage</code> 지원</li>
        </ol>
      </li>
      <li>후기
        <ol>
          <li>기존에 사용하던 <code>mobx</code>에 비해 편리한 syntax</li>
          <li>Store 규모를 적절히 선택할 수 있어서 좋다</li>
          <li>학습 곡선이 평탄함</li>
          <li><code>Vue pinia</code>와 비슷한듯?</li>
          <li>최적화를 위해 localStorage를 함부로 사용하다가 섯부른 최적화의 쓴 맛을 보았다.</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>xState
    <ol>
      <li>채택 사유
        <ol>
          <li>게임 개발 중 상태 분기에 따른 sequential &amp;&amp; multple &amp;&amp; conditional 이벤트 처리에 유한상태머신이 필요했다. xstate가 없었다면 react component는 조건문 지옥에 빠졌을 것이다.</li>
          <li>남들이 쓰니까 나도 한 번..</li>
        </ol>
      </li>
      <li>후기
        <ul>
          <li>장점
            <ol>
              <li>기능은 좋다</li>
              <li>깔끔한 선언형 코드 덕분에 기능 변경에 유연하고 유지보수가 쉽다</li>
              <li>위 장점이 압도적이기 때문에 아래 기술한 여러 단점에도 불구하고 앞으로도 사용할 예정</li>
            </ol>
          </li>
          <li>단점
            <ol>
              <li>문서가 허접하다</li>
              <li>type도 허접하다. 잘 만든 라이브러리는 type만 봐도 사용법을 짐작할 수 있는데, xstate는 그렇지 못하다. generic 지옥이다.</li>
              <li>최신 버전이자 내가 사용한 버전인 v5의 레퍼런스가 적다</li>
              <li>기능 자체에 대한 디버깅이 힘들다</li>
              <li>학습 곡선이 가파르다</li>
              <li>자체 구현한 유한상태머신에 비하여 오버스펙</li>
              <li>디버깅을 하려면 <code>actors.getSnapshot().value</code>에 크게 의존해야 한다</li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </li>
  <li>React-query(v4)
    <ol>
      <li>채택 사유
        <ol>
          <li>쿼리 캐싱이 필요</li>
          <li>익숙하고 유용하다</li>
          <li>최신 버전인 v5를 쓰고 싶었으나 ios12를 지원하지 않아서…</li>
        </ol>
      </li>
      <li>후기
        <ol>
          <li>늘 문서가 불만이다</li>
          <li>그래도 레퍼런스가 드문 V5보다는 낫다</li>
          <li>types은 v4도 여전히 generic 지옥</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<h2 id="사용하려-했으나-폐기한-기술">사용하려 했으나 폐기한 기술</h2>

<ol>
  <li>Pwa = workbox + vitePWA
    <ol>
      <li>채택 사유: 게임에 필요한 대용량 이미지의 런타임 캐싱</li>
      <li>후기
        <ol>
          <li>설정이 대단히 편리하다</li>
          <li><code>apple</code>에서 <code>pwa</code>의 <code>caches api</code>를 지원하지 않아 좌절했다</li>
          <li>Response type이 <code>opaque</code>인 경우 처리하기 곤란했다. <code>Access-control-allow-origin</code>을 <code>*</code>로 설정하지 않을 경우, <code>access-control-allow-header</code>와 <code>access-control-allow-method</code>도 설정해야 한다는 사실을 몰라서 애먹었다</li>
          <li>채택 목적이었던 대용량 이미지 캐싱이 더이상 필요하지 않아, 눈물을 머금고 폐기했다. 다음 프로젝트에서는 필요시 사용할 계획</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Cypress
    <ol>
      <li>채택 사유
        <ol>
          <li><code>Safari</code> 베타 지원 시작</li>
          <li><code>Cypress studio</code>의 존재</li>
        </ol>
      </li>
      <li>후기: 바빠서 제대로 못 써봄</li>
    </ol>
  </li>
</ol>

<p>20240402</p>

        
      </section>

      

      


      
  

    </div>

    
      

    
  </article>

  
  
    
  
  
</div></div>

Never test

40일의 개발 기간을 거쳐 11 키티즈를 런칭했다.
귀여운 고양이를 키우는 게임을 만들기 위해 사용한 기술과, 사용하려 했지만 폐기한 기술을 하나씩 정리해보고자 한다.
사용한 기술
개발 환경
Bun
    
채택 사유: 빠르다
후기
        
장점
아주 빠르다.
            
빌드 속도가 node 대비 3배 이상 빠르다
로컬 서버가 즉시 실행된다
문서가 꽤 친절하다
       * 단점
트러블 슈팅에 필요한 레퍼런스가 적다
버그가 많다.
            
bun 단독으로 사용하기에는 문제가 없다. 하지만 다른 도구와 함께 사용할 때 문제가 발생한다.
사례: 기본 설정만으로는 production build를 할 수 없었다. bun의 환경변수 설정이 Vite의 환경변수 설정과 충돌하여 항상 development build만 되는 오류가 있었다. 이 문제를 해결하기 위해 빌드를 할 때마다 환경에 따른 .env 파일을 프로젝트 루트 디렉토리에 복사하는 스크립트를 추가해야 했다.
Test suite의 레퍼런스 부족. 그래서 github copilot의 테스트 코드 자동 생성 기능을 그대로 사용할 수 없고, 생성된 테스트 코드를 약간 수정해야 했다. 하지만 잘 동작한다
pwa와 함께 작동하기 위해서는 아래와 같은 의존성 overrides가 필요하다
            
"overrides": {
  "@rollup/plugin-node-resolve": "^15.2.3"
}
            
biome
    
채택 사유
        
eslint/prettier가 webstorm에서 정상 작동하지 않는다
eslint와 prettier의 설정 충돌이 꼴보기 싫다
후기
        
잘 동작한다
레퍼런스는 극히 드물다
웹스톰과 연동이 적당히 잘 된다(버그는 있다)
Vite
    
채택 사유: 사실상의 표준
후기: 빠르고 설정이 편리하다.
라이브러리
React 18
    
채택 사유
        
익숙함
풍부한 생태계
강력함
커리어
후기: 만족
Zustand
    
채택 사유
        
다른 store를 물리치고 대세가 됨
편리한 localStorage 지원
후기
        
기존에 사용하던 mobx에 비해 편리한 syntax
Store 규모를 적절히 선택할 수 있어서 좋다
학습 곡선이 평탄함
Vue pinia와 비슷한듯?
최적화를 위해 localStorage를 함부로 사용하다가 섯부른 최적화의 쓴 맛을 보았다.
xState
    
채택 사유
        
게임 개발 중 상태 분기에 따른 sequential && multple && conditional 이벤트 처리에 유한상태머신이 필요했다. xstate가 없었다면 react component는 조건문 지옥에 빠졌을 것이다.
남들이 쓰니까 나도 한 번..
후기
        
장점
            
기능은 좋다
깔끔한 선언형 코드 덕분에 기능 변경에 유연하고 유지보수가 쉽다
위 장점이 압도적이기 때문에 아래 기술한 여러 단점에도 불구하고 앞으로도 사용할 예정
단점
            
문서가 허접하다
type도 허접하다. 잘 만든 라이브러리는 type만 봐도 사용법을 짐작할 수 있는데, xstate는 그렇지 못하다. generic 지옥이다.
최신 버전이자 내가 사용한 버전인 v5의 레퍼런스가 적다
기능 자체에 대한 디버깅이 힘들다
학습 곡선이 가파르다
자체 구현한 유한상태머신에 비하여 오버스펙
디버깅을 하려면 actors.getSnapshot().value에 크게 의존해야 한다
React-query(v4)
    
채택 사유
        
쿼리 캐싱이 필요
익숙하고 유용하다
최신 버전인 v5를 쓰고 싶었으나 ios12를 지원하지 않아서…
후기
        
늘 문서가 불만이다
그래도 레퍼런스가 드문 V5보다는 낫다
types은 v4도 여전히 generic 지옥
사용하려 했으나 폐기한 기술
Pwa = workbox + vitePWA
    
채택 사유: 게임에 필요한 대용량 이미지의 런타임 캐싱
후기
        
설정이 대단히 편리하다
apple에서 pwa의 caches api를 지원하지 않아 좌절했다
Response type이 opaque인 경우 처리하기 곤란했다. Access-control-allow-origin을 *로 설정하지 않을 경우, access-control-allow-header와 access-control-allow-method도 설정해야 한다는 사실을 몰라서 애먹었다
채택 목적이었던 대용량 이미지 캐싱이 더이상 필요하지 않아, 눈물을 머금고 폐기했다. 다음 프로젝트에서는 필요시 사용할 계획
Cypress
    
채택 사유
        
Safari 베타 지원 시작
Cypress studio의 존재
후기: 바빠서 제대로 못 써봄
20240402

11키티즈 개발에 사용한 기술과 사용 후기

댓글