정권찌르기[리팩토링 2-4일차]: EditorList 오류 수정하기

밍구·2023년 7월 11일

리팩토링

정권 찌르기[리팩토링 편]

목록 보기

2/4

취업을 위한 정권찌르기 오늘도 역시나..

프로젝트 코드 리팩토링

💥문제:

1. 기술 부채로 인한 코드 오류..

현재 리팩토링 하고 있는 프로젝트는 약 기획 제외하고 4~5주 정도의 시간이 주어진 프로젝트였는데,
컨설턴트 님에게 매주 피드백을 받을 때 마다 우선순위(하)에 있던 기능 + 추가 기능 요청으로 인해 빠르게 반영하는데 초점을 두다 보니 기술부채가 무시무시하게 쌓여 있었다..........
개발 끝나면 꼭 리팩토링 해야지 결심했었지만 마지막에 부탁 받은 전체 에셋 추가 기능을 구현하다 결국 오류가 터지고 말았다...

오류를 고치기 위해 덕지덕지 쓴 코드를 보면서 과거의 나를 혼내고 싶었다 ㅠ

문제 원인은 배열안의 객체가 생성 될 때 마다 idx 값을 부여하였는데

idx 4번 값을 삭제하게되면

사진과 같은 상태가 된다.
사실 key값과 index 값이 안 맞는것도 거슬렸고,idx 값에 의존해서 터치이벤트와 스크롤 이벤트가 실행되도록 뷰어 페이지에 코드를 작성하였기에 idx 값을 변경할 필요가 있었다.
그래서 당시 삭제, 미리보기, 발행하기, 텍스트 등록하기를 실행 할 경우 재배치 함수가 작동하도록 코드를 작성하였는데...

 const relocationHandler = () => {
    if (contents[contents.length - 1]?.idx != contents.length) {
      // console.log("여기 안들어온건가");
      contents.map((content, index) => {
        reLocation.push({
          idx: index + 1,
          context: content.context,
          event: content.event,
        });
      });
      setEpisode({ ...episode, contents: reLocation });
    }
  };

위와 같은 방식으로 작성하였다.
저 코드도 useState는 불변성을 유지하기 위해 push 함수를 사용하면 안되는데 push를 사용해서 배열 자체를 직접 바꿔버려 많은 잘못들이 엮여 있는 코드이다..........

💡방법:

위의 문제점을 해결하기 위해서 2가지의 방법을 생각하였다.

1. idx 값은 따로 변경하지 않은 채로 사용

그대로 넘어갈 경우 뷰어에서 idx값에 의존한 반복문을 돌릴 때 없는 숫자가 나올 시 넘기는 코드를 추가로 작성하는 방법
팀원이 주신 아이디어인데 근본적인 해결 방법은 아니지만 프로젝트 당시에 사용했다면 기존 방법보다는 코드를 적게 작성하고 오류가 적었을 것이라 생각한다!
하지만 문제의 완전한 해결책이 된다고 생각되진 않아 채택하진 않았다.

2. 객체의 고유성을 지키기 위해 idx 값을 uuid로 지정하고 반복문 설정시에만 array index 값을 사용하는 경우

처음 리팩토링 할 생각했을때는 배열안에 객체가 있는 형태였기에 굳이 idx 값이 필요한가? 라는 생각을 하였다.
https://ko.legacy.reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper
하지만 해당 글을 보고 고유 식별 id는 꼭 필요하다고 생각했기에..(사실 수정, 삭제 할 때도 필요한데 간과하고 있었다)
고민을 하던 차에 친구가 숫자 대신 uuid 값을 넣는게 어떠냐는 제안을 해주었다.
uuid란?
https://yjh5369.tistory.com/entry/javascript%EC%97%90%EC%84%9C-UUID-%EC%83%9D%EC%84%B1%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95