Optimistic Update
서버에 요청이 잘 갔겠지~ 하고 긍정적으로 생각하여 업데이트 하는 방식
보통은 서버에 업데이트 요청을 보내고, 클라이언트는 서버의 응답을 받아 새로운 정보를 화면에 렌더링 하지만,
정규 표현식
크로스 브라우징
여러 브라우저 사이에 오류 없이 같은 경험을 제공한다는 의미
-
CORS
Cross-origin resource sharing 즉, 서로 다른 출처 사이의 리소스 공유 정책
서로 다른 도메인 간에 데이터를 주고 받을 때 발생하는 오류예를 들어 우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하 여 마음대로 API를 호출하여 사용한다면 문제가 된다.
서로 다른 도메인이 나왔을 때, 동일한 출처끼리만 데이터를 주고 받을 수 있다는 '동일 출처 정책' 때문에 CORS
해결 > 화이트 리스트인 Access-Control-Allow-Origin 헤더를 설정하여 미리 일러둔 출처끼리는 데이터의 공유를 할 수 있도록 허가해주는 것입니다화이트리스트 = 예외적으로 접근 가능한 대상을 지정하는 방식
favicon
:
우리가 사용하는 웹 브라우저의 탭을 보시면 타이틀이 있고, 그 앞에 조그마한 아이콘이 있는데 그게 바로 파비콘입니다.
Next.js의 app router에서 app 폴더의 루트에 favicon.ico 파일브라우저 호환성
: 웹 애플리케이션이 다양한 브라우저에서 동일하게 동작하고 표시되는 것
테스트 위해 CrossBrowserTesting 등의 도구 사용
Lighthouse
웹 페이지의 성능, 접근성, SEO 등을 분석하는 오픈 소스 도구입니다.
- Web Vital은 웹 페이지의 사용자 경험을 측정하는 주요 지표로, LCP(최대 콘텐츠 렌더링 시간), FID(최초 입력 지연), CLS(누적 레이아웃 이동)을 포함합니다.
- Lighthouse를 사용하여 페이지 성능을 진단하고, 제안된 개선 사항을 적용하여 Web Vital을 최적화할 수 있습니다.-
쿠키, 세션, 웹스토리지의 차이
모두 클라이언트 측에 데이터를 저장하고 관리하는 방법쿠키는 클라이언트의 브라우저에 저장, 보안: 상대적으로 낮음, 사용 예시: 로그인 상태 유지, 사용자 선호 설정 저장
세션은 서버에서 사용자 정보를 유지하는 방법.
브라우저 세션 동안 유효하며, 브라우저를 닫으면 세션이 종료, 타임아웃 설정 가능
사용자 인증 정보 관리,
클라이언트 측에 저장되므로 보안에 주의 필요
로컬스토리지와 세션스토리지로 나뉨
둘 다 클라이언트 브라우저에 저장.
세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.- lazy Loading
우리가 페이지 즉, 서버에 처음 들어갈 때 상대적으로 중요도가 떨어지거나
당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서
-리액트 레이지
4.브라우저의 렌더링 과정
HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM 트리 결합 - 레이아웃 계산(필요한 공간 계산) - 페인팅 단계
