BF-TEST - 이미지 로딩속도 개선 및 통신 방법의 수정

권기현·2020년 5월 10일

BF-TEST WeCode 위코드

사이드프로젝트

목록 보기

2/2

- 개선사항

1. 데이터 통신방법

처음 코드를 짤 때 문제에 대한 응답을(onClick 이벤트가 일어날 때 마다) 할 때에 다음 문제에 대한 인덱스를 통신하는 url의 쿼리스트링에 담는 방식로 통신하였다.
각 문제마다 통신을 매번하는 것이다.

이는 그때 그때 받아오면 딜레이가 생길 수 밖에 없어서 사용자 경험 측면에서 좋지 않다.

-QuesMain.js

const fetchFirstQuestion = async () => {
  try {
    const gotFirstQues = await axios.get(`${URL}/poll/${quesNumUrl}`);
    const data = await gotFirstQues.data.question_data;

    setData(data);
    // setAppearChoice(false);
  } catch (error) {
    console.log(error);
    alert("다시 시도 바랍니다.");
  }
};

//문제의 인덱스에 따라 통신함.
useEffect(() => {
  if (quesNum === 1) {
    setTimeout(() => {
      fetchFirstQuestion();
    }, 13500);
  } else if (quesNum === 14) {
    props.getData(pickedData, type);
    props.getLoadingStatus(true);
  } else {
    fetchFirstQuestion();
  }
}, [quesNum]);

⇒ 지금 블로그를 작성하면서 보니 통신하는 함수를 담은 변수의 이름을 처음 코드를 작성하는 단계의 변수명을 그대로 사용하여 가독성을 떨어뜨리는 변수명 을 그대로 사용하였었다. 반성!!!

2. 이미지를 미리 띄워놓지 않았다(?)

문제가 바뀔 때 마다 매번 통신하여서 이미지를 받아와 렌더시키는데 시간이 꽤 걸렸고, 때문에 이미지가 늦게 뜨거나 이전 문제의 이미지가 뜨거나, 심지어는 아예 뜨지 않는 경우도 있었다.
매 문제마다 통신을 하기 때문에 이미지가 늦게 렌더된다고 생각하여 후에 통신방식을 애초에 모든 문제를 받는 방식으로 바꾼 후에도 이미지 렌더 속도는 개선되지 않았다.

- 수정

1. 데이터 통신방법 - 수정

문제를 띄우는 컴포넌트의 부모 컴포넌트(main)가 렌더될 때 한번에 모든 문제의 데이터를 받아 state에 저장하는 방식으로 코드를 수정하였다.
state에 저장된 문제 데이터들은 onClick 이벤트가 일어날 때에 저장된 데이터의 인덱스에 접근하여 렌더될 수 있도록 하였다.

-Main.js

const [wholeData, setWholeData] = useState([]);
.
.
.
  const fetchWholeQues = async () => {
    try {
      const gotWholeQues = await axios.get(`${URL}/poll/question`);
      const data = await gotWholeQues.data.question_data;
      setWholeData(data);
    } catch (error) {
      console.log(error);
      alert("다시 시도 바랍니다.");
    }
  };

  useEffect(() => {
    fetchWholeQues();
  }, []);

⇒ 저장된 전체 문제에 대한 데이터를 props로 전달하여 해당하는 문제의 인덱스에 접근하여 렌더시켰다.

2. 미리 이미지를 띄워놓기

통신방법을 한번에 모든 데이터를 받는 방식으로 바꾼다고 이미지가 빨리 렌더되는 것이 아니라, 미리 모든 이미지를 한번은 렌더시켜야만 사용자가 테스트를 진행할 때에 이미지가 바로 렌더될 수 있었다.

-Main.js > QeusWindow.js

{props.wholeData &&
            props.wholeData.map((quesData, i) => {
              return (
                <LoadingImg
                  src={quesData.image_url}
                  alt="로딩용 이미지"
                  key={i}
                ></LoadingImg>
              );
            })}