Partytown 사용하여 외부 스크립트 로딩 최적화 하기 왜 필요할까? 프로젝트에서 사용하는 외부 스크립트가 많아지면, 스크립트 로딩 시간이 길어지고 (해당 스크립트가 로딩하는 js 파일의 크기가 커질수록!), 이에 따라서 메인 스레드가 블로킹 되어 성능 측면으로 좋지 않다. 어떻게 해결할까? parytown 이라는 라이브러리는, 기존의 메인스레드에서 처리하던 외부스크립트 로딩을 웹 워커로 위임한다. 하지만 웹 워커는 window, document, localStorage와 같은 메이저한 api 에 접근이 불가능하다. 웹 워커가 뭔데? 자바스크립트는 싱글 스레드 기반으로 작동하고, 싱글 스레드로서의 단점을 보완하기 위해서 코드가 비동기로 실행된다. 하지만 비동기 실행이 계속 쌓이면, 모든 작업의 실행 속도가 느려진다. 이러한 문제를 해결하기 위해 나온 것이 웹 워커이다. 웹 워커는 멀티 스레드를 지원하고, 워커에서 작성된 스크립트는 메인 스레드에서 분리되어 독립된 스레드로 실행되…

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 …