배포전에 WARNING 하나씩 없애보기

이제 개인프로젝트를 배포하기전에 좀 더 깔끔한 코드를 위해

마지막 점검을 하고있다.

이번 게시글에선 개발하는동안 문제없었지만

리액트에서 엄마의 마음으로 해주는 잔소리를

하나씩 하나씩 체크하면서 해결하는것을 기록할 것이다.

 

현재 코드에선 5개의 피드백을 주고있다.

WARNING in src\component\about.js
  Line 9:13:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src\component\header.js
  Line 38:35:  Expected '===' and instead saw '=='
            eqeqeq
  Line 51:34:  The ref value 'documentRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'documentRef.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
  Line 52:8:   React Hook useEffect has a missing dependency: 'throttleScroll'. Either include it or remove the dependency array
            react-hooks/exhaustive-deps
  Line 70:52:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
            jsx-a11y/alt-text

 

 

 

1. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

img태그에는 alt 속성을 추가하라는것이다.

alt는 이미지를 보여줄 수 없을 때 이미지를 대체해줄 텍스트를 넣어두는것이다.

이외에도 검색엔진이 alt를 통해 이미지의 정보를 얻어가기도한다.

앞으로 잘 챙겨주자! 

//변경 전
<img src={sae}></img>
//변경 후
<img src={sae} alt="saemoi character"></img>

 

2.Expected '===' and instead saw '=='

===가 예상되는데 내 코드는 ==를 쓰고있다는것이다.

사실 저기 쓰이는 코드는 무조건 Num을 비교하기때문에 ==로도 문제 없다.

==는 값만 비교하며, ===는 값과 타입을 모두 비교해서 불린값을 준다.

그렇다고 맹목적으로 ==를 기피하고 ===만 사용해야하는것은 아니다.

특히나 자바스크립트가 유연한 언어기때문에 더욱 그렇게 생각한다..

상황에따라 사용하면 될 것 이다. 지금은 WARNING 없애기중이기때문에 변경해주었다.

//변경 전
const hide2 = pageYOffset == 0 && deltaY >= 0;
//변경 후
const hide2 = pageYOffset === 0 && deltaY >= 0;

 

3.The ref value 'documentRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'documentRef.current' to a variable inside the effect, and use that variable in the cleanup function

useEffect가 cleanup을 리턴할 때 document를 지정한 useRef가 참조하는 값이 변경되어있을 수 있으니

useRef를 카피하여 useEffect안에 넣어주고, Effect에 들어가는 Ref변수를 방금 복사한 변수로 사용하라는 말이었다.

//변경 전
const documentRef = useRef(document);

useEffect(() => {
    documentRef.current.addEventListener('scroll', throttleScroll);
    return () => documentRef.current.removeEventListener('scroll', throttleScroll);
}, [pageY]);
    
//변경 후
const documentRef = useRef(document);

    useEffect(() => {
    const documentRefCopy = documentRef; // ref 할당
    documentRefCopy.current.addEventListener('scroll', throttleScroll);
    return () => documentRefCopy.current.removeEventListener('scroll', throttleScroll);
}, [pageY]);

 

4.React Hook useEffect has a missing dependency: 'throttleScroll'. Either include it or remove the dependency array

useEffect의 throttleScroll 종속성이 누락되었으니, 종속성을 추가시켜주거나 종속성 배열을 제거하라 한다.

 

useEffect가 throttleScroll 함수를 사용하고, throttleScroll 함수는 handleScroll를 콜백하고있다.

throttleScroll, handleScroll 모두 useEffect외에는 사용되지않기때문에 코드블럭 안으로 넣어주었다.

//변경 전
    const handleScroll = () => {
        const { pageYOffset } = window;
        const deltaY = pageYOffset - pageY;
        const hide = pageYOffset !== 0 && deltaY >= 0;
        const hide2 = pageYOffset === 0 && deltaY >= 0;

        setVisible(hide2);
        setHide(hide);
        setPageY(pageYOffset);
    };

    const throttleScroll = throttle(handleScroll, 50);

    useEffect(() => {
        
       const documentRefCopy = documentRef;
        documentRefCopy.current.addEventListener('scroll', throttleScroll);
        return () => documentRefCopy.current.removeEventListener('scroll', throttleScroll);
    }, [pageY]);

//변경 후
    useEffect(() => {
        const handleScroll = () => {
            const { pageYOffset } = window;
            const deltaY = pageYOffset - pageY;
            const hide = pageYOffset !== 0 && deltaY >= 0;
            const hide2 = pageYOffset === 0 && deltaY >= 0;
    
            setVisible(hide2);
            setHide(hide);
            setPageY(pageYOffset);
        };
        const throttleScroll = throttle(handleScroll, 50);

       const documentRefCopy = documentRef;
        documentRefCopy.current.addEventListener('scroll', throttleScroll);
        return () => documentRefCopy.current.removeEventListener('scroll', throttleScroll);
    }, [pageY]);

 

5. 1번과 동일하다.

//변경 전
<Link to="/"><div className="logo"><img src={logoSVG}/></div></Link>

//변경 후
<Link to="/"><div className="logo"><img src={logoSVG} alt="logo"/></div></Link>

 

 

후기

오늘 제일 주의해서 공부해야할 것은 3번과 4번이었다.

3번은 useRef에 할당된 요소가 useEffect에서 사용될 때 어떤 상태인지 불확실하기때문에 경고를 준다고 하지만,

 

4번은 WARNING은 해결했지만 이해가 가지않았다.

사용되는 함수를 Effect 코드블럭 밖에 미리 선언해두고, Effect로 인해 호출만 되는 상황이라 생각하는데

Effect 코드블럭 안으로 함수를 넣게된다면 Effect 실행마다 함수를 선언하고 호출까지 해야하기때문에

더 많은 일을 하는것이 아닌가싶었다.

이건 알아보고와서 다시 기록하겠다.