공부 (109) 썸네일형 리스트형 [Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정 Supabase Auth 선택 이유 ✨Supabase는 PostgreSQL을 사용해 데이터 정규화, 복잡한 쿼리 작업 등 SQL의 모든 기능을 사용할 수 있습니다. 그리고 요즘 떠오르는 기술이며 공식 문서 또한 너무 잘 되어 있기 때문에 적용하기 쉽다고 판단해서 선택하게 되었습니다. 사용 방법 📖Authentication > ProvidersProviders 탭으로 이동하면 다양한 로그인을 선택할 수 있습니다.이메일을 이용해 간단한 로그인 구현과 OAuth를 이용한 소셜 로그인도 구현할 수 있습니다. ✨ Provider를 등록하는 방법은 공식 문서에 너무 잘 나와 있으니 생략하도록 하겠습니다. Google Login with Google | Supabase DocsUse Sign in with Goo.. [트러블 슈팅] Next.js generateStaticParams 정적 경로 생성의 오해와 해결 과정 라이엇 도감 만들기 프로젝트에서 발생한 트러블 슈팅입니다.발생한 오류 🔥Next.js에서 `/champions/[id]`와 같은 동적 경로 페이지를 빌드할 때, 정적 경로가 아닌 동적 경로로 처리되며 `dynamic`으로 표시되는 문제가 발생했습니다.// app > champions > page.tsxexport const generateStaticParams = async () => { const { data: allChampions }: { data: ChampionsList } = await fetchAllChampions(); return Object.keys(allChampions).map((champion) => ({ id: champion, }));}; `generateSt.. Next.js 알아보기 8 (Caching - 어려움 주의) Next.js의 Caching 📖 ❗기억해야 할 핵심 `Next.js는 대부분 영역에서 fetch 함수를 기반으로 캐싱한다`입니다. next.js의 fetch API는 브라우저의 fetch API를 기반으로 next.js에서 확장한 새로운 `fetch API`입니다.그중에서도 build(Full Route Cache)와 웹 서버에 요청(Data Cache)할 때 캐싱을 진행합니다. Full Route CacheNext.js는 빌드 시점에 페이지를 렌더링 하고 그 결과를 캐싱하는 `Full Route Cache` 기능을 제공합니다. 빌드할 때 Full Route Cache에 캐싱된 값이 없기 때문에 `Data Source`에서 값을 가지고 Full Route Cache에 값을 캐싱하고 이후 유저가 웹 서.. Next.js 알아보기 7 (Route Handler & Server Action) Route Handler 📖webRequest와 Response APIs를 쓸 수 있는 핸들러를 만들 수 있게 끔 허용해 restful 한 api를 만들 수 있게 해 줍니다. 서버, 클라이언트 컴포넌트 개념을 포함하는 React 컴포넌트 개념을 벗어나 `route.ts`파일을 다루게 됩니다. 사용 방법api > apiTest 폴더를 만든 후, 하위에 route.ts 파일을 생성해 주고 아래 코드를 적습니다.export async function GET(request: Request) { console.log("GET /api/test");}export async function POST(request: Request) { console.log("POST /api/test");}export async.. Next.js 알아보기 6 (Asset 최적화) 이미지 최적화 📖next.js는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트 `Image` 컴포넌트를 제공해 줍니다. `크기 최적화`: 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, Webp 및 AVIF와 같은 최신 이미지 형식을 사용합니다.`시각적 안정성`: 이미지가 로딩될 때 레이아웃 이동을 자동으로 방지합니다.`빠른 페이지 로드`: 네이티브 브라우저 지연 로딩을 사용해 이미지가 뷰포트에 들어올 때만 로드됩니다.`자산 유연성`: 원격 서버에 저장된 이미지도 포함해 필요에 따라 이미지 크기 조정. 사용 방법로컬 이미지 사용하기import Image from 'next/image'import profilePic from './me.png'export default function Page(.. Next.js 알아보기 5 (Suspense, Loading, Error, Streaming SSR) Loading UI 📖✨ Next.js 14의 App router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능입니다. 왜 중요할까?`사용자 경험 개선`: 로딩 중인 상태를 명확히 표시해 사용자의 불안감을 줄이고, 시스템이 응답하고 있음을 알립니다.`사용자의 불필요한 행동 문제 해결`: 현재 상태를 제공해 불필요한 클릭이나 페이지 이탈을 방지할 수 있습니다.`향상된 SEO 및 접근성`: 로딩 UI는 페이지의 일부분이 빠르게 렌더링 되어 SEO 성능을 향상하고, 사용자가 페이지를 더 빠르게 접근할 수 있도록 합니다. 사용방법로딩 컴포넌트 작성// app > loading.tsxexport default function Loading() { return Loading...;} .. Next.js 알아보기 4 (주요 렌더링 기법) CSR(Client Side Rendering) 📖 특징 ✨ 순수 리액트 사용했을 때 100%브라우저에서 js를 이용해 동적으로 페이지를 렌더링렌더링의 주체 : 클라이언트장단점 ✅(최초 로드 후) 사용자와의 상호작용이 빠르고 부드럽습니다.서버 부하가 적고, 서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋습니다.첫 페이지 로딩 시간(Time To View)이 길 수 있습니다.js가 로딩되고 실행될 때까지 페이지가 비어있어 SEO에 불리합니다. 직접 구현하기 아래 코드처럼 `"use client"`옵션을 추가하 사용할 수 있습니다."use client";import Image from "next/image";import React, { useEffect, useState } from "r.. Next.js 알아보기 3 (React Server Component, Client Component) React Server Component & Client Component 📖✨ 기본적으로 `app`폴더 하위의 모든 컴포넌트는 `서버 컴포넌트`입니다! 서버 컴포넌트말 그대로 서버에서 실행되는 컴포넌트입니다.// src>app>page.tsxexport default function Home() { console.log("여기는 어디일까요?"); return ( 안녕하세요! Next.js 입니다! );} 밑에 사진을 캡처 화면을 보면 브라우저가 아닌 `terminal`에 로그가 출력된 것을 확인할 수 있습니다. 이처럼 컴포넌트의 실행 환경이 브라우저인지 서버인지에 따라서 `서버 컴포넌트``클라이언트 컴포넌트`가 결정됩니다. 클라이언트 컴포넌트브라우저 상에서 실행되는 컴포넌.. 이전 1 2 3 4 5 6 7 ··· 14 다음
