리액트 + 테일윈드에서 외부사이트 svg 아이콘을 적용해서 사용하는데 콘솔에서 다음과 같이 에러가 나왔다.
당시 내가 사용했던 svg 아이콘
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
className="text-purple-300"
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
react 에서 tailwind를 사용할 때에는 class
가 아니라 className
으로 사용해야 하는데 확인하지 않고 적용만 하고 지나가버려서 위와 같은 에러가 나왔던 것.
그 외에도 자바스크립트에서의 스네이크 표기법을 따르지 않았을 경우에도
Warning: Invalid DOM property `%s`. Did you mean `%s`?%s
같은 오류가 콘솔에 뜰 수가 있다.
( 예를 들면 stroke-linecap
=>strokeLinecap
으로 고쳐야 함 )