모던 리액트 딥다이브

크로스 사이트 스크립팅(XSS)웹 애플리케이션에서 가장 많이 보이는 취약점 중 하나웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점이 취약점은 일반적으로 게시판과 같이 사용자가 입력을 할 수 있고, 이 입력을 다른 사용자에게 보여줄 수 있는 경우에 발생함악성 스크립트가 실행 되면, 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있음 리액트에서의 XSS 이슈dangerouslySetInnerHTML props특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법일반적으로 게시판과 같이 사용자나 관리자가 입력한 내용을 브라우저에 표시하는 ..

애플리케이션에서 확인하기create-react-app을 통해 만들어지는 reportWebVitals파일web-vitals라이브러리로 누적 레이아웃 이동, 최초 입력 지연, 최초 콘텐츠풀 페인트, 최대 콘텐츠풀 페인트, 첫 바이트까지의 시간 측정 가능create-next-app을 통해 만들어지는 앱의 성능 측정 메서드 NextWebVitalsMetric핵시 지표 외에도 Next.js에 특화된 사용자 지표 제공Next.js-hydration : 페이지가 서버 사이드에서 렌더링되어 하이드레이션하는 데 걸리는 시간Next.js-route-change-to-render : 페이지가 경로를 변경한 후 페이지를 렌더링을 시작하는 데 걸리는 시간Next.js-render : 경로 변경이 완료된 후 페이지를 렌더링하는 ..

사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항웹사이트를 방문한 목적을 손쉽게 달성할 수 있어야 함첫 번째 목적을 달성하는 데 걸리는 시간이 짧아야 함웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 함  웹사이트의 성능1초 내로 로딩되는 사이트는 5초 내로 로딩되는 사이트보다 전자상거래 전환율이 2.5배 더 높음0 ~ 5초의 범위에서, 1초 로딩이 늦어질수록 전환율은 4.42%씩 떨어짐페이지 로드 시간이 0~2초 사이인 페이지에서 가장 높은 전환율을 달성할 수 있음소비자의 70%는 페이지 속도가 온라인 커머스 사이트를 방문하는 데 영향을 미침 핵심 웹 지표(Core Web Vital)구글에서 만든 지표로, 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어..

Next.js 13app 디렉터리 등장/pages로 정의하던 라우팅 방식이 /app 디렉터리로 이동함파일명으로 라우팅하는 것이 불가능해짐 => 폴더명까지만 주소로 변환됨layout.js페이지의 기본적인 레이아웃 구성하는 요소해당 폴더에 layout이 존재하면 그 하위 폴더 및 주소에 모두 영향을 미침주소별 공통 UI 포함할 수 있음_app과 _document를 대신해 웹페이지를 시작하는 데 필요한 공통 코드를 삽입할 수 있음단, layout예약어를 필수적으로 사용해야 함children을 props로 받아서 렌더링 해야함page.jslayout을 기반으로 위와 같은 리액트 컴포넌트를 노출함error.js해당 라우팅 영역에서 사용되는 공통 에러 컴포넌트특정 라우팅별 서로 다른 에러 UI를 렌더링할 수 있음에..

리액트 17점진적인 업그레이드를 지원하기 위한 리액트의 일부 컴포넌트를 다른 버전으로 변경 가능이벤트 위임 방식의 변경기존 16에서는 이벤트 위임이 모두 document에서 수행 => 이미 모든 이벤트가 document에 있으므로 e.stopPropatation() 실행이 무색함17부터는 리액트 컴포넌트 최상단 트리인 루트 요소로 바뀜import 구문 없이도 JSX 변환 가능import React가 필요 없고, 불필요한 import문을 삭제해 번들링 크기를 약간 줄일 수 있음이벤트 풀링 제거이벤트 풀링 : SyntheticEvent 풀을 만들어서 이벤트가 발생할 때마다 가져오는 것이벤트 핸들러 내부에서 이벤트 객체에 접근할 때 비동기든 동기든 상관없이 일관적으로 코딩할 수 있음useEffect 클린업 함..

브라우저 개발자 도구일반적인 브라우저 환경에서 발생할 수 있는 문제를 디버깅할 수 있는 도구웹사이트를 불러올 때 발생하는 거의 대부분의 작업을 기록하고, 또 이와 관련된 많은 기능을 제공함  크롬 개발자 도구요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있음요소 화면현재 웹페이지를 구성하는 HTML을 나타냄이중 원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보 확인 가능웹페이지의 DOM을 직접적으로 수정하면 프로덕션으로 개발된 페이지에서 수정된 내용을 바로 확인 가능DOM 요소를 선택해 디버깅 위치를 설정할 수도 있음요소 정보스타일 : 요소와 관련된 스타일 정보계산됨 : 해당 요소의 크기, 패딩, 보더 마진과 각종 CSS 적용 결과값..

리액트 개발 도구란?리액트 팀은 리액트 애플리케이션의 원활한 개발을 위한 개발 도구인 react-dev-tools를 만들어 제공함리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어짐브라우저 확장 프로그램을 사용해 사용할 수 있음 Components 탭리액트 애플리케이션의 컴포넌트 트리 확인 가능컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보 확인 가능정보컴포넌트 트리해당 리액트 페이지의 컴포넌트 트리를 나타냄기명 함수로 선언된 컴포넌트는 해당 컴포넌트명을, 익명 함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여줌명확하게 컴포넌트를 확인하려면 기명 함수로 선언하는 것이 개발 도구에서 확인하는 데 많은 도움을 줌혹은 displayName 속성을 추가할 수 ..

useState와 useReduceruseState 여러 컴포넌트에 걸쳐 손쉽게 동일한 인터페이스의 상태를 생성하고 관리할 수 잇게 됨useReduceruseState는 useReducer로 구현이 된 훅임두 개의 훅 모두 만들기에 따라 재사용할 수 있는 지역 상태를 만들어 주지만 이는 지역 상태라는 한계 때문에 여러 컴포넌트에 걸쳐 공유하기 위해서는 컴포넌트 트리를 재설계 하는 등의 수고로움이 필요함  Recoil리액트를 만든 페이스북에서 만든 리액트를 위한 상태 관리 라이브러리최소 상태 개념인 Atom을 처음 리액트 생테계에서 선보임실제 프로덕션에 사용하기에는 안정성, 성능, 사용성을 보장할 수 없음Recoil의 상태값은 RecoilRoot로 생성된 Context의 스토어에 저장됨스토어의 상태값에 접..