Suspense란? 서스펜스를 사용하면 자식 컴포넌트가 로딩을 완료 할 때 까지 폴백 UI를 노출 할 수 있다. 서스펜스로 감싸지면, 리액트는 자식에게 필요한 모든 코드와 데이터가 로드 될 때 까지 로딩 폴백을 표시한다. 기존에는 JS 번들을 스플리팅하고 웹 자원 중 코드를 lazy loading 하는데 쓰였지만, React 18 부터는 어떤 것이든 기다릴 수 있는 기능으로 확장되었다. 즉, 이미지 / 스크립트 / 그 밖의 비동기 작업을 기다리는데에 모두 사용 될 수 있다. Suspense가 활성화 되는 상태 Relay 및 Next.js와 같은 Suspense 도입 프레임워크를 사용한 데이터 페칭 lazy 를 사용한 지연 로딩 컴포넌트 코드 Suspense 는 Effect 나 이벤트 핸들러 내부에서. 페칭하는 경우를 감지하지 않는다. Suspense는 어떻게 동작할까? Suspense 는 하위 children들의 비동기 상태를 감지 할 수 있다. 그렇다면 어떻게 알 수 있는걸까? …

1. 데이터 검증, 언제 얼마나 해야할까? 목적과 대상 사용자에 따라 구분하여 검증하기 브라우저 브라우저는 클라이언트의 영역 사용자의 경험이 중요한 영역 검증도 그에 따라서 부드럽게, 매끄럽게 잘 되어야 한다. 즉 검증은 오지 사용자의 경험을 낫게 하는데에 의의를 두어야 한다. 추후에 서버에서 에러를 일으킬 것을, 적절한 메시지와 타이밍에 미리 사용자에게 알려주어 더 나은 경험을 제공하는 것 따라서 서버쪽 검증에 완전히 의존적일 수 밖에 없다. 브라우저 단계에서 어떤 값이 실제로 유효할지에 대한 의의는 전혀 필ㅛ 없다. 데이터를 받는 서버 입장에서, 그 데이터가 적절한 클라이언트로부터 왔는지 검증할 방법이 없으므로. 즉, 서버 입장에서는 요청으로부터의 데이터를 단 하나도 신뢰할 수 없다. ref - https://elvanov.com/2414 2. RCP와 tRCP RCP 란? Remote Procedure Call 의 약자 하나의 컴퓨터에서 다른 컴퓨터로 함수를 호출하는 방법 전…

1. userAgent 사용자가 접속중인 브라우저 , OS, 버전 등의 정보를 담고 있다. 브라우저는 서버에 보내는 모든 요청에 userAgent 문자열이라고 부르는 자신의 정체성을 알리는 헤더를 싣어 보낸다. 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함한다. 클라이언트에서는 Javascript 의 속성을 통해서 userAgent 문자열에 접근 가능하다. 언제 사용할까? 웹 브라우저의 종류가 많고, 각각의 엔진을 사용하던 시절에는 각 브라우저별로 동일한 서비스를 제공하기 위해서 사용되었다. 하지만 현재 대부분의 브라우저들이 크롬/블링크 엔진을 사용하고 있기때문에 현재는 브라우저에 대한 정보보다는 접속한 컴퓨터 OS, 모바일 디바이스를 구분하는 역할로서 많이 쓰인다. 예를들어, 사내 서비스에서는 두가지 목적으로 사용한 경험이 있다. 사용자 접속 환경(모바일/데스크톱)에 대한 로그를 남기기 위해. 모바일 디바이스에서 접속 중인지 여부를 확인하기 위해 ref …

1. Meta tag - CSP 알아보기 요렇게 되어있는 메타태그의 역할은 뭘까?😯 http-equiv 어트리뷰트 : HTTP 와 동등을 의미하며, 웹 브라우저에게 해당 메타 태그의 Content 에 들어가는 내용이, HTTP 헤더와 동등한 Content임을 의미한다. 예를들어 로 설정할 경우, 브라우저에게 페이지를 30초마다 새로 고침하도록 요청하는 것과 동일하다. 또한 Content-Type이나, Content-Language, Content-Security-Policy와 같은 HTTP 헤더와 관련된 메타정보를 지정할 수 있다. 메타 정보란 ? 다른 데이터를 설명하거나 제어하는 데이터 Content-Security-Policy (CSP) 는? 웹앱의 보안을 강화하기 위한 보언 메커니즘 중 하나로, CSP 는 웹앱에서 실행되는 스크립트, 스타일시트, 이미지 등의 리소스가 로드 되는 방식을 제어한다. Content 어트리뷰트 : 위에서 언급했듯, http-equiv 어트리뷰트에 …