본문 바로가기

카테고리 없음

[내일배움캠프] - 17~18일차 : 팀 프로젝트 | instargram 클론코딩 투

2022.05.04 ~ 2022.05.05 (5/5 어린이날 캠프 휴무)

 

 시작하는 글 

 

어제 기획한대로 각 팀원이 프로젝트 파트를 나눴고 난 메인페이지의 피드를 전체 부분을 맡았다.

 

 

 

 훈련내용 

 

메인페이지 피드 구성을 위해선 생각보다 채워야할 개념이 많았다.

 

그중 가장 핵심적인 부분은,

각각의 DB 컬렉션 연동 => 조건에 따른 API요청과 화면 구현이다.

 

1. DB 설계 / 연동

 

1) DB 설계

DB 연동을 위해서 많을 시간을 쏟아야했는데,

DB 구조를 설계가 우선이었다.

DB 설계 특강 때 만든 배운 설계도

2) DB 연동

DB에 저장되는 많은 데이터들이 조건에 따라 화면을 그려지게 하기 위해선,

DB 컬렉션들 끼리 서로 데이터를 물고 있어야했다.

 

아래 게시물을 예시로 살펴보자.

users DB에서 정보를 가져온 'aaa'라는 user가 로그인을 한 후,

게시물을 생성하면 contents DB에 user_id인 'aaa'가 게시물 정보와 함께 저장된다.

 

또, contents DB에서 데이터를 불러와 게시물을 그려주고,

댓글을 작성하면 comments DB에 작성자의 user_id와 해당 게시물의 content_id가 댓글 정보와 함께 저장된다.

좋아요 기능의 데이터를 담는 likes DB 또한 comments DB와 같은 원리로 연결이 되어 있다.

 

결론적으로, 하나의 게시물이 화면에 그려지기 위해서 4개의 DB 컬렉션이 모두 작동해야하는데, 

그러기 위해 각각의 DB 컬렉션이 고유 _id를 서로 물고 문 상태로 데이터를 저장해야한다.

 

 

이 DB 구조와 화면을 구현하기 위한 고민과 시도 반복에만 이틀을 썼다.

 

 

2. 기능별 API 설계

 

추가 기능

1) 게시글 '더 보기' 버튼 : 게시글 글자수가 일정 개수 초과 시 일부 글을 숨기고 버튼 생성

2) '댓글 00개 모두 보기' 버튼 : 댓글 일정 개수 초과 시 댓글을 모두 숨기고 버튼 생성

3) 좋아요 업 : 클릭 시 좋아요 개수 카운트 업

 

 

 끝내는 글