Memoization 기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 기법이다. Memoized된 내용을 재사용하여 렌더할 시, 가상 DOM에서 바뀐 부분을 확인하지 않아 성능이 향상된다. Memoization 방법 1️⃣ Redux - useSelector useSelector로 Redux를 최적화하는 방법 ① useSelector를 여러번 사용 store에서 객체를 통째로 불러오는 대신, 필요한 값들을 쪼개어서 useSelector로 선언해준다. └ number 또는 diff가 바뀌었을 때만 리렌더링 된다. ② shallowEqual 사용 shallowEqual은 react-redux에 내장되어있는 함수로, 객체 안의 가장 겉에 있는 값들을 비교해준다. ③ equality ..
Optimistic UI Optimistic UI(낙관적인 UI ?)는 특정 요청이 성공 할 것이라 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 어떤 요청이 아주 높은 확률로 성공한다는 보장이 있을 때, 그리고 그 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하면 된다. Optimistic UI - 세 UI의 이야기 세 UI는 술집에 간다. 첫 UI는 술을 한 잔 주문하고, 그 후로도 몇 번 더 주문한다. 몇 시간 후, 그는 계산을 하고 취해서 술집을 나선다. 또다른 UI는 한 잔을 시키면서 계산을 먼저하고, 이후로도 먼저 계산하고 마시기를 반복하다 취해서 술집을 나간다. 마지막 UI는 술집에 들어서자마자 취해서 바로 다시 나온다. - 그..
LazyLoad vs Preaload Preload 웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이 때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 PreLoad를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 PreLoad로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. └ "이미지 보여주기" 버튼을 클릭하지도 않았는데 이미지가 우선적으로 요청이 된 것을 확인할 수 있다. Preload를 올바르게 사용하기 불필요한 리소스에 Preload는 걸지 않기 우선 preload로 선언되는 순간, 해당 소스가 실제로 사용하든..
Promise all 우선 MDN의 Promise.all을 살펴보자 !! Promise.all이란 ? Promise.all() 메서드는 MDN에서 이렇게 설명되어있다. Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부한다. 더 자세히 알아보기 !! Promise.all() - JavaScript | MDN Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하..
Observable 1️⃣ Observable Observable은 observer가 구독(subscribe)하는 대상이다. Observable이 아이템을 방출하면 observer가 반응(react)한다. 이 패턴은 동시성 연산(concurrent operation)을 편하게 해준다. ┌ 블록 상태에서 Observable이 아이템을 방출하길 기다릴 필요가 없다. └ 대신, observer가 보초처럼 서서 적절하게 반응(react)할 준비를 하고 있다. 2️⃣ 배경 ReactiveX에서는 Observer에 의해 명령어들이 병렬(parallel)로 실행되고, 결과값이 임의 순서로 나중에 반환된다. 데이터를 어떻게 가져오고 변환할지에 대한 매커니즘을 Observable 형태로 정의를 한다. 그 다음, 이 Ob..
token, XSS, CSRF KWT에는 두가지 종류의 토큰이 있다. ┌ Access Token └ Refresh Token Access Token Access Token을 통해서 민감한 정보에 접근할 수 있으며 두 가지 토큰중에서 실제 권한에 접근하는 토큰이다. 짧은 유효기간을 가진다. Refresh Token Refresh Token을 통해서 만료된 Access Token을 발급받을 수 있다. Access Token보다 긴 유효기간을 가진다. 이 때, 유저는 다시 로그인하지 않아도 된다. Refresh Token이 탈취당하면, 위험하기에 정보에 민감한 사이트는 Refresh Token을 사용하지 않을 수 있다. JWT의 구조 JWT의 구조는 Header / Payload / Signature로 이루어..
