[개발 블로그 제작기] 2. 화면별 필요한 데이터

김현우·2021년 9월 12일

저번에 정한 화면 구성 및 기능을 토대로 화면마다 어떤 데이터를 서버에서 받아와야 할 지 생각해 보겠습니다.

아래와 같은 형식으로 정리합니다
1. 화면 이름
(1) 기능 설명

  • 이 기능을 위해 서버에서 받아올 데이터1 이름: 타입
  • 이 기능을 위해 서버에서 받아올 데이터2 이름: 타입
    ...

1. 메인 화면

(1) 일일 방문자, 총 방문자 카운트

  • cntToday: number
  • cntTotal: number

(2) 카테고리 목록

  • categories: string[]

(3) HOT 컨텐츠 바로가기

  • contentPreviewsByHit: TContentPreview[] (조회순)
  • contentPreviewsByLike: TContentPreview[] (따봉순)

TContentPreview 타입
메인 화면에 노출시킬 컨텐츠 요약 정보를 담은 타입.
카드뉴스 형식으로 보여줄 것이니 기본적으로 제목, 썸네일, 카테고리가 있으며, 개발 중 추가될 수 있습니다.
조회수 순 / 따봉 순 두 가지를 보여줄 예정이니
배열이 두 개 필요합니다

당연하지만 데이터는 화면 진입 시 한번만 받아옵니다.

2. 컨텐츠 목록 화면

(1) 일반 게시판 형식의 컨텐츠 목록

  • contentPreviews: TContentPeview[]

(2) 카테고리 내비게이션

  • categories: string[]

TContent 타입
컨텐츠 상세 정보입니다.
제목, 작성일자, 내용, 따봉 수 4가지로 이루어져 있습니다.

categories는 메인화면에서 이미 받아와서 컨텐츠 목록 화면에서는 안 받아올 수도 있습니다.
하지만 모든 사용자가 메인으로 진입하지는 않죠. (가령 북마크나, 링크 공유 등)
따라서, 일단 메인에서 받은 categories를 전역적으로 저장해 두고, 이 화면에 진입했을 때 해당 전역값이 비어있다면 서버에서 불러오도록 해야겠습니다

contents는 무한 스크롤 리스트에 들어갈 데이터이므로, 지속적으로 서버에서 받아옵니다

categories는 위에 언급한 대로, 화면 진입 시 해당 데이터가 없으면 받아옵니다

3. 컨텐츠 상세 화면

(1) 컨텐츠 내용 표시

  • contentData: TContent

(2) 컨텐츠 목록 화면과 동일한 카테고리 내비게이션

  • categories: string[]

(3) 따봉 기능

  • 필요 없음. 서버에 따봉을 보낼 일만 있음

(4) 이전 글, 다음 글 링크

  • prevContentPreview: TContentPreview (이전 글 링크)
  • nextContentPreview: TContentPreview (다음 글 링크)

모든 데이터는 화면 진입 시 한 번 받아오고 끝입니다. 다만 categories는 컨텐츠 목록 화면처럼 전역값이 없을 시에만 받아옵니다.

작성하다 보니 생각났는데, 로그인 없이 따봉 기능을 넣자니 뭔가 이상합니다. 누가 따봉을 눌렀는지 모르니 한 사람이 계속 따봉을 눌러댈 수도 있습니다. 이를 방지하기 위해 서버에서는 따봉 요청을 보낸 host를 파악해서 DB에 반영할 때 host를 같이 반영해야 겠네요. 여러 번 따봉을 누르면 DB에 host값이 들어있기 때문에 reject하도록요.

4. (관리자) 로그인 화면

X

5. (관리자) 대시보드 화면

(1) 기간별 방문자 수 표시

  • cntVisitor: TCntVisit

(2) 각종 따봉 수 표시
(3) 컨텐츠 총 갯수, 카테고리별 컨텐츠 갯수
(4) 카테고리별 따봉지수 (따봉총합 / 컨텐츠 수)

얘네 셋은 한꺼번에 생각해야겠습니다.

  • cntContents: TCntContents
  • cntLike: TCntLike

이 둘만 있으면 될 듯합니다

TCntVisit 타입
총 방문자 수,
월별 방문자수 집계

TCntContents
총 컨텐츠 수,
카테고리별 컨텐츠 수 집계

TCntLike
총 따봉 수,
카테고리별 따봉 수 집계

물론 모든 데이터를 화면 진입 시 한 번만 받아옵니다

6. (관리자) 컨텐츠 목록 화면

(1) 컨텐츠 목록

  • contents: TContentPreview[]

7. (관리자) 컨텐츠 작성 및 수정 화면

X

8. (관리자) 카테고리 편집 화면

(1) 카테고리 목록

  • categories: string[]

(2) 카테고리 추가 인풋
X

(3) 변경사항 일괄 반영
X

화면 별로 필요한 데이터들의 요청 시점을 생각해 보고,
각 데이터에 이름도 붙여주고 타입도 생각해 봤습니다.

이제 이걸 토대로 서버 API 문서를 작성할게요. 그다음 DB 구조도 어떻게 짤 지 생각해 보겠습니다.

0개의 댓글