나무의 하루

웹 기술 브라우저 렌더링 순서에 따른 성능 개선 방법 https://sorrel012.tistory.com/352에서 브라우저 렌더링 순서에 대해 정리했는데, 그 순서와 성능의 연관성에 대해 더 알아보았다. 렌더링 순서(트리 생성, 레이아웃, 페인트)서버 사이드 렌더링, 클라이언트 사이드 렌더링과 같이 '렌더링'에 대한 이야기는 굉장히 많이 접했으나 정확히 그에 대해 알지는 못했다. 구글 chrome 브라우저에 렌더링에 관한 설명이 잘 정리sorrel012.tistory.com성능을 개선하기 위해 특히 신경써야 할 부분은 Reflow(Layout)와 Repaint(Paint)이다.Layout은 각 노드들의 크기나 위치들을 계산하는 단계로, 크기나 위치가 변경될 때 Reflow가 발생한다.Reflow가 발생하면 페이지의 레이아웃을 다시 계산해야 하므로 효율성..
Next.js [Next.js] Sanity 사용하기 // SanitySanity는 Headless Content Management System(CMS)이다.Gatsby(React) 프로젝트를 할 때 Headless CMS로 Contentful을 사용한 적이 있는데, 너무 편하고 좋았다.(서버가 없을 때)근데 Contentful은 읽기는 되지만 쓰기가 안 되는 관계로... 특정 기능은 서버를 사용해야 하는 부분이 있었다.※ 참고: https://sorrel012.tistory.com/427 [리액트(React)] Gatsby - Contentful// Contentful- 컨텐츠를 관리하는 시스템- 공식 사이트: https://www.contentful.com/ Where content drives business momentum | ContentfulB..
Next.js [Next.js] Next에서 SWR 사용하기 // SWRSWR 은 Stale-While-Revalidate 의 약자이다.데이터 캐싱, 초기화 등을 간단하게 처리할 수 있게 해준다.사용이 간편하고 캐시된 데이터를 반환하기 때문에 속도가 빠르다.전역 상태 관리도 용이하여 많이 사용하는 React 훅이다.만약 전역 상태 관리에 초점을 맞출 거면 Redux나 zustand 같은 것을 사용하는 게 낫고, 데이터 fetching에 초점을 맞출 거면 react-query를 사용하는 게 나은 것 같다.일단 당장 내가 사용할 기능들은 SWR로 충분하기 때문에 가벼운 걸로 하자~ 해서 SWR을 사용해보았다.※ 공식 문서: https://swr.vercel.app/docs/getting-started Getting Started – SWRSWR is a React H..

티스토리툴바