개발자 도구 오류 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로 바꿔주면 해결된다.
Author And Source
이 문제에 관하여(개발자 도구 오류 Debugging), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seunghwa17/개발자-도구-오류-Debugging저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)