구현하기
개발 및 배포하기
주요 화면
주요 기술 및 기능
공통
경로 파라미터와 Format.js을 이용한 다국어(영어/한국어) 지원
서버측
DB 데이터 패칭 및 페이지 렌더링
Supabase 서버를 통한 PostgreSQL 데이터베이스
Next.js 및 Supabase 클라이언트를 사용한 URL 기반 데이터 요청
사전 설정 데이터 요청에 대한 페이지 사전 렌더링
사용자 지정 데이터 요청에 대한 동적 페이지 렌더링
Next.js 서버 라우트를 경유한 공공 API 실시간 데이터 요청
[참고] 서버측 데이터 패칭을 진행하는 이유
클라이언트측
Hydration 및 데이터 출력, 서버로 데이터 요청
React Query 클라이언트로 Hydration 진행하여 서버-클라이언트간 데이터 싱크 및 클라이언트측 데이터 요청 발생 대비
React Hook Form 기반 데이터 요청 폼
CSS 필터를 사용한 데이터 시각화
Tone.js를 사용한 데이터 청각화
CSV 다운로드
다크모드
반응형 디자인
주요 동작 원리
페이지별 데이터 유형과 렌더링 방식
URL이 곧 페이지별 데이터 요청에 필요한 인풋이 된다. 그러므로 한 번 발생한 URL 요청에 대해선 캐싱 된 응답을 전송하여 성능을 최적화한다. 단, 실시간 데이터 요청(Realtime)은 URL이 동일하더라도 캐싱을 진행하지 않는다. 사전 설정 데이터(Preset)에 해당하는 라우트에 대해선 쿼리 파라미터를 생략하고, 필요한 인풋을 상숫값으로 지정해두어 빌드 타임에 데이터를 불러와 페이지를 생성해둔다.
/search
Custom
(Database)
SSR
Yes (Manual)
클라이언트, 서버, 데이터베이스간 생명 주기
URL 입력부터 클라이언트로의 최종 데이터 응답까지 요청-응답 생명 주기를 데이터 처리 주체에 따라 구분하고, 시간의 흐름에 따라 정리했다.
Client
Browser
OS
Server
Next.js
Vercel
Database
Supabase Server & PostgreSQL Database
Supabase
CDN
Supabase CDN
Supabase
컴포넌트 구조
Server Component
Data Fetcher(Provider)
Client Component
Data Consumer, Data Updater
아래 그림은 서버 to 클라이언트, 컴포넌트 to 컴포넌트 간 데이터 흐름을 나타낸다. 서버 컴포넌트는 데이터베이스 서버에 데이터를 요청하고 이를 클라이언트 컴포넌트로 전달하는 역할을 담당한다. 클라이언트 컴포넌트는 전달받은 데이터를 출력하는 역할을 담당하며, 출력 양식에 맞게 데이터셋(Dataset), 시퀀스(Sequence), 씬(Scene), 비트(Bit) 순으로 변환하는 과정을 거친다.
의존성 구조
애플리케이션 동작을 이루는 의존성들은 5개의 계층으로 구성되어있다. 각 계층은 안쪽으로부터 바깥쪽으로 의존성 규칙을 가지며, 안쪽 계층은 바깥쪽 계층에 대해 알지 못한다. 이로 인해, 각 계층은 독립적으로 변경하거나 업데이트할 수 있다.
lib그룹은 외부node_modules의존성을 캡슐화하여domains,components,app그룹에 의존성으로 주입된다. 단, Next.js 프레임워크 특성상 Next.js 내장 모듈은app과components그룹에서 직접 호출할 수 있도록 허락한다.domains그룹은lib/model의 데이터베이스 스키마와 타입을 바탕으로 유니버셜 환경에서 사용할 수 있는 데이터 조회 및 업데이트 함수를 정의한다. 또한 이를 바탕으로 클라이언트측 데이터 Hydration을 위한 리액트 쿼리 함수도 정의한다.app과components그룹은 유스케이스, 즉domains내 정의된 데이터 조회 및 변경 함수를 호출해 실행하는 페이지(라우트) 혹은 컴포넌트를 포함하며, 서버 데이터 유틸 클래스를 포함한 기타 유틸 함수들을 호출하여 UI 데이터로 매핑한다.레이아웃, 테마 등의 전역 UI 상태는
components그룹에서 관리한다.
성능
Last updated