👩🏻‍💻 프로그래밍 언어/Next.js

🚪 들어가며Next.js에서는 서버사이드 렌더링(SSR)을 통해 사용자가 페이지에 접근하기 전에 서버에서 데이터를 미리 가져와 페이지를 렌더링할 수 있습니다. 이 과정에는 두 가지 중요한 요소가 작동합니다API 핸들러 (@api/article.ts)페이지 컴포넌트 (@pages/community/index.tsx)이 두 요소가 어떻게 상호작용하여 동적 콘텐츠를 효율적으로 제공하는지 살펴보자 ⭐️1. @api/article.ts역할: API 핸들러기능: 클라이언트의 GET, POST, DELETE 요청을 처리하고, 외부 API나 데이터베이스와 상호작용하여 필요한 데이터를 가져오거나 수정합니다.이는 백엔드에서 데이터 처리를 담당합니다.예시: getArticles() 함수는 게시글 목록을 가져와 JSON 형..

CSR과 SSR 비교 및 CSR의 단점 보완 방법우선 SPA와 MPA에 대해서 알아보자1. SPA와 MPA의 기본 개념1️⃣ SPA (Single Page Application)하나의 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 화면이 깜빡이지 않고, 새로운 페이지를 요청할 때 서버로부터 필요한 데이터만 전달받아 렌더링합니다.즉, CSR(Client-Side Rendering) 방식을 사용합니다.2️⃣ MPA (Multi Page Application)전통적인 웹 애플리케이션 방식입니다. 페이지 전환 시마다 서버에서 새로운 HTML을 받아와 전체 페이지를 새로 렌더링합니다. 이때 페이지가 깜빡일 수 있으며, SSR(Server-Side Rendering) 방식을 사용합니다.2. CSR(Clie..

public 폴더정적 파일: public 폴더는 정적 파일(이미지, 폰트, 아이콘 등)을 저장하는 곳입니다. 이 폴더에 있는 파일은 / 경로로 접근할 수 있습니다.용도: 정적 파일을 저장하는 폴더로, 웹 애플리케이션의 리소스를 관리합니다.예시: public/images/logo.png 파일은 /images/logo.png로 접근할 수 있습니다._app.js 파일커스텀 App 컴포넌트: _app.js 파일은 Next.js 애플리케이션의 전체 레이아웃과 상태 관리를 위한 진입점입니다. 모든 페이지에서 공통으로 사용할 컴포넌트를 설정할 수 있습니다.용도: 각 페이지에서 공통적으로 적용할 설정을 정의합니다.상태 관리: 전역 스타일이나 레이아웃, 컨텍스트 제공 등을 설정할 수 있어, 페이지 전환 시 일관된 UI를..