서론

이번주 월요일에 Next step에서 진행한 이펙티브 디버깅 강의를 듣고 실습을 진행했다.
그런데 실습 바로 다음날 회사에서 디버깅할 일이 생겼다.
좋은 기회라고 생각하고 강의에서 배운 사고 프레임워크대로 디버깅을 해결해보았다.

해결 과정

1. 내가 어떤 문제를 풀려고 하는지 한 문장으로 적는다

1. 모바일 환경에서 프로필 생성 및 수정 혹은 채팅방 생성 및 수정할 때
2. 이미지를 업로드 할 때
3. 앨범에서 사진을 업로드 할 수 없다.

2. 올바르게 동작한다면 어떤 일이, 어떤 순서로 벌어져야 하는지 적는다

case 1

given

모바일 프로필 생성 및 수정 화면에서 이미지 수정 버튼을 누르고

when

앨범으로 이동을 클릭 시

then

앨범으로 이동해야 한다.

case 1-2

given

모바일 프로필 생성 및 수정 화면에서 이미지 수정 버튼을 누르고 앨범으로 이동을 클릭해 앨범으로 이동했을 때

when

앨범에 있는 사진을 클릭 시

then

원래 화면으로 돌아오고 선택한 사진이 프로필에 적용되어야 한다.

case 2

given

모바일 채팅방 생성 및 수정 화면에서 이미지 수정 버튼을 누르고

when

앨범으로 이동을 클릭 시

then

앨범으로 이동해야 한다.

case 2-2

given

모바일 프로필 생성 및 수정 화면에서 이미지 수정 버튼을 누르고

when

앨범으로 이동을 클릭 시

then

앨범으로 이동해야 한다.

3. 최소 재현 환경을 구축하면서 관찰하고, 정상 환경과는 어떻게 다른지 비교한다

버그 재현

1. local에서 개발환경을 실행한 후 테스트용 모바일 핸드폰에서 재현한다. 아이폰 디버깅을 위해 safari 개발자 모드를 사용한다.
2. 사내에서 os 에서 발생하는 현상이기 때문에 사내 os를 통해 개발 환경에 접속한다.
3. 프로필 생성 및 수정 화면에서 이미지를 클릭해 바텀 시트를 뜨게 한후 앨범으로 이동 버튼을 누른다
4. 반응이 없다...

4. 재현 환경과 정상 환경의 차이를 발생시키는 원인이 될 만한 옵션들을 적어본다

팀원 혹은 관련 개발자에게 사전정보 조사 및 습득

• 핸드폰 갤러리로 가기 위해서 os로 startAlbumView 메시지를 전송해야 한다
  • 기존에는 startAlbumview가 메시지 이름이었는데 startAlbumView로 메시지 명이 수정됨
• 핸드폰 갤러리에서 선택한 이미지를 얻기 위해서 os에서 보내는 startAlbumViewResult 메시지를 받아 화면에 반영해야 한다.
  • before: 앨범에서 선택한 사진, 카메라로 찍은 사진을 os에서 받기 위해서 setOnCapture 이벤트 리스너를 등록
  • after: 앨범에서 선택한 사진을 얻기 위해서 startAlbumViewResult 이벤트 리스너를 등록

추측되는 원인

1. 핸드폰 갤러리로 이동하기 위한 메시지 이름이 이전과 틀렸다.
2. 핸드폰 갤러리에서 받아온 이미지를 화면에 적용하기 위해 추가로 startAlbumViewResult 이벤트 리스너 등록해야하는데 지금은 등록되어 있지 않다.
3. 이미지를 검사하는 로직이 구현되어 있지 않다.
4. 이미지를 검사하는 로직이 잘못 구현되어 있다.
5. 이미지를 검사하는 로직의 위치가 잘못되었다.
6. 이미지 용량이 문제다
7. 허용하는 이미지 확장자가 알맞지 않다. ex) JPG, PNG 등 대문자 확장자는 허용 안하고 jpg, png 등 소문자 확장자만 허용한다.

1, 2는 팀원에게 얻은 정보를 이용해서 원인을 파악했고 3 ~ 7번째 가설은 가능한 상황을 추가로 생각했다.

5. 옵션 중 하나를 골라서 가설을 세우고 검증한다

1번 가설 테스트

핸드폰 갤러리로 이동하기 위한 메시지 이름을 변경한다면 재현환경의 3번 과정까지 진행시 핸드폰 갤러리로 이동할 것이다.

//before
messageAPI('startAlbumview');

//after
messageAPI('startAlbumView');

2번 가설 테스트

핸드폰 갤러리에서 받아온 이미지를 화면에 적용하기 위해 추가로 startAlbumViewResult 이벤트 리스너를 등록하면 성공적으로 이미지를 받아올 것이다.

//before
window.addEventListener('message', ({messageType, ...})=>{
  if(messageType === 'setOnCapture'){
    ...
  }
});
  
//after
window.addEventListener('message', ({messageType, ...})=>{
  
  
  if(messageType === 'setOnCapture'){
    ...
    return;
  }
  
  if(messageType === 'startAlbumViewResult'){
    ...
    return;
  }
});

여기까지 가설대로 프로그램이 동작했다.

추가 리팩토링

const eventListenerList = {
  setOnCapture:setOnCaptureEventHandler,
  startAlbumViewResult:startAlbumViewResultEventHandler,
}

window.addEventListener('message', ({messageType, ...args})=>{
  eventListenerList?.[messageType](args);
});

분기 처리되어 있던 이벤트 로직을 함수 및 객체로 분리하고 메시지 타입에 맞게 이벤트 리스너를 실행하도록 했습니다.

나머지 가설 검증

• 3, 4, 5, 6번 가설은 코드를 읽어본 결과 아닌 것으로 판명되었다.

7번 가설

1. png 파일의 확장자를 PNG로 바꾸면 업로드에 실패할 것이다.

가설대로 업로드에 실패했다.

2. 허용하는 이미지 타입을 추가하면 대문자 확장자도 업로드에 성공할 것이다.

//before
const ACCEPTABLE_IMAGE = [
  'image/png',
  'image/jpeg',
  'image/jpg',
];

//after
const ACCEPTABLE_IMAGE = [
  'image/png',
  'image/jpeg',
  'image/jpg',
  'image/PNG',
  'image/JGEG',
  'image/JPG',
];

가설대로 대문자 확장자도 이미지 업로드에 성공했다! 이슈 마무리 ~

배운 점

• 처음부터 코드를 보았어도 이슈 해결은 가능했겠지만 시간이 오래 걸렸을 것 같다.
• 문제 정의, 원인 및 가설 도출, 가설 검증 순서대로 해결하다 보니 문서화도 되고 진행 상황을 파악하며 이슈를 해결할 수 있었다.