개발자 도구 오류 Debugging

이 오류는 Next.js의 Link를 사용할 때 발생되었다. Next.js 공식문서를 읽어본 결과 'a' 태그를 빼 먹어서 발생하는 Warning이었다. Link를 쓸 때는 'a' 태그를 빼먹지 말자.

<Link href="/cart">
   <a> <AiOutlineShoppingCart /> </a> 
</Link>

이 오류는 map 함수를 사용할 때 key를 지정해주지 않아서 발생하는 오류였다.

<Slider {...settings}>
  {profile.map((profile)=> {
    return <LiveBroadCast profile={profile}/>;
  })}
</Slider>

이렇게 key를 빼먹지 말고

<Slider {...settings}>
  {profile.map((profile, i)=> {
    return <LiveBroadCast profile={profile} key={i}/>;
  })}
</Slider>

이렇게 key를 넣어서 쓰는 것을 잊지말자!

이 오류는 styled-component에서 text를 style 할 때

const HeaderStyle = styled.head`
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: ${({ theme }) => theme.colors.white};
  text-align: center;
  z-index: 999;
`;

이처럼 styled.head를 써서 발생하는 오류였다.

'h' 태그는 'div' 태그의 자식이 될 수 없기 때문이다.

const HeaderStyle = styled.div`
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: ${({ theme }) => theme.colors.white};
  text-align: center;
  z-index: 999;
`;

이렇게 styled.div로 바꿔주면 해결된다.