![]()
얼러트 모달이 여기저기 필요해서서버, 클라이언트 관계없이 아무데서나 호출해서 쓸 수 있도록아래처럼 사용하고 있었습니다. 그런데 이 방법에 문제가 조금 있었습니다.그냥 써도 무방한 정도였지만 해결해보기로 하였습니다. 문제는 번들 사이즈가 너무 크다는 점 이었습니다.여기저기서 호출 하는 함수인데 무거우면 안될 것이라 판단했습니다.원래 버전원일을 찾아보니 createRoot 를 하기 위해 가져온ReactDom 이 번들사이즈가 132kb 정도로 무거웠습니다.그래서 이것을 제거하고 다른 방법을 사용하기로 했습니다.하지만 그러면 컴포넌트를 사용해서 아무데서나 body에얼러트 모달을 부착할 수가 없었습니다.import CustomAlert from '@/components/organisms/common/CustomA..
![]()
Lazy LoadingLazy loading은 Next.js에서 애플리케이션의 초기 로딩 성능을 개선하는 데 도움을 주며, 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄여줍니다. 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들에 포함되도록 합니다. 예를 들어, 사용자가 모달을 열려고 클릭할 때까지 모달의 로딩을 지연시킬 수 있습니다. Next.js에서 lazy loading을 구현하는 두 가지 방법이 있습니다:next/dynamic을 사용한 동적 가져오기React.lazy()와 Suspense를 사용기본적으로 서버 컴포넌트는 자동으로 코드 분할이 되며, 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 전송할 수 있습니다. La..
![]()
state와 UI를 리턴하는 커스텀 훅이 필요해우리에겐 state와 UI(컴포넌트)를 리턴하는 커스텀 훅이 필요합니다. 여기서 state는 전역상태로 관리되면 안되는 상황이므로커스텀 훅에서 리턴하는 state 는 독립적이어야 합니다. 또한 비슷한 UI를 반복적으로 사용해야 하는데 렌더링해야하는데이터종류는 2가지(여정테마/버디즈성향)인 상황입니다. 따라서 커스텀 훅의 리턴은 named export가 될 수 없으므로 객체가 아닌 배열어야 합니다.그렇다면 [컴포넌트, 스테이트] 이렇게 반환하기만 하면 될 것 같습니다.리턴할 컴포넌트먼저 리턴할 컴포넌트를 atoms 레벨에 만들었습니다.type PreferThemeProps = { selectedTheme: string[]; handleThemeCha..
![]()
처음 생각한 다이나믹 헤더 의사 코드export default function Page({ params, searchParams,}: { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined }}) { return My Page}Next.js 에서 slug 와 query string 을 가져올 수 있는 위 코드를 사용해서layout.tsx 혹은 page.tsx : (서버컴포넌트 겠죠..? 아마) 에서동적으로 주소에따라 MobileHeader.tsx 컴포넌트로 넘겨주는 props 를 다르게 한다!위 방법은 동적 라우팅에서만 사용가능! 따라서 middleware 설정 추가확인해보니 위 방법은 동적 라우팅..
![]()
이미지를 10px 사이즈의 base64 문자열로 변환하는 함수를 작성하기 위해, 먼저 이미지를 불러와서 크기를 조정한 후 base64 형식으로 인코딩해야 합니다. 서버 사이드에서 이미지를 처리하기 위해 sharp 라이브러리를 사용할 수 있습니다. 이를 Next.js API 라우트를 통해 구현할 수 있습니다.다음은 이미지를 10px 사이즈로 변환하고 base64 문자열로 반환하는 API 라우트를 작성하는 방법입니다:1. sharp 라이브러리 설치먼저 sharp 라이브러리를 설치합니다.npm install sharp2. API 라우트 작성src/pages/api/getBase64.ts 파일을 생성하고 다음 코드를 추가합니다:import type { NextApiRequest, NextApiResponse }..
![]()
nextjs 14버전에서 pwa 를 셋업하는 방법에 대해 알아보았습니다.1. next-pwa 설치yarn add next-pwa yarn add -D webpack2. next.config.mjs 수정아래와 같이 수정합니다.import withPWAInit from "next-pwa";const withPWA = withPWAInit({ dest: "public",});/** @type {import('next').NextConfig} */const nextConfig = {};export default withPWA(nextConfig);3. 퍼블릭에 manifest.json/public 폴더에 아래와 같이 manifest.json 파일을 작성합니다.{ "name": "My Next.js P..
![]()
Step 7. 프로바이더 로그인 버튼 예시"use client";import useAuth from "@/hooks/useAuth";import { showAlert } from "@/lib/openCustomAlert";import { usePathname } from "next/navigation";import { FcGoogle } from "react-icons/fc";function GoogleLogInButton() { const { loginWithProvider } = useAuth(); const pathname = usePathname(); const handleClickGoogle = async () => { if (pathname === "/recove..
![]()
여기에서 이어집니다.Step 4. signup & login & logout 라우트 핸들러 작성이메일회원가입 / 로그인 / 로그아웃 용 라우트 핸들러를 작성합니다.회원가입 / 로그인 로그아웃시에는 여기로 요청날리면 됩니다.(3편 콘텍스트api 활용 에서 자세히 설명)// api/auth/signup/route.tsimport { createClient } from "@/supabase/server";import { NextRequest, NextResponse } from "next/server";export async function POST(request: NextRequest) { const data = await request.json(); const name = data.name a..
![]()
수파베이스를 사용한 인증/인가를 구현하면서 애를 많이 먹었습니다.특히나 자료들이 대부분 조금 오래된 버전들이 많아서 더욱 힘들었습니다. 예를들어 나름 1년~6개월 전쯤에 작성된 자료임에도 Page 라우터를 사용하는 자료라거나,혹은 use client 를 사용해서 처리해야만 하는 클라이언트 사이드 로직을 알려주는 경우가 많았습니다. 하지만 공식홈페이지 자료에는 불친절하긴해도 어찌저찌 방법이 거의 다 나와있긴했고이를 참고하여 이메일 로그인, 비밀번호 찾기, 소셜로그인(깃헙, 구글, 카카오)을 구현하는데 성공했습니다. 과정을 복기하며 하나하나 메모해두려고 합니다.Step 1. Supabase clientNext.js 에서 Supabase 를 최적으로 사용하기 위해서는,이제Supabase Client 를 두 가..
![]()
오늘부터 next.js 공식문서를 하나씩 파헤쳐보려고 합니다.시작으로, 제가 잘 몰랐던 Template.tsx 부터 해보겠습니다.template.js템플릿 파일은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사합니다.경로 전체에서 지속적으로 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시(on Navigation) 각 하위 레이아웃에 대해 새 인스턴스를 만듭니다.export default function Template({ children }: { children: React.ReactNode }) { return {children}} 흔하지는 않지만 원하는 경우 레이아웃 대신 템플릿을 선택할 수 있습니다.사용 효과(예: 페이지 조회 수 기록) 및 사용 상태(예: 페이지별 피드백..
![]()
라이브러리 같은거 쓰는데 걍 import 했더니 window is not defined 어쩌구 할 때 하라는대로 import 했는데 안될 때 window가 없다고 해서 client 컴포넌트에서 import 했더니 브라우저에서는 되는데 서버측 window is not ... 일 때 1번 해결책 : next/dynamic "use client" import dynamic from 'next/dynamic'; const 작명 = dynamic(() => import('위치'), {ssr: false}); // 아래쪽에서 // 이런식으로 쓰면됨 그래도 안될 때 2번 해결책 useEffect(() => { import('위치') .then((module) => { const 작명 = module().default..
![]()
link 사용시 주의점 1. import 할 것 import Link from 'next/link' export default function Page() { return Dashboard } 2. 뒤로가기 안되게 하고 싶으면(history에 안쌓음) replace 추가 import Link from 'next/link' export default function Page() { return ( Dashboard ) } 3. scroll 기억하고 싶으면 scroll={false} 추가: 기본값(true)은 최상단으로 올라감 import Link from 'next/link' export default function Page() { return ( Dashboard ) } 4. 뷰포트에 보이는 요소중 L..
