23.07.16~23.07.23

업무

1. 업로드 이미지 지원 X 오류 수정

지난주 발생했던 이슈를 해결했다.

 

사용자의 이미지 업로드 시, 해당 이미지를 브라우저에 띄워줘야 했는데...

window.URL?.createObjectURL?.(file)

createObjectURL 메서드를 통해, 입력받은 Blob 객체를 DOMString으로 변환해 img의 src 속성으로 띄워주는 상황.

 

하지만 HEIC 이미지의 경우 해당 DOMString을 브라우저에서 올바르게 띄워주지 못했고(HEIC타입 지원 X)

따라서 해당 파일의 타입을 jpeg나 png 등으로 변환하기로 했다.

 

https://www.npmjs.com/package/heic2any

heic2any

해당 라이브러리를 사용했고

 

export const convertHeicToType = async (
  file: Blob,
  toType: "image/jpeg" | "image/png" | "image/gif" = "image/jpeg"
) => {
  const heic2any = require("heic2any");  // can't call in server side
  try {
    return await heic2any({
      blob: file,
      toType,
    });
  } catch (e) {
    throw JSON.stringify(e);
  }
};

convertHeicToType란 함수를 만들어 사용자의 파일 업로드 시 사용할 수 있도록 했다.

 

2. 리뷰 작성 이미지 업로드 버그 수정

위의 이슈와 별개로, 분명 s3에 요청한 파일이 정상적으로 업로드되지 않는 버그가 있었다.

별다른 에러가 발생하지도 않고, 특정 상황에서는 또 정상 업로드가 돼서 디버깅에 애를 먹었는데...

 

// 해당 presigned url을 통한 이미지 업로드
imageUrls.forEach((urlObj, index) => 
  putS3PresignedUrlImage(
    urlObj.url,
    formData.images[index].imageFile,
    formData.images[index].imageFile.type
  );
);

s3 이미지 경로에 PUT 요청을 통해 이미지를 업로드하는 상황에서

해당 경로가 담긴 배열을 돌며 비동기 요청을 보내고 있었다.

 

router.reload();

이때... 해당 요청(이미지)과 관계없이 리뷰 작성이 완료된 경우 해당 페이지를 reload 하고 있었고,

이 때문에 event queue의 이미지 관련 비동기 요청들이 정상적으로 실행되기도 전에! 해당 페이지의 메모리도 함께 새로고침 돼버린 것.

 

const imageUploadPromises = imageUrls.map((urlObj, index) => {
  return putS3PresignedUrlImage(
    urlObj.url,
    formData.images[index].imageFile,
    formData.images[index].imageFile.type
  );
});
await Promise.all(imageUploadPromises);
router.reload()

해당 요청들을 대기한 후, reload가 이뤄지도록 수정해 해결!

(물론 실 코드에는 좀 더 복잡한 예외처리 로직들이 존재할테다)

 

3. RN 프로젝트 내 test code 추가 (with Jest)

현재 ReactNative로 작성된 앱은... 그야말로 레거시 덩어리라 할 수 있다.

불필요한 중복 코드, 불확실한 예외처리, 제멋대로인 컨벤션 등 개발자를 괴롭히는 요소들이 군데군데 숨어있는데...

그중에서도, 테스트 방법의 부재가 가장 치명적인 문제라 생각하고 있었다.

때마침 이번 스프린트 때 해당 이슈에 할애할 시간이 되어, 오랫동안 미뤄왔던 테스트 툴을 도입하기로 했다.

 

그렇지만...

이미 덩치가 커질 대로 커진 프로젝트의 모든 부분을 커버하는 테스트를 도입하기는 현실적으로 불가능했고,

따라서 지금부터 작성하는 모듈 단위 기능들에라도 단위 테스트를 적용하는 식으로 시작해보고자 했다.

 

이번에 추가된 리뷰 요청 알림톡 관련 Class에 우여곡절을 겪으면서 단위 테스트 코드를 작성했고

코드 리뷰 및 병합까지 마친 상황!

 

이를 통해 나뿐만 아니라, 동료 개발자들도 조금 더 안정적이고 유지보수에 용이한 환경에서 개발을 진행했으면 좋겠다!

 

4. 리뷰 요청 기능 배포

미용샵에서 예약에 대한 리뷰를 요청하고, 해당 리뷰들을 관리하고, 보호자는 리뷰를 작성하는 기능을 개발했고

다음 주 월요일 배포를 앞둔 상황!

수익화에 연관된 기능이니만큼... 많은 선생님들이 좋아해 주셨으면 하는 작은 바람..!