분류 전체보기 (410) 리스트형 브라우저 렌더링 순서에 따른 성능 개선 방법 https://sorrel012.tistory.com/352에서 브라우저 렌더링 순서에 대해 정리했는데, 그 순서와 성능의 연관성에 대해 더 알아보았다. 렌더링 순서(트리 생성, 레이아웃, 페인트)서버 사이드 렌더링, 클라이언트 사이드 렌더링과 같이 '렌더링'에 대한 이야기는 굉장히 많이 접했으나 정확히 그에 대해 알지는 못했다. 구글 chrome 브라우저에 렌더링에 관한 설명이 잘 정리sorrel012.tistory.com성능을 개선하기 위해 특히 신경써야 할 부분은 Reflow(Layout)와 Repaint(Paint)이다.Layout은 각 노드들의 크기나 위치들을 계산하는 단계로, 크기나 위치가 변경될 때 Reflow가 발생한다.Reflow가 발생하면 페이지의 레이아웃을 다시 계산해야 하므로 효율성.. [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에서 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.. [Next.js] Next 14에서 NextAuth 사용하여 소셜 로그인 구현하기 (구글 로그인) // NextAuthNextAuth는 Next 앱의 오픈소스 인증 솔루션이다.OAuth 인증, 비밀번호 기반 인증, 세션 관리 등이 필요한 상황에서 주로 사용한다.간편한 설정으로 인증을 관리할 수 있다는 장점이 있으며, 필요에 따라 커스터마이징도 가능하다.* 공식 사이트: https://next-auth.js.org/ NextAuth.jsAuthentication for Next.jsnext-auth.js.orgNextAuth는 App Routes 와 Route Handlers 에서 사용법이 다르기 때문에 14 버전은 Route Handlers 가이드를 보아야 한다.▪ NextAuth 설치npm install next-auth▪ route.ts 파일 생성app/api/auth/[...nextauth]/r.. [CSS] Prettier로 TailwindCSS 정렬하기 (웹스톰) Prettier를 사용하면 코드를 자동으로 포맷팅해주는데, tailwind css를 사용할 때 className까지도 포맷팅 해줄 수 있다.▪ Prettier 설치npm install --save-dev prettier전역으로 설치해줘도 되는데, 난 거의 프로젝트에 devDependencies로 추가하는 편이다.▪ Prettier - Tailwind CSS 플러그인 설치npm install --save-dev prettier-plugin-tailwindcss▪ . prettierrc 파일 설정{ "plugins": ["prettier-plugin-tailwindcss"]}▪ 웹스톰 설정나는 여기에 html이랑 json까지 추가하는 편이다.※ 나의 prittier 설정{ "trailingComma": .. [Next.js] Redirects, Rewrite // Redirects특정 url에 접속했을 때 다른 url로 redirect 시켜주는 기능▪ next.config.mjs 설정async redirects() { return [ { source: '접속url', destination: 'redirect할 url', permanent: boolean값 }, ]}source- redirection을 시작할 경로- 여기에 해당하는 URL로 접속하면 redirection이 발생한다.destination- redirection으로 이동될 경로- 목적지permanent- 해당 redirection이 영구적인지 여부// Rewrite해당 페이지의 url을 다른 url로 대체해주는 기능▪ next.config.mjs 설정as.. [Next.js] 데이터 캐싱하기 데이터 캐싱이란 데이터를 임시 저장해두고 같은 요청이 있을 때 재사용하여 응답 속도를 높이는 방법이이다.DB에 반복적으로 접근하는 것은 효율적이지 못하기 때문에 캐싱 기술을 사용한다.▪ unstable_cache서버 컴포넌트에서 데이터 fetching 결과를 캐싱한다.이름 그대로 현재 'unstable'한 상태로, 이름이나 사용 방식은 언제든 변할 수 있다.(이래서 공식 문서를 잘 봐야한다..)import { unstable_cache } from 'next/cache'; const data = unstable_cache(fetchData, keyParts, options)()공식 문서에 나와 있는 코드이다.데이터를 캐싱하기 위해서는 fetchData, keyParts, options를 매개변수로 넘겨준.. [Next.js] Interception Routes와 Parallel Routes로 모달(Modal) 구현하기 // Interception RoutesInterception Routes는 현재 페이지에서 특정 route를 로드할 수 있는 기능이다. (현재 페이지를 intercept)모달 창을 열거나 닫을 때 전체 페이지를 새로고침 하지 않고 현제 페이지 위에 모달을 표시할 수 있게 해준다.만약 공유된 URL을 클릭하거나 새로고침 할 경우에는 interception routes 페이지가 아닌 기존 페이지로 렌더링된다.▪ 디렉토리 생성interception routing을 위해서는 디렉토리를 생성해서 상대경로를 지정해야 한다.해당 디렉토리에서 어떤 페이지를 intercept 할 건지에 따라 경로를 설정하면 된다.(.) : 같은 레벨의 경로를 intercept.(..) : 한 레벨 위의 경로를 intercept.(... < 1 2 3 4 ··· 52 >
