너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 5

Gomi·2022년 3월 26일
0
post-thumbnail

💫 styled-components에서 테마 팔레트, 폰트 공급


 일단 전역적인 테마 팔레트와 폰트를 DefaultTheme으로 공급했다. 디자인에는 영 재능이 없는 듯 하다. 별거 아니지만 typeScript 관련해서 재밌는 오류가 있어서 작성한다.

 벨로퍼트님의 리액트 강의를 보면 다음과 같은 코드가 있다.

const colorStyles = css`
  ${({ theme, color }) => {
    const selected = theme.palette[color];
    return css`
      background: ${selected};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}
`;

 이를 타입스크립트에 적용하면, theme.palette[color] 부분에서 오류가 발생한다. 타입스크립트에서는 오브젝트 인덱싱을 위해 string literal type만을 허용하는데,string literal type은 string보다 좁은 의미의 타입으로 불변하는 read only string에만 시스템이 부여한다. 위 코드의 color는 매개변수로 언제든 변하는 sting이므로 default theme에 index signature 속성을 부여하면 된다.

style.d.ts

import 'styled-components'

declare module 'styled-components'{
    export interface DefaultTheme {
        palette:{
            [index:string]:string;
        }
    }
}

💭 Ready 컴포넌트 구현


  Ready컴포넌트는 롤 클라이언트가 실행중이 아닐 때 메인페이지로, 기본적으로는 롤 클라이언트가 실행되면 자동으로 제거되게 하였으나, 롤 클라이언트 실행 중 유저들의 세부사항을 확인하고, 닷지 알람 알고리즘을 유저가 커스텀 할 수 있는 기능을 수행하기 위해 언제든 오픈할 수 있다. 일렉트론에서 처음으로 커스텀 타이틀바 만드는법을 알아봤는데, 간단했다.

Main 프로세스에서 BrowserWindow객체의 titleBarStyle속성을 'hidden'으로 설정하고, 리액트 웹뷰에서 타이틀바 영역을 지정한 뒤, css에서 '-webkit-app-region: drag;'속성을 부여한다. 그리고 아이콘(창 닫기 등) 버튼 실행 시 이벤트는 IPC통신을 통해 메인프로세스로 연결.


😇 store가 세 개인 Redux 세팅


  대부분의 게임 관련한 이벤트는 electron의 main process에서 발생한다. 클라이언트 API도 그렇고 axios도 CORS에러 때문에 메인 프로세스에서 실행하고, 이를 표현하기 위해서는 IPC통신을 통해 렌더러프로세스, 리액트로 일일이 전달해줘야 한다. 이때까지 그냥 일일이 ipc메시지를 작성해서 받은 메시지를 react hook으로 처리했는데, 내가 구상한 최강의 멀티서치 앱을 구현하려면 두개의 윈도우와 한개의 메인프로세스의 상태관리가 필요했기 때문에 일일이 메시지 기반으로 상태관리하는 건 너무 불편한 일이었다.

 그러던 중 전역 상태관리에 주로 쓰이는 라이브러리라는 개념만 있던 리덕스가 생각났다. 액션을 통한 상태변경이라면, 같은 스토어를 두고 액션만 ipc통신을 통해 일으켜주면 메인 프로세스에서 데이터 패치를 하고 렌더러 프로에서 자동으로 디스패치하는 미들웨어가 있으면 될 터,

 놀랍게도 elecrton-redux라는 라이브러리는 내가 생각한 그대로를 구현해놓은 것 같았다. 하지만 실제로 프로젝트에 적용하지는 못했는데, 컨텍스트 브릿지라는 IPC통신을 위한 전처리를 고려하지 않아 에러가 발생하는 듯 했다. 내가 직접 구현하는게 더 빨라 보였고, 생각보다 스무스하게 처리해서 무려 세개의 스토어가 한번에 같은 액션을 디스패치할 수 있는 미들웨어를 고안했다.

 이전에 해본 프로젝트에선 전역상태관리를 ContextAPI로 진행했었는데, 그때는 ContextAPI의 좋은 직관성과 리덕스 특유의 복잡성이 맞물려서 리덕스 쓸 일도 없어보였고 쳐다보기도 싫었는데 문제해결을 위해 도입해보니 상당한 강점이 있다는 생각이 들었다.

다음은 본 프로젝트에서 리덕스를 썼을 때 장점으로 생각한 것들이다.

  • 리액트에 종속된 라이브러리가 아니기에, 일렉트론과 리액트에 동시에 스토어 생성이 가능했고

  • 미들웨어 작성이 가능하기 때문에 일렉트론(메인프로세스)에서 발생한 액션을 자동으로 리액트(렌더러프로세스)에도 발생시킬 수 있는 것

  • 롤 클라이언트에서 발생한 정보를 자동으로 미들웨어를 통해 전적검색으로 연결 시킬 수 있음

 리덕스의 러닝커브는 진짜 부담스럽게 느껴진다. 데이터 패치를 위해 거치는 과정이 너무 복잡하다. 그런 내가 어느정도 리덕스를 익숙하게 느끼게 된 계기는 다음과 같이 dispatch함수에 액션 객체를 직접 넣어보면서다.

store.dispatch({type:'-', payload:'-'})

 벨로퍼트님 강의도 그렇듯 디스패치 안에는 액션생성함수가 들어가는데, 그냥 딱 오브젝트를 리턴하는 함수일 뿐 알고보면 생각보다 별거 아니다. 배우는 입장에서는 그 '눈속임'이 상당히 거대한 장벽인데, 스스로 콘솔을 찍어가며 복잡성을 줄여보려는 시도를 하는게 가장 빠른 학습방법임을 느꼈다.

상태 정의는 원하는 만큼 마쳤다. 픽창에 액션이 생길때마다 리덕스를 통해 데이터가 디스패치 되고있는 걸 확인했으니 이제 본격적으로 데이터 시각화에 들어가기만 하면 된다...
아우 험난하다....

profile
터키어 배운 롤 덕후

0개의 댓글