taystory

✅ getStaticProps()와 getServerSideProps()는 리액트 컴포넌트 함수가 아님!getStaticProps()와 getServerSideProps()는 **Next.js에서만 사용되는 특별한 함수(데이터 페칭 함수)**입니다.리액트 컴포넌트가 아니라, Next.js가 서버 측에서 실행하는 비동기 함수입니다.따라서, 리액트 컴포넌트 내부에서 직접 호출할 수 없습니다.(즉, useState나 useEffect처럼 클라이언트 측에서 실행할 수 없음!)🔍 리액트 컴포넌트와 차이점1️⃣ ✅ 리액트 컴포넌트는 클라이언트에서 실행function MyComponent() { return Hello, world!;}렌더링 시점: 브라우저(클라이언트)에서 실행됨사용 목적: UI를 렌더링하는 역할..

38. Node.js - Looking Behind the Scenes🖍️요약단일 스레드 & 이벤트 루프: Node.js는 하나의 JavaScript 스레드에서 실행되지만, 이벤트 루프가 모든 비동기 콜백을 관리하여 여러 요청을 효율적으로 처리합니다.📌 Node.js "이벤트 루프"와 "워커 풀" 작동 방식- Node.js는 🌟메인 스레드에서 이벤트 루프를 실행🌟하며, 이 루프는 등록된 타이머, I/O 작업, setImmediate, close "이벤트 등의 콜백"을 순차적으로 처리합니다. => "이벤트 루프"- 긴 I/O 작업(예: 파일 작업, 네트워크 요청 등)은 메인 스레드에서 직접 처리하지 않고, 🌟워커 풀에 위임되어 별도의 스레드에서 처리🌟됩니다. → ✨이로 인해 메인 스레드가 ..

185. Handling Request Memoization✅ Next.js의 요청 중복 방지(request memoization) 메커니즘 정리💡 백엔드 서버와의 통신 과정메시지 데이터를 불러오기 위해 Next.js 프론트엔드에서 백엔드 서버로 요청을 보냄.그런데, 동일한 데이터를 가져오는 페이지(page.js)와 레이아웃(layout.js)에서 각각 요청을 보냄 → 총 두 번의 요청 발생이로 인해 백엔드 로그에 두 개의 요청이 기록됨 📝📝⚠️ 중복 요청이 발생하는 이유Next.js는 같은 요청이라면 중복을 방지하고 하나의 요청만 보내도록 최적화(= request memoization)되어 있음.하지만 요청 헤더(headers)가 다르면, Next.js는 이를 서로 다른 요청으로 인식하여 중복 요..

88. File-based Routing & React Serveer Components📌 강의 요약이번 프로젝트에서 화면에 어떻게 요소가 렌더링되는지 이해하기 위해, Next.js의 app 폴더를 살펴봅니다.🔹 app 폴더의 역할Next.js에서 가장 중요한 폴더로, 페이지를 구성하는 파일들이 포함됩니다.Page.js 파일이 존재하며, 이는 Next.js에서 페이지를 렌더링하는 예약된 파일명입니다.Layout.js 등과 함께 특정한 역할을 수행하는 파일명이 있으며, 강의에서는 이를 계속 다룰 예정입니다.🔹 Page.js는 서버 컴포넌트Page.js 내부를 보면 일반적인 React 함수형 컴포넌트로 구성되어 있습니다.하지만 Next.js에서는 이를 서버 컴포넌트(Server Component) 로 ..

기존 아키텍처의 문제점현재 구조: Next.js 앱 → HTTP 요청 → 별도 백엔드 서버 → 데이터베이스불필요한 HTTP 요청과 서버 분리로 인한 오버헤드 발생단순한 데모 앱의 경우, 별도 백엔드가 꼭 필요한지 재고해볼 필요가 있음 개선된 아키텍처Next.js 앱에서 직접 데이터베이스 접근불필요한 HTTP 요청 제거데이터베이스 파일(data.db)을 Next.js 프로젝트로 이동 구현 단계1. SQLite 설정# better-sqlite3 패키지 설치npm install better-sqlite3  2. 데이터베이스 연결 설정// lib/news.jsimport SQL from 'better-sqlite3';// 프로젝트 루트 기준 상대 경로로 DB 파일 접근 (data.db파일을 backend 폴더 ..

