EFFI 프로젝트 #6 css리펙토링 및 글자가변크기 트러블슈팅

api가 나오기전 1~2일 시간이 나서 팀원들이랑 다같이 css 리펙토링과 디자인수정 작업을 들어갔다
팀원들과 전체적으로 코드를 보여 css코드에 불필요한 코드, 브라우저 기본값이라 필요없는 코드, 색상값이 하드코딩으로 들어가있는 부분을 체크했고 추가로 styled-component를 사용하는데 스타일이 없는데도 적용되어 있는부분이 있는데 협의 후 스타일이 없다면 그냥 div나 p등 태그명으로 작성하기로 해서 전체적으로 리펙토링을 진행했다

// 이런 코드들은 기본값이라 제거했다(이외에도 더 있다)
font-size: 16px;
font-style: nomal;
font-weight: 400;

고려해야 할 점

단순 css리펙토링이라서 크게 문제가 되는 부분은 없고 그냥 리펙토링 이후 잘 작동하는지만 체크하면 되었다

하지만 내가 맡은 side바에 글자 길이에 따른 가변크기 로직이 특정 디바이스에서 무한루프가 발생해서

크기가 커졌다 작아졌다를 반복하는 버그가 있어서 함께 수정해야 했다

 

접근방법 및 해결과정

css리펙토링 과정에서는 큰 무리 없이 해결되었고

글자 가변크기 로직이 왜 무한루프가 발생하는지 체크했다

  useEffect(() => {
    // 뒷배경보다 텍스트 길이가 긴지 체크
    const checkOverflow = () => {
      if (groupItemRef.current) {
        const roomName = groupItemRef.current.querySelector('div');
        const bgImg = groupItemRef.current.querySelector('img');
        if (roomName && bgImg) {
          const isOverflowing = roomName.scrollWidth > bgImg.scrollWidth;
          setIsOverFlowText(isOverflowing);
        }
      }
    };
    checkOverflow();
    window.addEventListener('resize', checkOverflow);
    return () => {
      window.removeEventListener('resize', checkOverflow);
    };
  });

일단 원인은 글자가 넘치지 않으면 크기를 키우는데 키운상태에서 글자가 넘치면 다시 줄이는 식으로 무한루프가 돌았고

코드에서 알 수 있듯이 디펜던시 리스트가 없는 문제였다

그래서 1회만 실행하도록 []를 넣었는데 개발모드에서는 특정 훅을 2번 실행시키는 strictMode 때문에 확인이 안되었다

빌드 후 실행했을 때는 정상인걸 확인해서 적용하려다가 디버그가 불편할 거 같아서 방법을 찾아서

[isOverFlowText]를 추가해서

  useEffect(() => {
    // 뒷배경보다 텍스트 길이가 긴지 체크
    const checkOverflow = () => {
      if (groupItemRef.current) {
        const roomName = groupItemRef.current.querySelector('div');
        const bgImg = groupItemRef.current.querySelector('img');
        if (roomName && bgImg) {
          const isOverflowing = roomName.scrollWidth > bgImg.scrollWidth;
          setIsOverFlowText(isOverflowing);
        }
      }
    };
    checkOverflow();
    window.addEventListener('resize', checkOverflow);
    return () => {
      window.removeEventListener('resize', checkOverflow);
    };
  }, [isOverFlowText]);

위와 같이 해결했다 이제 개발 모드에서도 정상 작동하는걸 확인했고 []와는 다른 이유는

[]는 일단 1회는 무조건 실행한다는 점인데 그로 인해 개발모드에서 2회 실행의로 다시 글자가 작아지는 이슈였고

isOverFlowText를 넣어줌으로써 2번째 실행때는 작동하지 않으면서 개발모드에서도 정상 작동이 되는 것으로 확인했다

 

이후 작업

api가 나오기 시작했음으로 axios세팅과 react-query세팅을 진행해보려 한다