인스타그램 클론 코딩 중 오류

sumin·2022년 6월 4일

(1) console창에 뜨는 오류

warning: invalid dom property `crossorigin`. did you mean `crossorigin`?

딱히 문제가 없지만 계속 콘솔창에 저 오류가 뜨는게 너무 신경이 쓰였다.....
(사실 인스타그램 작동하는데 문제가 없어서 그냥 무시했다고 하는게 맞다ㅎ)
빨간색으로 경고를 날리는데 저걸 없애야 겠다는 생각이 들어 구글에 검색을 해봤다
그 결과 className을 camelcase 쓰지 않아 생긴 오류였다
fontawesome을 사용하며 link 태그에 crossorigin="anonymous"referrerpolicy="no-referrer" 에서 오류가 났던것!!

JSX는 HTML보다 JavaScript에 더 가깝기 때문에 React DOM은 
camelCaseHTML 속성 이름 대신 속성 명명 규칙을 사용합니다.

예를 들어, classJSX className에서는 tabindex -> tabIndex.

React 공식 사이트에서도 알려주는 중요한 부분 !!!! 앞으로 주의하자!!!!!


(2) input으로 댓글을 쓰면 한글은 잘 나오는데 영어/특수문자를 사용하면 안되는 오류

한글로 댓글을 작성하면 엔터도 클릭도 다 잘돌아가는데 왜 영어를 치거나 특수문자를 치면 이상한 걸까 고민하다가 내 코드 계속 보면 더 헷갈린다고 다른 동기분에게 물어봐서 해결했다 ㅎㅎ

const enterBtn = (event) => {
    if (event.key === "Enter") {
      setSpace((prevComment) => {
        return [...prevComment, comment];
      });
    } setComment("");
  };

△ 처음 작성했던 코드

const enterBtn = (event) => {
    if (event.key === "Enter") {
      setSpace((prevComment) => {
        return [...prevComment, comment];
      });
      setComment("");
    } else {
      setComment(event.target.value);
    }
  };

△ 수정한 코드

if문 끝나고 comment를 리셋시켜버린 게 문제였다 (그런데 한글은 왜 된거임....?????) 그래서 한 글자치고 사라지고 그랬던 것이었음... 단순한 문제였으나 나에겐 단순하지 않았던 문제 ㅎㅎ 더 열심히 공부 해야겠다!!

0개의 댓글