전기방식 이야기

Next.js + Supabase로 인증 기능이 있는 노트 앱 만들기

Next.js + Supabase로 인증 기능이 있는 노트 앱 만들기목차프로젝트 설정Supabase 설정환경 변수 설정인증 구현노트 기능 구현프로젝트 설정먼저 Supabase 템플릿을 사용하여 Next.js 프로젝트를 생성합니다:npx create-next-app@latest -e with-supabase notescd notesnpm run devSupabase 설정database.new에서 새 Supabase 프로젝트 생성프로젝트 설정:조직 이름 설정프로젝트 이름 설정데이터베이스 비밀번호 생성 및 저장지역 선택 (사용자와 가까운 위치)환경 변수 설정.env.local 파일 생성 및 설정:NEXT_PUBLIC_SUPABASE_URL=your-project-urlNEXT_PUBLIC_SUPABASE_AN..

쉬운 NextJS 09: 컴포넌트의 필요성과 내부 동작 원리

Next.js Link 컴포넌트의 필요성과 내부 동작 원리목차배경 지식라우팅과 내비게이션 프로세스코드 스플리팅프리페칭Link 컴포넌트 vs Router.push대안적 접근 방법배경 지식Next.js에서 라우팅과 내비게이션은 다음과 같이 구분됩니다:라우팅: URL 구성과 페이지 컴포넌트 연결내비게이션: 실제 페이지 간 이동 프로세스라우팅과 내비게이션 프로세스Next.js는 하이브리드 방식으로 라우팅과 내비게이션을 처리합니다:// app/layout.tsximport { Link } from 'next/link'export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( ..

Next.js에서 네이티브 앱과 같은 페이지 전환 애니메이션 구현하기목차소개페이지 이동 방향 관리Router Wrapper 구현애니메이션 구현최적화 고려사항소개네이티브 앱과 같은 자연스러운 페이지 전환 애니메이션을 웹에서 구현하는 방법을 알아보겠습니다. 새로운 페이지로 이동할 때는 오른쪽에서 왼쪽으로, 이전 페이지로 돌아갈 때는 왼쪽에서 오른쪽으로 슬라이딩되는 애니메이션을 구현해보겠습니다.페이지 이동 방향 관리Router Wrapper Context// contexts/RouterWrapperContext.tsimport { createContext } from 'react';type Direction = 'forward' | 'backward';interface RouterWrapperContextTy..

Next.js Template Component의 특징과 활용목차서론템플릿 컴포넌트의 핵심 특징Layout vs Template활용 사례구현 예제결론서론Next.js에서 제공하는 Template 컴포넌트는 Layout 컴포넌트와는 다른 독특한 특징을 가지고 있습니다. 이 글에서는 Template 컴포넌트의 특징과 실제 활용 사례에 대해 자세히 알아보겠습니다.템플릿 컴포넌트의 핵심 특징템플릿 컴포넌트의 가장 큰 특징은 리렌더링이 발생한다는 점입니다. 이는 Layout 컴포넌트와의 가장 큰 차이점이기도 합니다.리렌더링 프로세스새로운 인스턴스 생성상태(State) 리셋이펙트(Effects) 재실행// app/templates/default.tsxexport default function Template({ c..

Next.js의 'use client' 지시문과 페이지 렌더링 심층 분석목차소개페이지 컴포넌트에서의 'use client'렌더링 프로세스 비교빌드 결과물 분석실제 구현 예제결론소개Next.js에서 페이지 컴포넌트 최상단에 'use client' 지시문을 사용하면 어떤 일이 발생하는지 심층적으로 알아보겠습니다. 특히 빌드 결과물과 렌더링 프로세스의 차이점을 자세히 살펴보겠습니다.페이지 컴포넌트에서의 'use client'페이지 컴포넌트에서 'use client' 사용 여부에 따라 렌더링 방식이 크게 달라집니다.'use client' 미사용 시// app/example/page.tsxexport default function Page() { return ( Server Component P..