🔎 뭐가 문제였을까
며칠 전부터 개발자 도구 콘솔에 제목과 같은 경고 메시지가 떴다. 사실 페이지 작동에는 문제가 없어 무시하고 진행하다가 (이런 마인드로 절대 개발하면 안 된다는 것을 알면서도 🧎♀️) 개발이 진행될수록 문제의 원인을 찾기 힘들어질 것 같아 별로 개발된 게 없는 시점에 빠르게 해결하고 넘어가기로 결정했다.
Warning: Invalid DOM property
class. Did you meanclassName?
경고 메시지 내용만 보면 돔 프로퍼티를 className으로 지정하지 않고 class로 지정해 생긴 문제인 것 같았다. 그런데 현재 리액트로 프로젝트를 진행 중이라 class 프로퍼티를 사용한 적은 없어 의문이 들어 콘솔에 적힌 원인의 경로를 훑어보니 이랬다.
class가 여기 왜 있지.
알고 보니 내가 친 사고였다....
팀원들과 회의를 진행하며 기본적이거나 통용되는 아이콘은 브라우저 호환성 문제가 적은 fontawesome을 사용하기로 했었는데, 해당 아이콘을 적용하는 과정에서 아무 생각 없이 CTRL+C, CTRL+V를 하는 바람에 경고 메시지가 계속 페이지를 괴롭혔던 것이다. 😰
프로퍼티를 위처럼 className으로 변경해 주니 모달이 나타나도 더 이상 경고 메시지가 나타나지 않았다. 사소한 실수일수록 조심하자....
👀 REFERENCE
기록의 습관화 📝