무한 스크롤
무한 스크롤을 구현하기 위해 알아야되는 것 중 하나는 브라우저 창의 크기!
스크롤 할 수 있는 영역이 얼마나 남았나 계산을 해야한다.
✔ 계산을 하기 위해 웹 페이지 전체 크기와 얼마나 스크롤을 했는지를 알아야 한다.
✔ window.innerHeight은 가시적으로 보이는 브라우저 창 높이.(메뉴바 툴바 제외한 크기!)
✔ document.body.scrollHeight는 스크롤할 수 있는 높이.(눈에 안보이는 영역도 포함!)
✔ document의 scrollTop은 스크롤이 얼마나 움직였나 알려주는 값.
삼항 연산자와 && , ||
삼항 연산자는 {조건? 참 : 거짓 }의 형태로 쓰이는데
강의를 듣다가 { 조건 && 참 }의 형태로 구성된 코드를 봤다.
찾아보니 && 연산자는 조건(본인, 이하 조건)이 참이면 && 우측의 값을 return 하고,
조건이 거짓이면 조건을 그대로 return 한다.
|| 연산자는 조건이 참이면 조건을 그대로 return하고 거짓일 경우 && 우측의 값을 return한다.
{ 조건 ? 참 : 거짓}<- 이건 값이 있을 때, 없을 때 모두 보여줘야 할 것이 있을 때 쓰고
{ 조건 && 참 }, { 조건 || 거짓 }"" <- 이건 하나의 값만 보여주고 싶을 때 사용한다고 한다.
상세 페이지 연결
PostDetail.js
post_id를 통해 댓글이 어느 게시물에 달려있는지 알 수 있다.
insert_dt로 글을 정렬한다. 역순으로 정리해서 최근 게시물이 제일 상단에 뜨도록 한다.
post_id, insert_dt 두 가지로 필터링을 해서 query를 쓰면 파이어스토어에서 복합쿼리 설정을 해줘야 한다.
Post에서 클릭하면 PostDetail로 넘어가야 하므로 온클릭을 통해 페이지뷰를 전환한다.
