개발하는 너구리

Tailwind CSS에서는 @tailwind base, @tailwind components, @tailwind utilities를 사용하여 CSS를 구조화하고 유지 보수하기 쉽게 만듭니다. @tailwind base@tailwind base는 기본 스타일을 정의합니다. 여기에는 브라우저의 기본 스타일을 재정의하는 Tailwind의 사전 정의된 기본 스타일과 사용자 정의 스타일이 포함됩니다. 이를 통해 프로젝트 전반에 걸쳐 일관된 기본 스타일을 적용할 수 있습니다.예시:/* base.css */@tailwind base;@layer base { body { font-family: 'Inter', sans-serif; background-color: #f7fafc; color: #2d3..

Tailwind CSS는 유틸리티 클래스들을 제공하여 빠르고 쉽게 스타일을 적용할 수 있게 해줍니다. 이 유틸리티 클래스들 중에서 Modifier 클래스들은 특정 조건이나 상태에 따라 스타일을 적용하는 데 사용됩니다. 다음은 Tailwind CSS의 대표적인 Modifier 클래스들과 그 기능들입니다  Tailwind CSS는 유틸리티 클래스들을 제공하여 빠르고 쉽게 스타일을 적용할 수 있게 해줍니다. 이 유틸리티 클래스들 중에서 Modifier 클래스들은 특정 조건이나 상태에 따라 스타일을 적용하는 데 사용됩니다. 다음은 Tailwind CSS의 대표적인 Modifier 클래스들과 그 기능들입니다:1. Pseudo-Class Modifiers이 클래스들은 특정 상태일 때 스타일을 적용합니다. hover..

Next.js에서 Server Components는 서버에서 렌더링되는 컴포넌트를 의미합니다. 이는 클라이언트에서 실행되지 않고 서버에서만 실행되며, HTML을 생성하여 클라이언트로 전달됩니다. 이러한 접근 방식은 성능 향상, SEO 개선, 초기 로드 시간 단축 등의 이점을 제공합니다.주요 특징서버 전용 실행: Server Components는 클라이언트에서 실행되지 않으며, 서버에서만 실행됩니다. 따라서 클라이언트로 전송되는 JavaScript 번들의 크기를 줄일 수 있습니다.데이터 페칭: Server Components는 서버에서 직접 데이터베이스나 API로부터 데이터를 가져올 수 있습니다. 이를 통해 클라이언트 측에서 데이터를 가져오기 위한 추가적인 코드나 네트워크 요청을 줄일 수 있습니다.SEO ..

lucia, sqlite를 이용한 authentication 구현import { Lucia } from 'lucia';import { BetterSqlite3Adapter } from '@lucia-auth/adapter-sqlite';import { cookies } from 'next/headers';// 발신 응답에 포함된 쿠키에 접근할수있게 해줌// cookies 객체는 Next.js의 서버 사이드✅ 코드에서 쿠키에 접근할 때 사용// cf) 클라이언트 사이드에서는 cookies를 직접적으로 사용할수없음import db from './db';const adapter = new BetterSqlite3Adapter(db, { user: 'users', session: 'sessions',});..

Next.js의 Image 컴포넌트는 웹 애플리케이션에서 이미지를 최적화하여 성능을 향상시키는 데 중점을 둔 도구입니다. 이 컴포넌트를 사용하면 이미지 로드 성능을 개선하고, 사용자 경험을 향상시킬 수 있습니다. 주요 기능자동 크기 조정 (Automatic Resizing)Image 컴포넌트는 지정된 width와 height 속성에 따라 이미지를 자동으로 크기 조정합니다.layout="fill"을 사용하면 부모 요소의 크기에 맞게 이미지를 자동으로 채웁니다.레이아웃 모드 (Layout Modes)intrinsic: 이미지의 원본 비율을 유지하면서 지정된 크기로 조정됩니다. 기본 값입니다.fixed: 고정된 크기의 이미지를 표시합니다. width와 height 속성을 사용해야 합니다.responsive: ..

revalidatePathrevalidatePath는 특정 경로의 페이지를 다시 검증하는 데 사용됩니다. 이 기능은 getStaticProps로 생성된 정적 페이지를 일정 주기마다 다시 빌드하도록 설정할 수 있습니다.용도: 특정 경로의 페이지를 서버에서 다시 빌드하여 최신 데이터를 반영합니다.revalidateTagrevalidateTag는 특정 태그와 연결된 페이지를 다시 검증하는 데 사용됩니다. 태그는 여러 페이지에 적용할 수 있으며, 한 번의 다시 검증으로 여러 페이지를 최신 상태로 유지할 수 있습니다.용도: 특정 태그와 관련된 페이지를 한 번에 다시 검증합니다. fetch의 cache 속성Next.js에서는 fetch 함수의 cache 속성을 통해 캐싱 전략을 제어할 수 있습니다. fetch의 c..

Next.js에서 useFormState와 useFormStatus 사용하기  1. useFormStateuseFormState 훅은 Next.js에서 양식 데이터를 관리하고 유효성 검사를 수행하는 데 사용되는 Hook입니다.기능:양식 데이터를 저장하고 업데이트합니다.양식 오류 메시지를 관리합니다.양식 제출 처리를 수행합니다.사용 방법:const MyForm = () => { const { state, handleChange, handleSubmit } = useFormState({ initialValues: { name: '', email: '', }, }); const onSubmit = (event) => { event.preventDefault(); h..

Next.js에서 Suspense는 React의 Suspense 컴포넌트를 사용하여 비동기 작업(주로 데이터 가져오기)을 처리할 때 UI를 더 잘 관리할 수 있도록 도와줍니다. Suspense는 데이터가 로드되기 전까지 로딩 상태를 표시하고, 데이터가 준비되면 실제 UI를 렌더링합니다.React의 Suspense는 서버 측에서 데이터를 미리 가져와서 페이지를 렌더링할 때 사용할 수 있으며, 이는 사용자 경험을 향상시키는 데 매우 유용합니다. Next.js는 이러한 기능을 지원하여 서버 측에서 데이터를 가져와 렌더링하는 것을 더욱 쉽게 만들어 줍니다.기본 개념Suspense는 컴포넌트가 렌더링하기 전에 데이터가 준비될 때까지 기다릴 수 있게 해줍니다. 로딩 상태를 표시할 때 fallback 속성을 사용합니..