Flutter와 파이어베이스로 게시판 만들때 부딪힌 경험들

게시판 만들 일이 있어서 flutter와 파이어베이스로 만들고 있다.

 

 

직접 처음부터 전부 만들어보니 생각보다 많이 어렵다. 게시판 만들 때 이렇게나 많은 것들을 고려해야 할 줄 누가 알았을 까...

 

 

 

아래는 개발하면서 부딪힌 문제들

 

 

1. 제목과 내용의 데이터는 분리해야 한다

어찌보면 너무 당연한 내용이다. 제목은 짧고, 내용은 크다. 두 데이터를 한꺼번에 묶는다면 쿼리하는데 속도 문제가 생길 것 이다.

그러면 어떻게 해결할 것 인가? 정답은 내용을 subCollection으로 두는것 이다.

 

파이어베이스는 doc을 가져올 때 doc 안에 subCollection이 있다면, 이 subCollection안의 데이터는 가져오지 않는다.

subCollection안에 데이터까지 가져오면 쿼리 속도에 문제가 생기기 때문.

 

맨 처음에는 제목과 내용을 각각 따로 collection으로 만든 뒤 ref를 연결해 주었는데, 그럴 필요가 없었다. 콘솔에서도 보기에 직관적이지도 않고, 그냥 subCollection을 사용하자.

 

 

 

2. 댓글과 대댓글은 하나의 doc에 담아야 한다

 

처음에 subCollection기법을 알았을 때 댓글의 doc안에 subCollection을 두어 대댓글을 담으려 했다.

허나 이렇게 하면 그 수많은 댓글 들 마다 subCollection에 대한 쿼리를 각각 수행해야 한다. 당연 성능문제가 생긴다.

 

그럼 순서처리는 어떻게 하냐? 나는 두개의 Timestamp를 이용했다.

 

가령 예를들어 created와 replied라고 하자.

 

댓글은 created와 replied를 똑같이 저장한다.

대댓글은 created에 부모의 댓글 생성날짜를, replied에는 대댓글의 생성날짜를 저장한다.

 

이런식으로 하면 댓글과 대댓글의 순서를 처리할 수있다.

 

 

 

 

3. 수정과 삭제는 update/delete를 하지 않고 invisible/add를 해야한다

이거는 주워들은 내용인데, 애플의 앱스토어의 경우 게시판 기능을 넣으면 신고기능을 반드시 넣어야 한다고 한다.

이러한 신고기능에 있어서, 내용 수정은 진짜 수정을 하는게 아니라, 새로 데이터를 저장하는 방식으로 해야한다는 것 이다.

 

만약 불량한 게시글이 올라와서 신고가 들어왔는데, 중간에 작성자가 수정을 하면 문제가 될 수 있다는 것 이다.

 

그래서 악플같은거 달면, 글을 지워도 다 기록에 남아서 고소당하고 그러는 것 일까?

 

 

 

그런데 막상 delete를 하지 않고, 데이터를 추가하려고 하니 ref를 관리하는게 너무 어렵다. 이에 차라리 나는 수정전 데이터를 보관하는 collection을 따로 만들어서 보관하는 방식으로 진행하기로 했다. 이렇게 하면 원본도 보관하고 ref관리도 쉽고 일석이조!

 

4. Optimistic UI를 활용하자

뭐 너무 당연한 내용이지만.. 앱의 반응성을 위해 Optimistic UI를 사용하고, 업로드가 성공하든 실패하든 데이터를 refresh를 하여 다시 읽어오자. 댓글같은거 달면 그래야 순서 안꼬이고 동작한다

 

 

 

 

 

5. Pull to refresh는 iOS스타일을 이용하자

이유같은거 없다. 아이폰 스타일이 훨씬 이쁘다.

 

 

 

 

6. Like 버튼은 은근 까다롭다

Like 버튼은 단순 숫자만 올리는게 아니라 기억까지 해야 한다. 내가 부딪힌 문제는 다음과 같다.

 

 

• 기본적으로 좋아요 버튼을 누르면 중복해서 누르면 안된다.
• 여기서 고민이 생긴다. 좋아요를 누른 기록을 글에다가 저장할 것이냐. 아니면 유저 프로필에 저장할 것 이냐?
• 깊게 고민해본 결과 유저 프로필에 저장해야 한다

 

유저프로필에 저장해야하는 이유는 다음과 같다.

 

• 글에다가 좋아요 기록을 저장한다고 하자. 수천명의 사람들이 하나의 글에 좋아요를 누르고 댓글에도 전부 좋아요를 눌렀다고 하자
• 그럼 글하나에 몇청명의 uid와 댓글에도 몇백명의 uid를 읽어와야 한다. 끔찍하다. 고로 유저에다가 저장해야한다.
• 유저에다가 좋아요 기록을 저장하는경우, 히스토리 페이지도 만들 수 있어서 좋다

 

 

 

7. 댓글 하단부에 pull to refresh를 만들지 말자

처음에 댓글 새로고침을 위해 하단부에도 pull to refresh를 적용했다. 처음에 하단부에 적용할라고 하니 refresh controller가 하단부는 지원하지 않아서, 직접 indicator를 이용하여 ios스타일로 만들었다. 다 만들고 다른앱들을 참고해보니 하단부에 pull to refresh를 만들어놓은 앱이 없더라... 생각해보니 쓸데없는 트레픽만 잔뜩 증가시키는 ux였던 것이다.

 

 

 

 

8. 이미지를 보여줄 때는 CachedNetworkImage 패키지를 사용하자

한번 다운로드한 이미지들 또 다운받지말고. 이건 거의 필수사항이더라