라우트 핸들러(Route Handler)에 대해 깔끔하게 정리해드리겠습니다:라우트 핸들러란?NextJS에서 API 엔드포인트를 만들기 위한 특별한 파일입니다일반적인 페이지를 렌더링하는 대신 데이터를 주고받는 역할을 합니다 주요 특징파일 구조:route.js 파일로 생성 (페이지용 page.js와 다름)API 폴더 등에 위치시키며, 레이아웃이 필요하지 않음지원하는 HTTP 메서드:GET, POST, PATCH, PUT, DELETE 등각 메서드명으로 함수를 export하여 사용작동 방식:자동으로 request 객체를 받아옴JSON 데이터나 일반 텍스트 등을 응답으로 반환 가능클라이언트의 요청을 처리하고 응답을 보내는 역할 - 코드 예시export function GET(request) { console...

"use client"; // error.js must be a Client Component!export default function Error({ error }) { return ( An error occurred! Failed to fetch meal data. Please try again later. );} 주석에서 말하는 핵심은 Next.js의 error.js 파일이 클라이언트 컴포넌트여야 하는 이유에 대한 설명입니다. 하나씩 풀어서 설명해볼게요.🔹 Next.js의 error.js는 왜 "use client"가 필요한가?Next.js에서는 특정 페이지나 레이아웃에서 오류가 발생했을 때, 이를 처리하기 위해 error.js 파일을 사용할 수 있습니다.하지만..

Next.js에서 이미지 파일을 불러오는 방식에는 두 가지 주요 방법이 있습니다.로컬 파일 시스템에서 직접 불러오는 경우 (assets 폴더에서 import)퍼블릭 폴더 또는 데이터베이스에서 URL을 통해 불러오는 경우 (public 폴더 또는 DB 경로 사용)각 방식의 차이점을 설명하겠습니다. 1. 로컬 파일 시스템에서 직접 import (assets 폴더 사용)이 방식은 Next.js의 import 문을 사용하여 정적인 이미지를 불러오는 것입니다.예를 들어, assets 폴더에 logo.png 파일이 있다고 가정하면,import Image from "next/image";import logo from "../assets/logo.png"; // 정적 importexport default functi..

React Router의 Form과 useForm (react-hook-form)은 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다:데이터 처리 방식:React Router Form: 폼 데이터를 자동으로 수집하여 지정된 action 함수로 전달하고, 서버 통신과 페이지 전환을 한번에 처리합니다useForm: 클라이언트 사이드에서 데이터 수집과 유효성 검사에 중점을 두며, 서버 통신은 별도로 처리해야 합니다라우팅 통합:React Router Form: 라우팅과 통합되어 있어 submit 후 자동 페이지 전환(redirect)이 쉽습니다useForm: 라우팅과 독립적이며, 페이지 전환은 별도로 처리해야 합니다사용 목적:React Router Form: 서버와의 통신이 필요한 전통적인 폼 제출 패턴에 적합..

와 useNavigate()는 둘 다 React Router에서 페이지를 리디렉션하거나 이동할 때 사용하는 방법이지만, 사용 시점과 목적에 따라 적합한 경우가 다릅니다.  1. 컴포넌트 형태로 사용되며 JSX 안에서 특정 조건에 따라 리디렉션할 때 적합합니다.장점: JSX 구조에 자연스럽게 녹아들어 조건부 렌더링과 함께 사용할 수 있습니다.사용 예:if (!user) { return ;} 이유:ProtectedRoute처럼 렌더링 과정에서 인증 여부를 확인하고, 조건에 따라 리디렉션이 필요한 경우 return문에서 바로 사용하기 편리합니다.컴포넌트 내에서 리턴하는 방식이기 때문에 코드가 간결합니다.2. useNavigate()훅 형태로, 함수 내부에서 프로그래밍적으로 페이지 이동을 수행할 때 사용합니다..