streaming SSRdynamic rendering으로 빌드된 페이지에서 10초 걸리는 api를 서버에서 호출하면 사용자의 첫 로드가 그만큼 느려진다. 이를 해결하기 위해 nextjs13 이상부터는 suspense를 사용해 쉽게 streaming SSR을 적용할 수 있다.import { Suspense } from 'react';import SlowComponent from './SlowComponent';export default function Home() { return ( Welcome to my page Loading slow component...}> );}// app/SlowComponent.jsasync function fet..

프론트엔드에서 신규 기능을 개발하다 보면 목업 데이터를 만들어 사용하곤 했다. 근데 react-query같이 서버상태관리 라이브러리를 붙이는 상황에선 목업 데이터를 사용하기 좀 번거롭다.이전 mejai 프로젝트에선 친절한 백엔드팀원이 목업 api를 만들어 주어 아주 편하게 사용했지만, 이는 팀원이 일을 두번 하게 되는 방법이었다. 이를 해결해 보자. next.js는 자체 서버에서 api를 관리할 수 있다. api를 만들고 해당 엔드포인트로 요청을 보내면 next.js서버에서 서버리스로 핸들러가 호출되어 작동한다.핸들러를 만드는 방법 또한 매우 간단하다.API 라우트 파일 생성: 프로젝트의 pages/api 폴더 안에 새 파일을 생성한다. 예를 들어, user.js라는 이름으로 파일을 만든다.목업 데이터 ..

nextjs app router 기준 애드센스 적용 방법에 대해 정리해 보았다.애드센스 관련 레퍼런스가 적어서 많이 헤맸다..중간에 포기하고 카카오 애드핏이나 쿠팡광고를 붙여볼까 싶었지만 너무 높은 수수료 때문에 관뒀다 거의 두 배 차이 난다 먼저 애드센스 허가부터 받아야 한다.애드센스 심사는 텍스트 기반이라 글이 많은 블로그같은 서비스가 아니라면 허가가 쉽지 않다./blog폴더에 글을 2000자 이상 넣는 꼼수를 써봤지만 실패했다.결국 티스토리에 도메인 연결, 애드센스 연동 후 옮기는 방법을 사용했다.https://www.youtube.com/watch?v=WE_gop9Vh4M이대로 해도 15번정도 요청 반려됐다; 13번째부터는 일주일 심사 쿨타임 걸리니 마구 누르지 말 것.트래픽 어느정도 있어야 하는..

겁나 싼 서버리스로 nextjs서버를 돌리면 어떻게 될까?장점자동 확장성: 서버리스 아키텍처는 자동으로 확장된다. 트래픽 증가 시 Lambda 함수가 자동으로 더 많은 인스턴스를 실행하여 요청을 처리한다.관리 부담 감소: 서버를 직접 관리할 필요가 없으므로, 인프라 관리에 대한 부담이 줄어든다. 이는 운영 및 유지보수 작업을 줄여준다.비용 효율성: 사용한 만큼만 비용을 지불하는 Pay-as-you-go 모델을 사용한다. 트래픽이 적을 때 비용이 절감될 수 있다.빠른 배포: 서버리스 환경에서는 애플리케이션을 빠르게 배포하고 업데이트할 수 있다. 이는 개발 속도를 높이는 데 도움이 된다.무중단 배포: 새로운 코드를 배포할 때 서비스 중단 없이 배포할 수 있다.단점파란색 글자: 솔루션콜드 스타트: Lambda..

useSeachParams는 클라이언트사이드 훅이다보니 ssr시 suspense로 감싸서 csr하지 않으면 build단계에서 워닝을 뱉더라.구글 애드센스에서 csr되는걸 못 잡는다고 들어서 최대한 ssr을 늘리려다 보니 서버페치를 하기 위해 query param의 접근이 필요했다.아래처럼 props로 searchParams를 받을 수 있다. 객체로 전달되지 않아 new 연산자로 URLSearchParams객체로 만들어줬다.export default function SummonerPage({ searchParams,}: { searchParams: URLSearchParams;}) { const params = new URLSearchParams(searchParams); const id = par..

다크모드 토글버튼을 직접 만들으라네;공식문서 보고 만들었다.https://daisyui.com/docs/themes/ daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.comhttps://daisyui.com/components/theme-controller/ Tailwind Theme Controller Component — Tailwind CSS Components ( version 4 update is here )Tailwind Theme Controller examples: If a checked checkbox input or a checked radio inpu..