반응형 개발/React54 react-helmet을 쓴다고 index.html을 비워두면 안된다 몇주전 회사 내부 플랫폼에 메타태그를 작성할 일이 있어서 app.tsx에 Helmet으로 메타태그를 작성했다. 그리고 어제 갑자기 연락이 왔다. 구글 검색엔진에서 untitled가 뜬다고 이유를 알게 되었다. 내가 React-helmet을 아주 단단히 잘못 알고 있었던 것이다. React-helmet이 SSR로 를 작성해주는 건 줄 알았는데 그게 아니었다. (이래서 대충 알고 있는게 아예 모르는 것보다 무섭다고 하는 가보다) index.html에 default 가 있어야 했다. CSR을 통해 각 페이지가 그려질 때 react-helmet이 DOM을 변경한다. 크롤러는 페이지가 그려지기전의 index.html을 읽게 된다. => 검색 엔진 최적화를 하려면 항상 서버 사이드에서 만든 문서에 크롤러에게 노출할.. 2022. 7. 12. try/catch : 렌더링중에 발생하지 않는 이벤트 핸들러에서의 에러처리 try/catch를 나는 사용한 적은 없고, 항상 남이 사용하는 것을 유지보수 하기만 했다. 대충 에러처리를 위한 코드라는 것을 주워듣긴 했지만 이번에 공식문서에 들어가서 확인해보았다. 리액트의 이벤트핸들러 리액트의 이벤트핸들러는 렌더링중에 발생하지 않는다. 즉 이벤트 핸들러에서 문제가 생겨도 리액트는 여전히 화면에 무엇을 표시해야 할 지 알고 그 행위를 위해 작동한다. 이벤트핸들러 내에서 문제가 발생해도 계속 작동 => 잘못된 화면이 렌더링 될 수 있음 때문에! 이벤트핸들러 내에서 에러를 잡아야 하는 경우 try/catch구문을 이용하라고 공식문서에서 이야기한다. const handleSubmitCodeProblem = async () => { try { //로직 } catch (error) { //t.. 2022. 7. 1. JSX에서의 라벨링 스크린 리더를 사용하는 사용자를 위해 HTML 폼 컨트롤(, )은 자세한 설명이 담긴 라벨을 제공해야 한다. 표준 HTML에서의 라벨링 예시는 다음과 같다. First name: Subscribe to newsletter JSX에서의 라벨링 리액트에서 라벨링을 할때 for어트리뷰트는 JSX에서의 htmlFor로 사용해야 한다. Name: 2022. 6. 30. Fragment를 이용하면 HTML의 의미를 해치지 않을 수 있음 Fragment 회사 홈페이지 유지보수를 하다가 가끔씩 보았던 녀석들이다. 그냥 의미없는 와 같다고는 대충 추측을 했었다. 정확히는 어떤 의도로 만들었을까?? JSX가 JS로 변환되기 위해 리액트의 리턴문은 반드시 하나의 태그로 감싸져 있어야 한다. 이때 리액트가 작동하게 하기 위해 의미없는 태그를 작성함으로써 HTML의 의미를 깨뜨리곤 한다. (정보의 의미가 강조되는 HTML 엘리먼트를 사용하면 자연스럽게 접근성이 강조된다.) 특히 목록 , 혹은 태그를 사용할때 문제가 나타난다. 이 경우 Fragment를 사용하여 여러 엘리먼트를 하나로 묶어주는것이 권장된다. import {Fragment} from 'react'; ... function Glossary(props) { return ( {props.i.. 2022. 6. 30. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음 반응형
