파이널프로젝트 오류 기록

Bien·2022년 4월 22일
0

내 코드는 너무너무 오류가 많아🙃

매일매일 하는 삽질

이제 찐으로 얼마 안남은 파이널프로젝트를 진행하던 중 사실 그동안은 촉박하고 너무 얼레벌레 진행해서 기록할 생각을 못했는데...이번엔 주말이기도 하고 조금 시간이 있어서 오류 기록을 해봤다.

내가 구현하고 싶은것. 서버에서 유저의 구독 정보를 가져와서 화면에 구독중이면 밝게, 아니면 어둡게 처리하고 싶었다.

진짜 초면인거 같은 리액트로 거의 핥듯이 배워서 파이널 하면서 다시 공부중 콘솔에 구독 정보 찍는거 까진 성공을 했는데
이걸 어떻게 화면에 표현하냐...를 고민하다가 className을 active와 disabled를 사용해서 true일땐 active, false면 disabled가 나오도록 삼항연산자를 사용해 구현하면 될거 같아서 그렇게 해보기로 했다.

const [isOtt, setIsOtt] = useState();
  const userCode = 1; //임시
  useEffect(() => {
    (async () => {
      try {
        const res = await axios.get(`${BASE_URL}/user/${userCode}/ott`);
        // res.data? setIsOtt(true) : setIsOtt(false);
        console.log(res.data);
        setIsOtt(res.data);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);
  return (
  	<Button id="ott_logo" className={isOtt ? 'active' : 'disabled'}><img src = ""></Button>
  )

대충 생략할건 하고... 이런 코드를 짰다.

여기서 첫번째 멍청한 짓. 발생!

모든 버튼이 active로 나와서 다 밝게 보이는 문제가 생겼다. 진짜 한참을 혼자 삽질하다가 결국 개발자 오픈카톡방 가서 질문해서 해결함😅
className에서 isOtt가 있냐 확인하는데 isOtt 값은 {netflix: true, wavve:false, tving: true}이런 식인데 내가 진짜 너무 멍청하게도 그냥 isOtt ? 이러고 있으니 해당 ott가 true인지 false인지 확인을 못하는게 당연했던것.

지금 글 쓰면서 당연하다 생각하는데 하는데 그 당시에는 어떻게 하는건데 하면서 계속 삽질하고 있었다🥲 도대체...

return (
  	<Button id="ott_logo" className={isOtt.netflix ? 'active' : 'disabled'}><img src = ""></Button>
  )

아무튼 이런식으로 코드를 변경했다. 그러니까 안됨.

이번엔 또 뭔데...아무튼, 두번째 오류. 발생!

이번엔 화면에 아무것도 안보이더라... 단톡방에서 알려주신 분이 예상하신대로 콘솔창을 가보니 거기엔 또 오류가 터지고 있었다🤯보기만 해도 괴롭다 진짜.. 암튼 undefined 오류가 발생했다. 이럴때는 optional chainning 연산자 ?. 을 사용하라고 해서

return (
  	<Button id="ott_logo" className={isOtt?.netflix ? 'active' : 'disabled'}><img src = ""></Button>
  )

했더니,
짜잔 원하던 대로 구현이 되었다. 데이터를 바꿔주면
이렇게 잘 바뀌어서 나오는것을 확인 할 수 있다.

옵셔널 체인징에 대해서는 별도로 글을 남기고 링크 추가할 예정!

profile
🙀

0개의 댓글