[멋쟁이사자처럼] 7일차 정리

Next.js와 데이터베이스

"use client" 지시어: 컴포넌트 파일 최상단에 "use client"를 선언하면, 해당 컴포넌트는 클라이언트(브라우저)에서 렌더링되고 실행됩니다. 이를 통해 useState, useEffect 같은 React Hook이나 브라우저 API를 사용할 수 있으며, 기존의 CSR 방식으로 개발 가능합니다. 이러한 CSR 방식을 사용할 경우, react-query와 같은 데이터 페칭 라이브러리를 적용하여 클라이언트 측에서 데이터를 관리할 수 있습니다.

서버 컴포넌트: "use client"가 없는 컴포넌트는 기본적으로 서버(Node.js 환경)에서 실행됩니다. 이는 데이터베이스 조회나 파일 시스템 접근 등 서버에서만 가능한 작업을 안전하게 처리하는 데 유리합니다.

실행 환경 구분: Next.js는 하나의 프로젝트 안에서 서버(Node.js 환경)와 클라이언트(웹 브라우저 환경) 코드를 모두 다룹니다.

 

이러한 Next.js는 핵심적인 렌더링 환경을 서버에서 사용할 것인지 웹에서 사용할 것인지 구분해야 하며, 이는 노드에서 사용할 것인지 브라우저에서 사용할 것인지 결정하는 것과 같습니다.

Link 컴포넌트와 Prefetch 기능

Link와 Prefetch 기능은 Next.js의 사용자 경험을 극대화하는 요소입니다.

 

• Link 컴포넌트: 페이지 간 이동을 위해 <a> 태그 대신 사용하는 Next.js의 기본 컴포넌트입니다. <a> 태그와 달리, Link 컴포넌트는 페이지 전체를 새로고침하지 않고 변경된 부분만 다시 그리는 클라이언트 사이드 네비게이션을 구현하여 매우 빠른 페이지 전환을 제공합니다.
  
  
• Prefetch 기능: Link 컴포넌트의 핵심 기능 중 하나로, 사용자가 링크를 클릭하기 전에 해당 페이지에 필요한 데이터를 미리 불러오는 기술입니다. 화면에 Link 컴포넌트가 보이면 Next.js는 백그라운드에서 연결된 페이지의 코드와 데이터를 조용히 가져옵니다. 덕분에 사용자가 링크를 클릭했을 때, 거의 지연 시간 없이 즉시 페이지가 로드되는 것처럼 느껴집니다.

이미지 최적화 (<Image> 컴포넌트)

import Image from 'next/image'를 통해 사용하는 Image 컴포넌트는 웹 성능을 향상시킵니다.

 

• 레이아웃 시프트(Layout Shift) 방지: 이미지가 로드될 공간을 미리 확보하여 이미지가 뒤늦게 로딩되면서 다른 요소들을 밀어내는 '레이아웃 시프트' 현상을 방지합니다.
   
• 자동 최적화: 사용자의 기기(PC, 모바일 등)에 맞는 최적의 이미지 크기를 제공하고 WebP와 같은 최신 이미지 포맷으로 자동 변환하여 데이터 사용량을 줄이고 로딩 속도를 높입니다.

---

데이터베이스와 시스템 분석

시스템과 데이터의 본질

• 시스템이란? 여러 구성 요소가 각자의 역할을 수행하며 유기적으로 결합된 집합체입니다. 만약 요소가 증거(데이터)를 남기지 않는 등 역할을 제대로 하지 않으면 시스템은 붕괴될 수 있습니다.
   
• 데이터베이스: 정규화된 데이터의 베이스(기반)입니다.
   
• 데이터의 의미: 시스템 안에서 발생하는 모든 행위의 '증거' 또는 '기록'입니다. 따라서 무엇을 데이터로 관리할지 결정하는 것은 "무엇을, 언제, 왜 저장하는가?"에 대한 답을 찾는 과정입니다.
   
• 시스템 설계의 기준: 시스템을 만드는 기준은 결국 업무를 수행하는 사용자(액터)들의 행위, 즉 업무 로직(Business Logic) 입니다.
   

데이터 모델링 과정

데이터베이스를 설계하는 과정은 크게 3단계로 구성됩니다.

 

1. 개념적 설계 (Concept Design): 업무적인 흐름을 분석하여 데이터베이스에 저장할 데이터를 선별하고, 각 요소(엔티티)와 그들 간의 관계를 정의하는 단계입니다.
   • 엔티티(Entity): 저장할 데이터의 대상. 다이어그램에서 사각형으로 표현됩니다. (예: 손님, 요리사, 메뉴)
   • 관계(Relation): 엔티티 간의 행위. 마름모로 표현됩니다. (예: 주문, 결제)
2. 논리적 설계 (Logical Design): 개념적 설계의 결과를 관계형 데이터베이스(R-DB)의 테이블 구조로 변환하는 과정입니다. 이 단계에서 데이터 정규화가 이루어집니다.
    
3. 물리적 설계 (Physical Design): 논리적 설계를 특정 DBMS(MySQL, PostgreSQL 등)의 실제 테이블 형태로 만드는 최종 단계입니다. 데이터 타입, 길이, 제약조건 등을 구체적으로 설정합니다.

데이터 정규화(Normalization)

• 정규화란? 데이터베이스 테이블의 '표준화' 과정입니다. 데이터의 결함을 제거하고, 특히 중복을 제거하여 데이터의 일관성과 무결성을 확보하는 것을 목표로 합니다.
   
• 목표: 중복이 제거된 파일(테이블) 형태가 표준이며, 그 표준에 맞추는 것이 정규화입니다.