09.25 항해 13일차 TIL

이제 슬슬 프로젝트를 시작 해야 하는데 나는 아직도 강의를 듣고 있다..
그래도 마지막 강의를 듣고 있으니 내일 부터는 프로젝트를 시작 하면 될 것 같다.
오늘은 숙제를 하다가 막힌 부분을 정리 해보려고 한다.

OX 버튼 클릭 시 다음 퀴즈가 나오지 않는다.

"숙제를 할 땐 해답을 절대 보지 않겠다!" 라는 다짐을 했었다.
그렇게 하나 하나 건드리다 보니 10시간이 지나고 나서도 해결이 안되는걸 보고 결국 나와 타협을 했다. "해야 하는 프로젝트도 있고 시간을 더 버릴 수 없으니 이 부분만 답을 보고 이해를 하자" 라는 생각으로 답을 봤는데 지식이 없으니 코드를 봐도 왜 그런식으로 작성 했는지 이해 하는데 한참 걸리더라..

어떻게든 이해하려 노력 했는데 아직도 잘 이해 한건지 모르겠다.

  React.useEffect(() => {
    if (user_answer_list.length === quiz_list.length) {
      history.push("/Score");
      return;
    }
  }, [user_answer_list]);

  if (user_answer_list.length === quiz_list.length) {
    return null;
  }

위 구문을 내 기준대로 해석 해보면

• useEffect를 사용해서 user_answer_list 의 값이 변할 때 마다 리랜더링을 한다.
• user_answer_list.length 와 quiz_list.length가 같아 질 때 /Score 페이지로 이동 한다.
• user_answer_list.length 와 quiz_list.length가 같아 질 때는 기존 페이지를 로드하지 말고 null 값을 return 한다.

특히 null 값을 return 하는 부분이 이해가 안되었는데 지금 작성하면서 생각 해보면 답변이 끝났을 때 기존 페이지를 보여 주면 안되니 넣어둔 구문이라고 생각한다.

문제 마다 다른 이미지를 보여주지 못한다.

숙제에는 없었던 부분이다.
강의는 이미지 하나로 모든 페이지에 띄워주는데 나는 매 문제마다 다른 페이지를 보여 주고 싶어서 되게 간단할거라 생각하고 시작한 수정사항 이였는데 이것 또한 답을 찾는데 오랜 시간이 걸렸다.

<div>
  <p>
  	<Highlight>{user_answer_list.length + 1}번 문제</Highlight>
  </p>
	<Progress />
      <h3>{quiz_list[user_answer_list.length].question}</h3>
</div>
      <Img src={img} />

기존에 이미지를 띄워주는 부분이다. 경로와 이미지명을 import하고 주소를 받아오는 방식이다.

내가 처음 시도한 방법은 정말 단순하게 "그냥 이미지 이름을 1 ~ 3 으로 하고 순서대로 넣어주면 되지 않을까?" 였었다.
어느 부분에서 1~3을 넣어줘야 하지 하다가 위에 있는 user_answer_list.length + 1 을 넣어 주고 import 1 from './img0.png' 을 입력하면 되겠다! 했는데 1 이라는 숫자를 import 하니 에러가 났다. {1}, [1], (1), '1' 별거 다 해봤는데 안되길래 이때 부터 쉽게 안되려나? 하는 생각을 했다.

다음 시도한 방법은 img+'1'을 하여 img1 ~ img3 까지 src 안에 넣어 주려고 했다.
이번엔 반환 한 값을 넣는거에서 애를 먹었다. 그러다가 팀원 분이 store에 넣어서 값을 가져오는건 어떠냐고 하셨는데 거기서 무릎을 탁 쳤다.
바로 store에 저장하고 크롬 개발자도구에서 img1 ~ img3 까지 잘 들어오는 것을 확인 했고, 확신에 차서 이미지를 넣었는데 이미지가 보이지 않아서 다음 방법을 생각 해보았다.

세번째는 'img1' 이름을 가진 이미지 하나를 넣어서 개발자도구에서 다시 src를 확인 해보니
'/static/media/img0.cb978cad.png' 이라는 주소로 바뀌어 있는걸 보고 단순 값을 넣어 주는 것으로는 import한 파일을 불러올 수 없다는 생각이 들어 img1~3을 하나씩 넣어 보고 주소를 찾아 store에 저장했다.

      img_list :[
        '/static/media/img0.cb978cad.png',
        '/static/media/img1.ccb9b972.jpg',
        '/static/media/img2.b0021b75.png'
      ]      

아무리 생각해도 이런 방법말고 다른 간편한 방법이 있을 것 같은데 아직은 문제 항목도 별로 없고 이렇게 해서 불러오니 이미지가 드디어 퀴즈마다 바뀌어서 들어왔다.
그래서 일단은 찝찝한 해결...

Progress Bar가 끝까지 동작하지 않는다.

이것도 숙제에는 없었는데 팀원 분께서 고민하던 문제를 나도 같이 고민하게 되었다.
문제별로 Progress Bar가 진행 되는데 마지막 문제를 풀었을 때 Progress Bar가 100%까지 차는 것을 보여주지 않고 바로 다음페이지로 넘어가는게 거슬려서 한참을 찾아 보았으나 결국 해결하지 못하고 다음으로 넘어갔다. 이번 프로젝트가 끝나면 꼭 다시한번 봐야겠다.