2021.10.12

이미지 저장 정책이 변경되어 기능 수정 후 QA 진행중에 있다.
발생했던 이슈들과 해결했던 방법을 적어본다.

AOS Activity와 Webview

Activity는 앱의 컨텐츠를 담을 수 있는 컨테이너라고 생각하면 된다.
Webview는 앱의 컨텐츠 중 하나로, 웹 애플리케이션을 담을 수 있는 컨테이너다
Activity > Webivew의 관계라고 생각하면 된다.

Webview안에서 window.open으로 열게되면, 자식웹뷰가 생성된다.
Activity > Webview > Webview

Activity 간의 통신은 앱 인터페이스가 필요하지만,
Activity 내에서 부모와 자식 Webivew 간의 통신은 브라우저와 동일하게 opener를 이용할 수 있다.

이미지 용량이 변경되는 이슈

png 파일의 경우 업로드시의 용량과, 업로드 후 다운로드 받았을 때의 이미지 용량이 상이한 문제점이 있었다.

프론트에서 업로드할 때 canvas로 한번 옮겼다가 저장하는 처리를 하면서 용량이 상이해진 듯 했다.
이러한 처리를 했던 이유는 업로드시 브라우저 별로 이미지가 회전하는 이슈를 해결하기 위함이었다.
해당 이슈가 백엔드에서 수정이 불가능하여 File -> Canvas -> File로 변환해서 저장을 하고있었다.
아마 Canvas로 변환하면서 이미지 방향 정보 말고도 기타 정보가 변경되거나 추가되면서 용량이 변경된 듯 하다.

jpg경우 방향 정보가 이미지 정보가 없어서 발생하지 않았던 것 같다.

[React] Dispatch를 동기적으로..

api를 dispatch를 통해서 호출할 때, 파라미터를 넘기지 않았었다.

호출에 필요한 파라미터들도 store에 저장했기에,

• api 파라미터 set을 위한 액션 dispatch
• api 호출을 위한 액션 dispatch

방식으로 나눴었다.
그러나 저 dispatch들이 동기적으로 처리가 되지 않아서, 종종 api 호출할 때 파라미터가 제대로 set이 안된상태에서 호출되는 이슈가 있었다.

아직 동기적으로 처리할 수 있는 방법을 찾진 못했다.
대신 api dispatch 액션에서 파라미터로도 넘길 수도 있고, 넘기는 파라미터가 없을 경우 store에서 가져다 쓰도록 변경했다.

/**
========================
component
========================
**/
// ...
dispatch(actions.setChatSeq(Number(chatSeq)));
dispatch(actions.getChatInfo(Number(chatSeq))); // 처음에는 넣어주자.
// ...

/**
========================
store
========================
**/
//...
export const getChatInfo = createAsyncThunk(
  `${name}/getChatInfo`,
  async (seq: number | undefined, { getState, rejectWithValue }) => {
    const state: IChatState = (getState() as RootState).chat;
    const chatSeq = seq ?? state.chatSeq; // 파라미터로 오면 받고, 아니면 state 에서 꺼내씀
    try {
      return await api.requestChatDetail(chatSeq);
    } catch (e) {
      const error: AxiosError<{ errors: any }> = e;
      return rejectWithValue(error);
    }
  },
);
//...