프론트엔드에서 신규 기능을 개발하다 보면 목업 데이터를 만들어 사용하곤 했다. 근데 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번째부터는 일주일 심사 쿨타임 걸리니 마구 누르지 말 것.트래픽 어느정도 있어야 하는..

https://aws.amazon.com/ko/compare/the-difference-between-rpc-and-rest/ RPC와 REST 비교 - API 아키텍처 간의 차이점 - AWS원격 프로시저 호출(RPC)과 REST는 모두 인터넷 통신을 위해 해당하는 클라이언트와 서버 시스템 인터페이스를 설계하는 방법입니다. 그러나 구조, 구현 및 기본 원칙은 다릅니다. REST를 사용하여 aws.amazon.com클라이언트에서 서버의 함수를 실행하는것 rest api와 다르게 엔드포인트가 ‘함수’이다 동기화가 가장 큰 이유인거같은데? gRPC란?RPC기반으로 몇가지 최적화가 더해진 것 대표적으로 Protocol Buffer와 HTTP 2를 사용한다. HTTP 2 : body가 이제 바이너리로 보내진다. ..

다크모드 토글버튼을 직접 만들으라네; 공식문서 보고 만들었다. 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 in..

vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.커스텀 게임 방 리스트 페이지위 페이지에선 2가지 비동기 동작이 정의되어 있다.1. 먼저 5초마다 setInterval로 현재 페이지네이션 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직2. 아래 화살표를 누르면 페이지네이션을 + - 하고 그 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직 그런데 아래 화살표를 광클하니 현재 페이지네이션이 아닌 페이지가 깜빡거리면서 렌더링 되는 이슈가 생겼다.로직상 문제가 없었고, 콘솔로 페이지네이션을 찍어봐도 이상이 없어서 이틀 내내 고민하고 찾아본 결과 비동기 큐가 2개라는 걸 찾았다. setInterval, setTimeout같은 macrotask이 들어가는 macrotask q..