neda의 블로그

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

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

항해 플러스 코육대 1회 총알 피하기가 아니라 추석 음식 피하기! 회고 추석 연휴 맛있게 명절 음식을 먹으며 휴대폰을 보고 있었는데 구글 디스커버에 "항해 플러스 코육대"에 대한 게시글이 보였다. 내일배움캠프를 수료했기 때문에 항해라는 단어를 보고 '팀스파르타'에서 하는 것이라는 걸 바로 알아챌 수 있었다. 코육대의 취지는 이번 추석 연휴 간 코딩 개발을 통해 개발 근육을 깨우고 특별한 선물까지 받을 수 있다고 한다. 이까지만 보고는 크게 할 마음이 없었지만, 종목들을 보니 게임이었다. 게임을 만들어 본 적은 없어서 갑자기 하고 싶다는 생각이 들었다. 특히나 요즘 계속 사용하고 있는 자바스크립트를 통해서 게임을 만들고 이를 웹에 배포하면 설치하지 않아도 누구나 웹 사이트에 접속하여 게임을 할 수 있어 흥..

최종 프로젝트 종료와 코드 리뷰 회고 18일 저녁 최종 프로젝트 발표가 끝나고 오늘 수료식만이 남게 되었습니다.4.5주라는 기간 동안 기획부터 디자이너와 디자인 협업, Supabase를 통한 백엔드 구현, React를 활용한 프론트엔드 구현까지 많은 일이 있었습니다. 이 글에서는 최종 프로젝트에서 있던 코드 리뷰를 통해 코드를 개선한 코드들에 대해 알아보겠습니다. 코드리뷰 코드리뷰란 코드리뷰는 코드 작성자가 아닌 팀원, 동료가 코드를 검토하고 피드백하는 행위를 말합니다. 코드리뷰는 버그를 발견하고, 코드의 품질을 높이는 데 도움을 줄 수 있습니다. 하나의 프로젝트 내에서 코드의 일관성을 유지하는 데 도움을 줄 수 있습니다. 코드리뷰 필요성 현재 프론트엔드에는 eslint, prettier 등을 통해 코드..

1. 브이월드 API 사용법 1. 1 브이월드 가입 api 호출에 필요한 인증키를 받기 위해 회원가입은 필수입니다. 공간정보 오픈플랫폼 국가가 보유하고 있는 공개 가능한 공간정보를 모든 국민이 자유롭게 활용할 수 있도록 다양한 방법을 제공합니다. www.vworld.kr 1.2 파라미터 세팅 api 호출에 필요한 파라미터를 객체 형태로 세팅. 아래 파라미터는 예제에 있는 파라미터로 한반도 전체 지역을 범위로 하여(geomfilter) 국내의 광역시도 정보(data)를 가져오는 파라미터 const params = { key: "인증키", domain: "http://localhost:3000/", service: "data", version: "2.0", request: "getfeature", forma..

웹 페이지 meta 태그 한글 깨짐 외계어 해결 const text = "한글"; const encoder = new TextEncoder(); const decoder = new TextDecoder("windows-1252"); const encodedText = encoder.encode(text); const output = decoder.decode(encodedText); console.log(output); //한글

Next.js 13.2 페이지와 레이아웃 페이지 생성하기(Pages) nextjs13.2부터는 파일이 아닌 경로가 페이지 경로의 기준이 된다. 페이지의 경로는 app폴더 내의 디렉토리의 경로와 같다. 예를 들어 사이트(site.com/)에 접속 하면 최상위 페이지 app/page.js를 불러온다. URL 상대 경로 페이지 경로 site.com/ / app/page.js site.com/dashboard/ /dashboard app/dashboard/page.js site.com/dashboard/settings/ /dashboard/settings/ app/dashboard/settings/page.js export default function HomePage() { return ( Home ); } ..