Jaeilit

재조정 공식문서 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 이전글에서 브라우저 렌더링 과정을 살펴 봤습니다. 브라우저가 HTML 파싱하여 렌더트리를 구성하고 레이아웃을 계산하여 페인팅을 하는데 DOM 요소의 추가 또는 width height 같이 위치값 변경이 일어나면 Reflow가 일어나서 렌더트리를 재구성하게 됩니다. SPA 의 스택기반의 페이지들은 dom 요소의 변화가 빈번하기 때문에 Reflow 는 많은 연산을 요구함으로 비용이 많이 드는 작업입니다. 이는 성능과도 연결이 되므로 리플로우를 최소화하는 것이 성능을 향상시키는 방법이 됩니다. 재조정과 가상돔 처음에..

앞에 글에서 URL 을 입력했을 때 DNS 서버에서 IP 를 반환받아 해당 IP 주소의 서버에서 리소스를 받아오는 것까지 알아봤습니다. 받아온 리소스를 어떻게 브라우저에 렌더링하는지 알아보려고 합니다. 브라우저 렌더링 과정 파싱 브라우저는 렌더링 엔진을 통해서 HTML 을 파싱하기 시작합니다. 파싱하던 중 Javascript 코드인 script 태그를 만나게 됩니다. script 태그를 만난 렌더링 엔진은 파싱을 일시중단하고 JS 리소스를 다운로드 하고, JS 를 파싱하기위해 제어권을 JS 엔진에게 넘깁니다. HTML 을 동기적으로 파싱하고 있었기 때문에 JS 엔진에게 넘긴 script 태그도 끝날때까지 기다려야합니다. 이 부분에서 지연이 발생할수있고 JS가 돔을 조작하는 이벤트를 가지고 있다면 scri..

제가 롯데자이언츠 야구 경기를 보고싶어서 평일 경기시간인 6시30분에 네이버 스포츠를 들어가려고 합니다. 가장 먼저 naver.com 에 접속하죠 이때 어떤 일들이 벌어질까요? 1. DNS 조회 DNS 조회는 가지고 IP 주소를 받아오는 것을 말하는데요, 여기서 DNS 는 간단히 이야기하면 전화번호부나 노래방 번호 책 같은 겁니다. 저같은 90년대 초반 학생들은 학창시절에 포지션 i love you 를 6666 이라는 번호를 외웠죠,, 여기서 6666 이 인터넷으로 치면 ip, 포지션 i love you 가 DNS 가 됩니다. 다시, 우리는 네이버에 접속 할때 naver 의 ip 주소를 입력하지않고 www.naver.com 를 url 에 입력해서 바로 이동할수있는데요 여기서 naver.com 는 DNS ..

문제 링크 내 오답 function solution(k, t) { var answer = 0; let obj = {} t.forEach((i) => { obj[i] = ++obj[i] || 1 }) const oj = Object.entries(obj).sort((a,b) => b[1] -a[1]) let sum = 0 let count = 1 if(oj[0][1] >= k){ return 1 } for(let i=0; i

공식문서 내용 Routing: Linking and Navigating | Next.js Using App Router Features available in /app nextjs.org prefetch? 공식문서 설명을 보면 prefetch 은 페이지를 방문하기 전에 백그라운드에서 미리 로드하는 방법입니다. 미리 가져온 경로의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다. 클라이언측 캐시를 활용하여 변경되지 않는 세그먼트는 재사용하여 불필요한 작업을 방지합니다. router api 가 달라진점 useRouter() 를 'next/router' 에서 import 하여 router.push( { pathname : '/test/[id]', query : { id: id } } 와 같이 pathn..

웹 성능 MDN 인용문 웹 성능 | MDN 웹 성능은 객관적인 측정치이면서 로드 시간과 런타임을 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 사이트가 로드되는 데 걸리는 시간, 로드 후 상호작용에 반응할 수 있게 되기 developer.mozilla.org 웹의 성능은 객관적인 측정치고 로드 시간과 런타임에 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 로드에 관해서는 사이트의 로드시간, 로드되고나서 인터랙션이 가능하는데까지의 시간에 속하고 런타임에 대한 인식은 인터랙션이 얼마나 부드럽게 작동되는지에 대한 설명입니다. 로드시간과 인터랙션 시간을 나눠볼수있습니다. SPA 를 다뤄보면 리액트에서는 초기에 text/html 파일로 빈 html 을 내려받고 UI + 인터랙션은 번들링 된 JS 가..

arr 에 중복을 제거하는 방법 3가지를 알아보겠습니다. 1. ES6 set MDN 의 설명과 같이 하나의 값만 저장하기 때문에 배열에서 중복값 제거를 쉽게 할 수 있습니다. 2. indexof 와 filter 의 활용 간단한 설명 indexOf 는 배열에서 지정한 값의 첫번째 인덱스를 반환합니다. 비슷하게 findIndex 도 존재하는데 findIndex 는 조건에 부합하는 첫번째 인덱스를 반환 합니다. indexOf 를 활용하여 1번의 숫자가 몇번째 인덱스에 존재하는지 확인 후에 배열의 filter loop 안 index 와 부합한지 확인 후 filter 메서드의 특징의 참인 값만 return 받는 로직입니다. 예를들어 중복 값 1은 인덱스 기준 0, 3,4,5,6~~ 이렇게 나열되어있는데 index..

늘 잘 관리 된 프로젝트를 위해서 고민하고 노력하는 것을 즐기는데 인풋에 대해서 고민을 해봤다. 인풋은 로그인, 회원가입, 검색 등 input 을 다양한 곳에서 사용한다. 위에는 login page 라고 생각하고 email 과 password 2개의 input 을 만들어봤다. 위에서 필요한 속성은 label tag 를 제외하고 input 의 name 과 value 또 type 정도가 있을 수 있다. handler fn 으로는 onChange, form 태그에 onSubmit 까지가 필수 속성일것 같다. input tag 하나에 name, value, type, placeholder 는 동적으로 컨트롤 한다고 하더라도 onChage, onSubmit 정도는 custom hooks 으로 숨길 수 있지 않을까..

React Suspense https://ko.reactjs.org/docs/react-api.html#reactsuspense React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 공식문서 참고 "컴포넌트가 아직 렌더링 할 준비가 되지 않는 경우 로딩을 나타낼수 있도록 해줍니다." 현재는 lazy loading 때만 사용한다고 하지만 향후에는 fetching 등 비동기 로직에도 사용할 수 있도록 업데이트 할 예정이라고 합니다. 1. 성능 최적화를 생각해보기 리액트 성능최적화를 위해서 불필요한 리렌더링, 중복코드도 줄여보고 코드도 간결하게 해보고 라이트 하우스도 끌어올리려고 해보지만 제 생각에는 번들 용..

공식문서 https://www.apollographql.com/docs/react/caching/overview#data-normalization Caching in Apollo Client Overview www.apollographql.com 캐시 동작방법 예를들어 book5 를 두번 호출했을 경우에 inMemoryCache에 저장 된 캐시 데이터가 반환됩니다. 네트워크 호출을 하지않습니다. 캐시는 어디에 저장하는 걸까요? 데이터를 정규화하여 로컬 메모리내에 저장합니다. 캐시는 어떻게 저장 하는 걸까요? 아폴로 클라이언트의 캐시는 falt lookup table 로 저장합니다. 데이터를 서로 참조할수있는 조회테이블(look up table)로 저장하지만 실제로 반환되는 쿼리는 그렇지 않은 경우가 많습..