neda의 블로그

더보기 NanumSquareNeo 가변 글꼴 Font Test 100 Font Test 200 Font Test 300 Font Test 400 Font Test 500 Font Test 600 Font Test 700 Font Test 800 Font Test 900 Pretendard 가변 글꼴 Font Test 100 Font Test..

자바스크립트 문자열 역순으로 뒤집는 방법 성능 비교자바스크립트에는 문자열을 뒤집는 메서드는 존재하지 않습니다. 따라서 직접 구현하여 사용해야 합니다. 여기서는 문자열을 뒤집는 3가지 방법과 성능에 대해 비교합니다 배열 메서드 조합function reverseString(str) { return str.split("").reverse().join("");} 반복문 사용function reverseString2(str) { let reversed = ""; for (let character of str) { reversed = character + reversed; } return reversed;} reduce() 사용function reverseString3(str) { return st..

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..