코드를 위한 기록

14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점dangerouslySetInnerHTML prop__html 키(문자열 값)를 가진 객체를 인수로 받아 DOM에 표시script 태그를 넘기는 경우 해당 코드가 실행될 수 있음(브라우저마다 다름) useRef를 활용한 직접 삽입a 태그에 잘못된 herf 삽입onclick, onload 등 이벤트를 활용한 XSS 리액트에서 XSS를 피하는 방법제 3자가 삽입할 수 있는 HTML을 안전한 HTML로 치환(sanitize, escape)- DOMpurify- sanitize-html- js-xss 이러한 치환 과정은 되도록 서버에서 수행하는 것이 좋음서버는 클라이..

12.1 웹사이트와 성능접근성, 속도, 보안 페이지 로드 시간이 0~2초인 페이지가 가장 높은 전환률 달성전체 웹페이지를 표시하는데 필요한 최적의 평균 리소스 요청 수는 50회 미만페이지 로드 시간이 1초에서 10초로 늘어날수록 모바일 사이트 이탈률이 123% 증가 12.2 핵심 웹 지표란?Core Web Vital뛰어난 사용자 경험을 제공하는 데 필수적인 지표 12.3 최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint)DOMContentLoaded 이벤트는 HTML 문서를 완전히 불러오고 파싱했을 때 발생하는 이벤트이지만스타일시트, 이미지, 하위 프레임의 로딩은 기다리지 않기 때문에 해당 이벤트가 발생하더라도 사용자는 로딩 중이라고 인식할 수 있음 최대 콘텐츠풀 페인트는 페이지..

11.1 app 디렉터리 라우팅layout.js페이지 탐색 중에 리렌더링을 수행하지 않음(= props로 searchParams를 받을 수 없음)search parameter만 다르게 라우팅을 시도하는 경우 layout을 리렌더링하는 것이 불필요하기 때문 error.js레이아웃 내부에 에러 바운더리 존재- 클라이언트 컴포넌트여야 함- reset을 props로 받음- 같은 수준의 layout에서 에러가 발생할 경우 상위 error.js로 이동 route.jsHTTP 요청route.js가 존재하는 폴더 내부에는 page.js가 존재할 수 없음 11.2 리액트 서버 컴포넌트11.2.1 기존 리액트 컴포넌트와 서버 사이드 렌더링의 한계서버 사이드 렌더링정적 콘텐츠를 빠르게 제공, 서버에 있는 데이터를 손쉽게 제..

10.1 리액트 17새로운 기능 없음수정이 필요한(호환성) 변경 사항을 최소화함 10.1.1 리액트의 점진적인 업그레이드를 위한 일부 컴포넌트 변경업데이트를 위한 업데이트 유의적 버전을 기반으로 주 버전이 릴리즈 된다면 수정된 API, 지원중단된 API를 파악해 대처해야 함리액트 17부터는 두 가지 버전이 공존하는 점진적인 업그레이드가 가능해짐 관리 지점이 많아져 이상적인 방법은 아니지만 버전을 올리기에 부담이 큰 애플리케이션인 경우 고려할만 함 10.1.2 이벤트 위임 방식의 변경document 이벤트 위임에서 div#root 이벤트 위임으로 변경 점진적인 업그레이드 지원,document에 이벤트가 바인딩됨으로써 바닐라js, jquery가 혼재되어 생기는 혼란이 방지하기 위함(이벤트 버블링) 10.1...

tsconfig.json// tsconfig.json{ // 자동 완성 "$schema": "https://json.schemastore.org/tsconfig.json"} compilerOptionstarget: 타입스크립트 변환 목표(= 사용될 환경)lib: esnext 신규기능, dom 브라우저 api 사용할 수 있게 함skipLibCheck: 라이브러리의 d.ts를 검사하지 않음 보안 취약점이 있는 의존성 모듈 덮어쓰기// package.json// npm의 overrides 활용{ "overrides": { "minimatch": "^3.0.5" }} 도커라이즈애플리케이션을 신속하게 구축해 배포할 수 있는 상태로 준비하는 것(도커 이미지 만들기) 이미지: 컨테이너를 만드는 데 사용..