17.11.15. 페이스북의 알림기능 따라 만들기. Fanzeel.com - Angular4

fanzeel.com 에 알림 기능을 붙였다. 페이스북의 알림기능을 본따서 만들었다.

1. display: flex VS grid

- 프로필 사진을 좌측에 정렬하기 위해서, flex 를 사용할까, Grid 를 사용할까 고민을 했다. 

- 페이스북은 그냥 float 을 사용했더라. 

- https://caniuse.com/#search=grid 에서 확인을 해보니, 좀 오래된 Android 브라우저에서는 Grid 가 불가능할 것같았다.

- 난 무조건 최신 기능을 사용하기를 좋아하는 편이지만... 그래도 사용 프로젝트이니까, Flex 를 사용했다.

2. 중복 알림을 어떻게 할것인가.

- 한 게시글에 댓글이 달리는 알림이 있다고 가정했을 때, 댓글 마다 알림을 주는 방법이 있을 것이고, 한 게시물에 여러댓글을 하나의 알림으로 묶어서 표시하는 방버이 있을 것이다. 전자를 선택하면, 알림의 갯수가 너무 많아질 가능성이 있기 때문에, 후자의 방법을 선택했다. (페이스북도 동일하다) 

- 이를 위해서, 알림 테이블에, Auto Increament P.K 를 사용할 수 가없었다. P.K를 여러 컬럼을 묶은 P.K를 좋아하지 않지만, '사용자ID', '알림TYPE', 'targetID' 이렇게 3가지 컬럼을 묶어서 P.K를 이용해서 Replace 하는 방식으로 알림을 종류별/게시물별 로 묶어서 구현했다.

3. Angular4 에서 [ngStyle] 을 이용해서, 데이터의 'isChecked' 컬럼값을 기준으로 배경색을 변경해 주었다. 클릭하면 isChecked 가 True 가 되면서 자동으로 배경색이 파랑에서 흰색으로 변경된다.