neda의 블로그

Nextjs에서 tanstack-query Prefetch를 왜 해야 할까 react에서는 컴포넌트 내에서 서버 상태를 관리하기 위해 tanstack query와 같은 라이브러리를 통해 상태를 관리합니다. prefetchQuery는 서버에서 데이터를 fetching하고 직렬화하여 클라이언트로 보내는 방법입니다. 왜 이러한 방법이 필요한것일까 tanstack query tanstack query(구 react-query)는 리액트의 (클라이언트) 컴포넌트 내에서 서버 상태를 관리하는 유용한 hook을 제공합니다. 일반적인 흐름은 아래 같습니다 페이지 로드 컴포넌트 마운트 대체자 렌더링 데이터 가져오기 데이터를 가진 컴포넌트 렌더링 이 흐름에서는 컴포넌트가 초기 렌더링 되고 데이터를 가져오는 동안 로딩 스피..

tailwindcss 간단하게 웹폰트 적용하기 필요한 준비물: 폰트 cdn 주소, 폰트 이름 영문 폰트는 구글 폰트에서 https://fonts.google.com/ 한글 폰트는 눈누에서 https://noonnu.cc/ 1.폰트 가져오기 css파일의 @tailwind 위에서 @import문을 사용해 불러오세요 /* ✅ /globals.css */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @tailwind base; @tailwind components; @tailwind utilities; /* ❌ @tailwind 아래에서 사용하지..

vitest에서 msw를 사용해 api mocking 시작하기 vitest는 vite기반의 테스팅 프레임워크로, jest와 거의 같은 사용법을 가지고 있으며, 차세대 테스팅 프레임워크를 지향하고 있습니다. msw는 클라이언트에 구애받지 않고 테스트를 수행하기 위해 API를 모킹하는 라이브러리입니다. vitest에서는 api 모킹을 위해 msw와 같은 라이브러리의 사용을 권장하고 있습니다. 새로운 프로젝트 생성 npm init을 사용하여 프로젝트를 초기화하거나 vite와 같은 빌드 도구를 사용해 빠르게 프로젝트를 시작할 수 있습니다 npm init npm create vite@latest Vitest, MSW 설치 vitest와 msw를 사용하기 위해 개발 의존성으로 설치합니다 npm install -D ..

Firebase에서의 on the fly 방식 썸네일 이미지 최적화(Hosting, Cloud functions) Firebase에서 Hosting과 Cloud Functions를 활용하여 On the fly 방식으로 썸네일 이미지를 최적화하는 방법에 대해 알아봅니다. 이미지 최적화가 필요한 이유 이미지(스토리지) 대역폭을 줄여 자원 절약 브라우저에서의 빠른 렌더링을 통한 사용자 경험 향상 이미지 최적화를 위한 방법 기존 방법 파이어베이스에서는 이미지 리사이즈를 위한 익스텐션을 지원합니다(https://extensions.dev/extensions/firebase/storage-resize-images) 해당 익스텐션은 아래와 같은 방법을 통해 리사이징을 수행합니다 버킷에 파일이 업로드되면 해당 파일이 ..

nextjs tailwind pagination 컴포넌트 (usePagination) nextjs에서 tailwind를 사용하여 pagination 컴포넌트 만들기 usePagination 훅 // /lib/hooks/usePagination.ts type NumberOrEllipsis = number | '...' type NumberOrEllipsisArray = NumberOrEllipsis[] const usePagination = ({ currentPage, totalPages, }: { currentPage: number totalPages: number }): NumberOrEllipsisArray => { const pages: NumberOrEllipsisArray = [1] if (to..

nextjs에서 react quill ref 타입스크립트에서 사용하기 interface CustomReactQuillProps extends ReactQuillProps { forwardedRef: React.RefObject } const CustomReactQuill = dynamic( async () => { const { default: RQ } = await import('react-quill') const Quill = ({ forwardedRef, ...props }: CustomReactQuillProps) => ( ) return Quill }, { ssr: false } ) const Editor = () => { const quillRef = useRef(null) const [val..

nextjs middleware rewrite를 통해 서브 도메인 적용하기 rewrite 기능을 사용하여 간단하게 사용자별 서브 도메인을 생성하는 방법 예를 들어 아래와 같이 path에 사용자 이름을 사용하지 않고 메인 도메인 앞에 사용자 이름이 붙는 형식이다 (티스토리가 사용자별 서브 도메인을 사용하고 있다) localhost:3000/blog/[username] -> [username].localhost:3000 프로젝트 디렉토리 구조 미들웨어 적용하기 프로젝트 루트 경로(approuter에서 app 폴더와 같은 위치)에 "middleware.ts"을 생성 config는 페이지 요청 이외의 다른 요청에 대해서는 middleware를 적용하지 않도록 지정 // /middleware.ts import {..

react useSyncExternalStore를 사용하여 useMediaQuery 만들기 사용법 const StatusBar = () => { const isDark = useMediaQuery('(prefers-color-scheme: dark)') return ({isDark ? 'Dark Mode' : 'Light Mode'}) } 구현 // useMediaQuery.js import { useSyncExternalStore } from "react"; export function useMediaQuery(query) { const matches = useSyncExternalStore( (callback) => subscribe(query, callback), () => getSnapshot(q..

Kent C. Dodds의 Why I Won't Use Next.js 요약 Kent C. Dodds는 이번 next 14 발표와 함께 자신이 풀스택 웹개발에 nextjs를 사용하지 않고 remix를 더 선호하는 이유에 대한 글을 발행했다. 서론 처음 출시인 2020년부터 Remix를 사용해왔다. Remix가 Nextjs보다 뛰어난 사용자 경험을 만들 수있는 더 나은 도구라고 본다. 다만 Nextjs를 사용하는 것이 나쁘다는 것은 아니다. 단지 Remix를 사용하면 더 편할 것이라고 생각하는 것이다. 웹 플랫폼 Nextjs는 api를 직접 노출하지 않는다. 따라서 웹 플랫폼을 사용해야 하는 경우 웹 플랫폼 문서(예를 들면 MDN)가 아닌 Nextjs 문서를 보아야 한다. 이는 웹에 대한 공부보다 프레임워크..

nextjs 14 발표 후 server action 밈 모음 server actions는 server mutations을 nextjs에서 지원하기 위해 도입한 기능이다. 일반적으로 서버에서 db를 조작하기 위해서 form을 통해 데이터를 서버로 전송한다. 이때 server actions는 서버에서 해야 할 동작을 form 내부에 작성할 수 있도록 해준다. 하지만 "use server"라는 독특한 문법과 클라이언트 코드에 인라인으로 server 함수를 작성한다는 점이 마치 php, sql injection을 연상시켜 밈이 탄생했다. 발표 영상과 밈이 된 장면 HTML 삽입 미리보기할 수 없는 소스 밈 모음