이미지 오류 수정

문제상황 1

리팩토링을 하고 있는 도중 과거 팀원이 맡은 부분에서 오류를 발견하게 되었다. 게시물 수정 페이지에서 이미지 액박 표시가 나타난 상황이였다.

원인

showImg를 순회하면서 이미지를 렌더링하게 되는데 빈 문자열도 렌더링 시키는 바람에 액박 이미지가 뜨는 상황이였다.

해결방안

// 수정 전
// oripostImg에 '' 빈 문자열이 들어감

function sliceImg(oripostImgs) {
    const arr = oripostImgs?.split(',')
    // 빈 문자열이 들어와서 split을 하게되면 빈문자열을 포함한 배열을 반환한다. 이 부분 때문에 빈문자열 포함한 배열을 반환한 것.
    return arr;
  }


// 수정 후
  function sliceImg(oripostImgs) {
    const arr = oripostImgs?.split(',').filter(v => v !== '');
    // 만약 arr에 빈 문자열이 포함되어 있으면 제거하고 배열을 리턴

    return arr;
  }

  useEffect(() => {
    setShowImg(sliceImg(oripostImg));
  }, []);

문제상황 2

수정 이후 정상 작동 될 것이라 기대하였지만... 엉뚱한 이미지가 렌더링이 되는 문제점이 생겼다. 문제점을 찾아보니 서버에 보내는 이미지를 다르게 보내주고 있었다.

// 수정 전 코드
const data = {
    post: {
      content: '',
      image: showImgs?.length === 0 ? postImg : showImgs
    },
  };

// 수정 후 코드
const data = {
    post: {
      content: '',
      image: showImgs
    },
  };

asxios.put(URL, data, hearders~)

showImg는 미리보기 이미지를 렌더링 해주는 배열로, 실제 내가 보고 있는 이미지를 서버에 보내주어야 하는데 내가 보는것과 다른 postImg를 보내주어서 수정이 제대로 이루어지지 않았다. 왜 처음에 저렇게 작성했는지 팀원의 의도를 잘 모르겠다..

결론

개발단계에서 발견하지 못한 이유는 게시글을 올릴때 사진을 포함해서 올릴시 문제가 생기지 않았기 때문이다. 문제는 사진없이 게시글만 작성했을 때다. 테스트 당시 사진을 포함해서만 게시글 등록을 했기 때문에 담당 팀원이 확인을 못한 것 같다.

사실 해결방법은 간단하지만 내가 작성한 코드가 아니라 해석하는데 어려움이 있었고, 어떤 부분에서 문제점이 발생했는지 찾기가 어려웠다. 그래도 차근차근 흐름을 따라가다보니 해결할 수 있었다. 테스트 단계에서 찾지 못한 아쉬움이 남았지만 지금이라도 발견해서 다행이다.

문제점 요약
1. 이미지에 빈배열 포함
2. 게시글 수정시 이미지 데이터 잘못보냄