<div id="readability-page-1" class="page"><div>이미지 저장 정책이 변경되어 기능 수정 후 QA 진행중에 있다. 
발생했던 이슈들과 해결했던 방법을 적어본다.
<h2 id="aos-activity와-webview">AOS Activity와 Webview</h2>
Activity는 앱의 컨텐츠를 담을 수 있는 컨테이너라고 생각하면 된다. 
Webview는 앱의 컨텐츠 중 하나로, 웹 애플리케이션을 담을 수 있는 컨테이너다 
Activity &gt; Webivew의 관계라고 생각하면 된다.
Webview안에서 window.open으로 열게되면, 자식웹뷰가 생성된다. 
Activity &gt; Webview &gt; Webview
Activity 간의 통신은 앱 인터페이스가 필요하지만, 
Activity 내에서 부모와 자식 Webivew 간의 통신은 브라우저와 동일하게 opener를 이용할 수 있다.
<h2 id="이미지-용량이-변경되는-이슈">이미지 용량이 변경되는 이슈</h2>
png 파일의 경우 업로드시의 용량과, 업로드 후 다운로드 받았을 때의 이미지 용량이 상이한 문제점이 있었다.
프론트에서 업로드할 때 canvas로 한번 옮겼다가 저장하는 처리를 하면서 용량이 상이해진 듯 했다. 
이러한 처리를 했던 이유는 업로드시 브라우저 별로 이미지가 회전하는 이슈를 해결하기 위함이었다. 
해당 이슈가 백엔드에서 수정이 불가능하여 <code>File -&gt; Canvas -&gt; File</code>로 변환해서 저장을 하고있었다. 
아마 Canvas로 변환하면서 이미지 방향 정보 말고도 기타 정보가 변경되거나 추가되면서 용량이 변경된 듯 하다.
jpg경우 방향 정보가 이미지 정보가 없어서 발생하지 않았던 것 같다.
<h2 id="react-dispatch를-동기적으로">[React] Dispatch를 동기적으로..</h2>
api를 dispatch를 통해서 호출할 때, 파라미터를 넘기지 않았었다.
호출에 필요한 파라미터들도 store에 저장했기에,
<ul>
<li>api 파라미터 set을 위한 액션 dispatch</li>
<li>api 호출을 위한 액션 dispatch</li>
</ul>
방식으로 나눴었다. 
그러나 저 dispatch들이 동기적으로 처리가 되지 않아서, 종종 api 호출할 때 파라미터가 제대로 set이 안된상태에서 호출되는 이슈가 있었다.
아직 동기적으로 처리할 수 있는 방법을 찾진 못했다. 
대신 api dispatch 액션에서 파라미터로도 넘길 수도 있고, 넘기는 파라미터가 없을 경우 store에서 가져다 쓰도록 변경했다.
<pre><code>/**
========================
component
========================
**/
// ...
dispatch(actions.setChatSeq(Number(chatSeq)));
dispatch(actions.getChatInfo(Number(chatSeq))); // 처음에는 넣어주자.
// ...

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

ginameee.log

Jangchun Lee

이미지 저장 정책이 변경되어 기능 수정 후 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);
 }
 },
);
//...

2021.10.12

댓글