일명 짐빔 '장원영 게임' '박정민 게임' 을 만들게 되었다. 웹을 배포했을 때 이미지 리소스에대한 개념이 미흡했다.단순히 레포의 public폴더에 이미지들을 넣고 vercel에 무료플랜 배포하고, 사용자가 많아지면 pro플랜으로 전환하면 충분하겠지라는 생각이였다. 생각과는 다르게 의외로(?) 사용자가 좀 몰렸고, (이 글을 쓰고있는 시점에서 두 게임 합쳐서 약 1,500명의 유저가 이용했다.)pro 플랜의 Fast Data Transfer가 이주도 채 안되서 사용량 최대치인 1TB에 근접하게됬다. 1TB를 넘으면 그다음부터는 과금의 시작이였기 때문에 발등에 불이 떨어진채로 대책을 세워야했다. 기존 public폴더에 이미지들은 용량 압축도 안된 초고화질의 .png확장자 파일이였기 때문에cloudinary..

회사 자사몰에 medusajs 프레임워크를 도입하게 됐다.medusa의 admin페이지엔 자체적으로 로딩 스피너가 있었다.예를들면 admin/digital asset페이지에 접속하면 ajax하는 코드가 없어도 페이지 진입과 동시에 로딩 스피너가 떴다.이런 점 때문에 ajax를 요청하는 코드가 있다면 로딩처리를 한번에 통합해주지 못한다는 단점이있었다. 즉,1. 로딩 스피너2. ajax요청에, 또 한번 로딩 (리액트 서스펜스 쿼리 사용)이런 과정을 거쳐야했다. 무슨 방법이 없을까? 싶은 와중에 회사 동료분한테 자문을 구하기도했고, 카카오 기술 블로그에서 '무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?' 라는 글이 생각나서 그걸 적용해봤다.https://tech.kakaopay.com/po..

0. shadcn-ui로 다크모드shadcnui로 다크모드를 쉽게 개발 가능합니다.'use client'import * as React from 'react'import { ThemeProvider as NextThemesProvider } from 'next-themes'export function ThemeProvider({ children, ...props}: React.ComponentProps) { return {children}}export default async function RootLayout({ children,}: Readonly) { const currentUser = await getCurrentUser() return ( ..

🐸 공지사항context로 하는게 가장 베스트였습니다.zustand로 변경할 수도있겠지만 유저 로그인후 상태 관리는 어차피 user state하나만 있는거라 zustand는 오히려 오버스펙일수도 있겠다는 생각이 듭니다. 그리고 추가로 인증된 사용자만 들어올수있는 페이지나 게시글 작성시에는requireAuth 같은 훅을 따로 써서 처리를해주면 될것같습니다 글을 지울까 했으나 쓴 시간이 아까워 그냥둡니다..ㅠㅠ 0. 배경현재 계약직으로 있는 회사에서 회원가입,로그인 기능을 내가 구현하지 못해 아쉬움이 있어서supabase,nextjs로 supabase template을 만든 개인 토이 프로젝트를 했었다.  회사에서는 로그인 및 회원가입 supabase로 인증 처리후 contextAPI status에 담아 ..

react-query의 mutate()를 사용할 때 주의해야할 점이있다고 한다.바로 mutate()의 콜백 함수들은 뮤테이션이 끝나기 전에 해당 컴포넌트가 언마운트되면 실행되지 않는 특징이 있는데, 그래서 다른 페이지로 리다이렉트 혹은 결과를 toast로 띄우는 것과 같은것에 주의해야한다고한다.  참고자료: https://velog.io/@ooo3289/useMutation-%ED%9B%85%EC%9C%BC%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0 useMutation 훅으로 분리하기참고로 FSD architecture로 파일 분리가 되어있음. 🎀 훅으로 분리하기 전에 준비 📌 dto 파일 생성해서 타입 모으기 src/shared/api/authenticati..

React에서 데이터 패칭을 위한 다양한 방법: ISR과 React QueryReact 애플리케이션에서 데이터를 패칭하는 방법에는 ISR (Incremental Static Regeneration)과 React Query 등이 있다. 이 글에서는 각 방법의 특징과 차이점에 대해 기록하려고 한다.(fetch방식도 있긴하지만.. react-query가 더 좋다는 개인적인 생각에 이건 패스)(자세한 사용방법, 기타 옵션등은 생략..) React Query를 이용한 데이터 패칭React Query 라이브러리를 사용하면 데이터 패칭과 캐싱을 간편하게 처리할 수 있다.React Query는 데이터 캐싱, 옵션 설정 등 다양한 기능을 제공한다.React Query를 사용한 데이터 패칭 플로우는 다음과 같다.1. '/..