프로젝트 중 Next.js에서 서버 컴포넌트인 최상단의 페이지 컴포넌트에서, 클라이언트 컴포넌트인 자식 컴포넌트에게 데이터를 어떻게 넘겨줄 수 있을지에 대한 고민을 했다. 우선 전역 상태관리로 관리하는 데이터는 서버 컴포넌트에서 불러올 수 없다. (!!)그럼 첫 번째 방법은, React Server Component Payload (RSC)를 활용하는 것이다.import ClientComponent from './client-component';import { fetchUserData } from './data-fetching';export default async function ServerComponent() { const userData = await fetchUserData(); retur..

❓ HTTP 상태 코드- HTTP 상태코드는 서버가 클라이언트(브라우저)의 요청에 대한 응답 상태를 나타내는 3자리 숫자를 말한다. 이 코드를 통해 요청이 성공했는지, 실패했는지, 추가 조치가 필요한지 등을 빠르게 파악할 수 있다. 따라서 서버와 클라이언트 간의 효율적인 커뮤니케이션 수단으로 활용된다.▶ 기본 사용 예시fetch('https://api.example.com/data') .then(response => { if (response.status === 200) { return response.json(); } else if (response.status === 404) { throw new Error('데이터를 찾을 수 없습니다'); } else if (re..

❓ Interface- 객체의 구조를 정의하는 타입스크립트의 방법 중 하나로, 객체의 형태를 설명하는 명세서와 같다. 주로 객체의 구조를 정의하고 클래스가 특정 계약을 준수하도록 강제하는 데 사용된다.▶ 기본 사용 예시interface User { id: number; name: string; age?: number; // 선택적 속성 readonly email: string; // 읽기 전용 속성}const user: User = { id: 1, name: "김개발", email: "dev@example.com"};❓ Type- 타입 별칭으로, 새로운 타입을 정의하는 방법이다. 객체 타입뿐만 아니라 원시 타입, 유니온 타입, 튜플 등 모든 종류의 타입에 이름을 붙일 수 있다. 더 넓은 범위..

throw new Error('@prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.');npx prisma generate를 하고 npm start로 서버를 실행하려고 했을 때, 이런 오류가 발생했다.이 에러가 날 당시 코드는 아래와 같았다.import { PrismaClient } from '@prisma/client';const prisma = new PrismaClient();export default prisma;내 프로젝트는 CommonJS가 아닌 ESM을 사용하고 있었기 때문에, 기본값이 CommonJS인 Prisma와 호환성 문제가 발생한 것이다.Object.definePro..

❓ Prisma- 데이터베이스 접근을 단순화하는 Typescript 기반 ORM. 기존의 복잡한 SQL 쿼리 작성과 수동 타입 정의 문제를 해결하기 위해 설계됐으며, 자동 생성되는 타입 세이프 쿼리 빌더가 핵심 기능이다. ➕ ORM(Object-Relational Mapping): 데이터베이스 테이블을 객체로 매핑해 프로그래밍 언어에서 직관적으로 조작할 수 있게 하는 기술을 의미한다.▶ 기본 사용 예시// 사용자 생성const user = await prisma.user.create({ data: { email: "dev@example.com", name: "개발자" }});// 전체 조회const users = await prisma.user.findMany();❗ 사용이유✅ 타입 안정성- 빌드 타임..

SSG는 웹 개발 렌더링 방식 중 하나로, 빌드 타임에 모든 페이지 콘텐츠를 미리 생성하여 정적 HTML 파일로 제공하는 기술이다. 이 방식은 페이지 요청마다 서버에서 렌더링하는 SSR과 달리, 배포 전에 모든 페이지를 준비해두어 빠른 로딩 속도와 우수한 SEO 효과를 제공한다. SSG는 특히 콘텐츠가 자주 변경되지 않는 웹사이트에 적합한 기술이다.❓ 정의- SSG는 애플리케이션을 서버에 배포하기 전 빌드 시점에 모든 페이지의 HTML을 미리 생성하는 렌더링 기법이다. - 빌드 타임에 리액트 코드를 HTML로 변환하여 정적 파일을 생성하므로, 사용자가 요청할 때 미리 준비된 HTML을 즉시 제공할 수 있다. - 서버는 빌드 과정에서 필요한 데이터를 모두 가져와 페이지를 렌더링하고, 이를 정적 파일로 저장..