개발하는 너구리

Next.js는 기본적으로 렌더링 할 경우 서버에서 사전 렌더링(pre-rendering) 하는 방식을 사용합니다.HTML을 미리 렌더링 한 후 사용자의 요청이 오면 Chunk 단위로 Javascript를 보내주어 이벤트가 작동하도록 합니다. 이를 Hydrationd 이라고 합니다.서버에서 사전 렌더링 하는 방법은 SSG와 SSR로 나뉘어집니다. (둘의 차이는 HTML을 생성하는 시기에 있습니다.)Next.js는 다양한 렌더링 방식을 사용는데 각각의 방식의 동작원리와 특징에 대해 알아보려합니다.SSGStatic Site Generation: 정적 사이트 생성빌드 시 HTML이 생성되고 이는 CDN으로 캐시됩니다. 그 후 모든 요청 시 캐시된 HTML을 재사용합니다.웹 페이지를 미리 렌더링하여 HTML 파..

useOptimistic 훅은 낙관적 업데이트(Optimistic UI)를 구현할 수 있도록 도와주는 훅입니다. 이 훅을 사용하면 UI에서 비동기 작업이 진행될 때 일시적으로 예상 결과를 UI에 미리 반영하여 사용자 경험을 개선할 수 있습니다.사용법useOptimistic 훅은 두 개의 매개변수를 받습니다:initialState: 훅이 호출되기 전의 초기 상태입니다.updateFn: 실제 비동기 작업의 결과를 받아와서 어떻게 상태를 업데이트할지를 정의하는 함수입니다.const [optimisticState, setOptimisticState] = useOptimistic(initialState, updateFn);   반환값useOptimistic 훅은 두 개의 값으로 구성된 배열을 반환합니다:optim..

// NextJs는 공격적인 캐싱을 수행합니다 // ⭐️요청 메모이제이션 (서버 측)// 'GET'메소드에서만 발생✅// NextJs는 동일한 구성의 데이터 요청을 저장합니다.// 이는 불필요한 중복 데이터 페칭을 피할 수 있습니다.// 캐시는 요청 기간 동안만 지속됩니다.// --> 예를 들어, HTTP 헤더를 통해 Cache-Control이나 Expires 등의 지시자를 사용하여 캐시의 유효 기간을 설정// --> 동일한 구성(예: 동일한 URL, 동일한 쿼리 매개변수 등)으로 데이터 요청이 발생할 경우, Next.js는 이전에 동일한 요청에 대해 이미 페칭된 데이터를 캐싱합니다.// ex)// fetch('http://api.com', {//   next: {//     // next속성은 next..

Interceptor RoutesInterceptor Routes는 사용자 경험의 유연성을 높이는 데 초점을 맞춘 기능입니다. 기존 페이지 전환 방식과 달리, 현재 페이지 컨텍스트를 유지하면서 새로운 콘텐츠를 불러오거나 UI 요소를 변경할 수 있도록 합니다.핵심 특징:부드러운 사용자 경험: 페이지 전환 없이 모달, 드롭다운 메뉴, 슬라이딩 패널 등을 구현하여 자연스러운 사용자 경험을 제공합니다.코드 간결성 향상: 레이아웃 유지를 보장하면서 새로운 라우트를 렌더링하는 코드를 간소화하여 코드 관리를 용이하게 합니다.SEO 개선: SPA(Single Page Application)의 장점을 활용하여 페이지 전환 없이 콘텐츠 업데이트를 수행하여 SEO에 도움을 줄 수 있습니다. 활용 사례: 모달 창: 페이지 전..

개념서버 액션은 Next.js 애플리케이션의 서버 측에서 실행되는 비동기 함수입니다. 이러한 함수는 데이터 변경과 폼 제출을 관리하는 데 사용됩니다. 유저로부터 받은 입력값을 서버 액션을 통해 서버에서 데이터를 처리하고 결과를 클라이언트에게 전달할 수 있습니다.    필요성 및 주요기능 웹 애플리케이션에서 폼 제출과 데이터 관리는 매우 중요합니다. 사용자의 입력을 효과적으로 처리하고 데이터의 일관성을 유지하는 것은 어플리케이션의 안정성과 사용자 경험을 크게 향상시킬 수 있습니다. 서버 액션은 다음과 같은 기능을 제공합니다.폼 제출 처리: 서버 액션은  태그와 연동되어 폼 제출을 처리합니다. 이를 통해 서버 측에서 사용자 입력을 받아 필요한 작업을 수행할 수 있습니다.데이터 변형: 데이터를 생성, 수정, ..

bcrypt 라이브러리설명bcrypt는 비밀번호 해싱을 위한 라이브러리로, 보안성을 높이기 위해 설계되었습니다. 비밀번호를 단방향 해시 함수로 변환하여 데이터베이스에 저장하고, 인증 시 해시된 값과 비교하여 유효성을 검증합니다. 이 방식은 비밀번호를 직접 저장하는 것보다 안전합니다.주요 특징강력한 보안성: bcrypt는 반복 작업을 통해 해시 값을 생성하여, 무작위 대입 공격에 대한 방어력을 높입니다.소금(salt) 추가: 해시 값 생성 시 고유한 소금을 추가하여 동일한 비밀번호라도 해시 값이 다르게 나옵니다.비용 인자(cost factor): 해시 연산의 복잡도를 조정할 수 있어, 컴퓨팅 성능 향상에 따라 보안 수준을 높일 수 있습니다.import bcrypt from 'bcrypt';// 비밀번호 해..

Prisma는 TypeScript와 JavaScript 환경에서 사용되는 최신 ORM(Object-Relational Mapping) 도구입니다. 데이터베이스와 애플리케이션 간의 상호작용을 단순화하고 타입 안전성을 제공하며, 개발자가 데이터베이스 작업을 보다 쉽게 수행할 수 있도록 도와줍니다.주요 기능 및 특징자동 생성된 타입:Prisma는 데이터베이스 스키마를 기반으로 TypeScript 타입을 자동으로 생성하여, 데이터베이스 작업에서 타입 안전성을 보장합니다.데이터베이스 마이그레이션:Prisma는 마이그레이션 시스템을 제공하여, 데이터베이스 스키마의 변경 사항을 관리하고 적용할 수 있습니다.프로그래밍 인터페이스:Prisma Client를 통해 데이터베이스 쿼리를 TypeScript 또는 JavaScr..

zod 라이브러리는 TypeScript용으로 설계된 데이터 검증 및 스키마 정의 도구로, 강력한 유효성 검사 기능을 제공합니다.  주요 메서드 z.string()문자열 유형을 나타내는 스키마를 생성합니다.옵션:.min(minLength: number, errorMessage: string): 최소 길이를 지정합니다..max(maxLength: number, errorMessage: string): 최대 길이를 지정합니다..regex(regex: RegExp, errorMessage: string): 정규 표현식을 사용하여 문자열을 검사합니다z.number()숫자 유형을 나타내는 스키마를 생성합니다.옵션:.int(): 정수 값인지 검사합니다..positive(), .negative(), .nonpositi..