TIL - 20250906

0906 Full-Stack: API 설계, 라우팅, 데이터 페칭 전략 복습

---

✅ 1. 백엔드(BE): Spring Boot 기반 REST API 설계

• 클라이언트(React)와 서버(Spring) 간의 명확하고 효율적인 통신을 위해 RESTful 원칙에 따라 API를 설계하고, 데이터 전송을 표준화했습니다.

1. 자원(Resource) 중심의 API 설계:

   • 이벤트(Event), 사용자(User) 등 관리할 대상을 자원으로 정의하고, 각 자원에 대한 CRUD(생성, 조회, 수정, 삭제) 작업을 HTTP 메서드(POST, GET, PUT, DELETE)와 매핑하여 직관적인 API 엔드포인트를 구축했습니다.

2. DTO (Data Transfer Object) 활용:

   • 데이터베이스와 직접 연결된 엔티티(Entity)를 클라이언트에 직접 노출하지 않고, API의 목적에 맞는 DTO를 사용했습니다.
   • 장점: API 스펙의 안정성 확보, 불필요한 데이터 전송 방지, 엔티티의 내부 구조 은닉.

3. 전역 CORS (Cross-Origin Resource Sharing) 설정:

   • 보안상의 이유로 브라우저는 다른 출처(Origin)의 리소스 요청을 차단합니다. React 개발 서버(localhost:5173)가 Spring API 서버(localhost:9000)에 접근할 수 있도록, Spring Boot에 전역 CORS 설정을 추가하여 특정 출처의 요청을 명시적으로 허용했습니다.

---

✅ 2. 프론트엔드(FE): React Router를 이용한 SPA 구조화 및 데이터 로딩

• 페이지 새로고침 없이 URL에 따라 다른 화면을 보여주는 싱글 페이지 애플리케이션(SPA)의 골격을 React Router를 사용하여 구축하고, 데이터 로딩 전략을 적용했습니다.

1. 중첩 라우팅과 레이아웃:

   • 여러 페이지에서 공통적으로 사용되는 UI(헤더, 네비게이션 등)를 레이아웃 라우트로 분리했습니다.
   • 부모 레이아웃에 <Outlet /> 컴포넌트를 배치하여, 자식 라우트 컴포넌트가 해당 위치에 렌더링되도록 하는 중첩 라우팅 구조를 구현하여 코드의 재사용성을 극대화했습니다.

2. 데이터 페칭 전략: useEffect vs loader:

   • useEffect 방식: 컴포넌트가 렌더링된 후에 데이터를 요청하는 전통적인 방식. 로딩 상태를 컴포넌트 내부에서 관리해야 합니다.
   • React Router loader 방식: 컴포넌트가 렌더링되기 전에 데이터를 미리 가져오는 최신 방식. loader가 데이터 로딩을 완료하면, 그 결과를 컴포넌트에 전달하여 렌더링을 시작합니다.
   • 장점: 데이터가 준비된 상태에서 컴포넌트가 렌더링되므로 사용자 경험(UX)이 향상되고, 컴포넌트 내 로딩 로직이 단순화됩니다.

3. 커스텀 에러 페이지:

   • 라우트 설정에 errorElement를 추가하여, 존재하지 않는 경로로 접근하거나 loader 실행 중 에러가 발생했을 때 사용자 친화적인 에러 페이지를 보여주도록 처리했습니다.

---

✅ 3. 백엔드(BE): QueryDSL을 이용한 무한 스크롤 API 구현

• 사용자가 스크롤을 내릴 때마다 다음 페이지의 데이터를 동적으로 불러오는 무한 스크롤 기능을 위해, 백엔드 API를 페이지네이션(Pagination)이 가능하도록 개선했습니다.

1. 커서 기반 페이지네이션: "3페이지"를 요청하는 대신, "ID가 10번인 이벤트 다음부터 10개"를 요청하는 방식으로, 실시간 데이터 변경에 더 강건한 페이지네이션을 구현했습니다.
2. QueryDSL 도입: 커서 ID를 기준으로 동적으로 WHERE 절을 생성하는 복잡한 쿼리를, 타입-세이프(Type-safe)하고 가독성 높게 작성하기 위해 QueryDSL을 도입했습니다.
3. API 응답 구조: API는 요청된 데이터와 함께, 다음 페이지의 존재 여부(has-next)를 반환하여 클라이언트가 추가 요청 여부를 판단할 수 있게 설계했습니다.

---

📌 요약

• 백엔드는 RESTful 원칙과 DTO를 사용하여 API를 설계하고, CORS 설정으로 외부 요청을 허용했습니다.
• 프론트엔드는 React Router의 중첩 라우팅으로 재사용 가능한 UI 구조를 만들었으며, 데이터 페칭 전략으로 useEffect보다 사용자 경험이 우수한 loader를 적극 활용했습니다.
• 대용량 데이터 조회를 위해, 백엔드는 QueryDSL을 이용한 커서 기반 페이지네이션 API를 구현하여 무한 스크롤의 기반을 마련했습니다.