sooleeandtomas

The following content explains how to reduce First Contentful Paint (FCP) by optimizing web fonts. 크롬의 lighthouse에서 확인할 수 있는 최적화에는 LCP, FCP가 있습니다.FCP: First Contentful Paint 초기 DOM 콘텐츠를 렌더링하기까지 걸리는 시간을 말합니다.LCP: Largest Contentful Paint 페이지의 주요 내용이 화면에 렌더링되기까지 걸리는 시간을 말합니다. 사용자가 빈 화면만 보고 있다면 페이지가 로드되고 있는지 알 수 없습니다.하지만, FCP이후, 첫번째 콘텐츠 비트를 렌더링하여 첫 피드백을 사용자에게 제공하기 때문에, 사용자가 페이지가 로딩 되고있음을 느끼게 됩니다. (..

SvelteKit svelte에 SSG, SSR을 지원하는 것이 svelteKit입니다. Sveltekit에서 지원하는 기능은 아래와 같습니다. Build Optimizations Offline Support Prefetch Configurable Rendering SSR CSR SSG Install > Desktop npm create svelte@latest soozy-svelte cd soozy-svelte npm i dev 실행 npm run dev 귀염뽀짝 화면이 나옵니다. vsc에서 권장하는 "Svelte for VS Code" 익스텐션 설치 Directory ├── app.d.ts ├── app.html ├── lib │ └── images │ ├── github.svg │ ├── svelt..

CompoundComponent - Context - Compound Component Context CompoundComponent를 잘 활용하려면 Context에 대해 이해하고 있어야 합니다. 정말 간략하게 Context에 대해서 설명해보겠습니다. 컴포넌트들 사이에서 value 공유가 필요한 경우, 그 컴포넌트들의 최상단에서 Context.Provider로 감쌉니다. Context.Provider는 value값을 가지고 있습니다. 이 Provider로 감싸져 있는 component들은 동일한 value를 공유하게 됩니다. useContext를 통해서 이 state값들에 접근하고, 이를 사용할 수 있습니다. 이를 통해 하위 자식에서 props를 drilling하지 않아도 손쉽게 해당 value에 접근할..

Image 컴포넌트.Image컴포넌트는 image lazyloading 사이즈최적화, layout shift방지 (이미지 로딩이 늦어서 layout이 바뀌는 현상)를 해준답니다.Image컴포넌트가 수용해주는 props에 대해 알아봅시다.#Required Props1. src1-1. 정적으로 import된 파일import Image from "next/image"import imgsrc from "/public/0.png"1-2. 외부링크, 내부상대링크 둘중 하나. 만약 외부링크를 사용한다면, next.config.js에서 remotePatterns에 추가를 해줘야 합니다.module.exports = { images: { remotePatterns: [ { ..

a와 Link태그의 차이에 대해 알아보겠습니다! a태그는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 하이퍼링크란 주소와 주소가 비선형적으로 엮인 인터페이스를 의미합니다. 주소와 주소 사이를 중간 과정 없이 옮겨다닐 수 있는 특징이 있습니다. download, href, hreflang, ping, referrerpolicy, rel, target, type을 프롭으로 가집니다. next의 Link태그는 prefetching, client-side navigation을 위해 a태그를 확장한 리액트 컴포넌트입니다. a태그를 확장했다는 말은, next에서 를 사용하게 되면 태그가 생성된다는 것입니다. a의 사..

getServerSideProps 만약 페이지에서 getServerSideProps를 사용한다면, next.js는 페이지를 요청할 때마다 데이터를 가져옵니다. function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() return { props: { data } } // 페이지의 컴포넌트에 이 props를 전달하게 된다. } export default..