실시간 입력폼 만들기(2): 입력폼 만들기

입력폼을 만들어보자.

 

store.user가 null이 아닐때 '입력폼'이 뜨도록 해놓았던 것을 

정말로 입력폼이 뜨도록해보자

우선 textarea를 추가하고 3줄 정도 쓸 수 있도록 정했다.

Bootstrap을 이용했기 때문에 원하는 스타일에 맞게 className을 지정해주었다.

적은 내용을 전송할 수 있게 전송버튼도 만든다.

로그인하면 보일 화면

---

Dom에 직접 접근하기: ref

아래 두 가지 방법 중에 한가지로 하면 된다. 나는 한 줄로 표시하는 방법을 선택했다.

같은 화면을 만들어내는 다른 방법

같은 화면을 만들어내는 다른 방법

 

---

Firebase에서 Database 등록하기

firebase로 접속하여, Database를 등록한다.

컬렉션시작하기를 누르고 ID 지정을 한다. 첫번째 문서 추가하기로 아무 문서나 추가해놓는다.

나머지는 프로젝트로 돌아가서 코딩으로 작성한다.

<코딩>

도큐먼트 이름을 우선 정해놓는다. 나중이 되면 랜덤으로 유니크 아이디를 가질 수 있도록 바꿔주야 한다.

 

위처럼 작성해준다.

입력폼에 메세지를 적어서 전송하면

이렇게 database에 추가된 모습을 볼 수 있다.

문서 이름(doc)은 설정해준대로 path-0으로 되어 있다.

 

+ Timestamp에 관해서

예전에는 위 사진처럼 timestamp를 작성해줬어야했는데 지금은 안 해줘도 된다.

 

강의보고 그냥 따라썼더니 지금은 default로 되어있어서 안해줘도 된다고 에러 메세지가 떴다.

---

유니크 아이디 설정(Doc)

path-0으로 doc name을 설정해두었기 때문에 

새로운 메세지를 입력하면 새로운 doc이 생성되는 게 아니라 이전 메세지를 덮어버린다. 그래서 유니크한 doc name을 가질 수 있도록

설정해줄 필요가 있다.

우선 설치를 한다.

path-0으로 임의로 정해두었던 부분을 변경한다.

결과창

 

---

입력폼 비워주기

그리고 새로운 메세지를 전송하는 버튼을 누르고 나면 입력폼이 빈 칸으로 비워질 수 있도록 한다.

비워지는 모습

---

DB관리

전역으로 관리하는 폴더인 common에 새로운 파일을 만든다.

db.js

이제 index.js에서 db를 import하고 나면

const db = firebase.firestore() 를 매번 쓰지 않고도 db로 간편하게 쓸 수 있다.

 

배열에 result로 가져온 아이템들을 몽땅 넣을 수 있도록 구성

각 item이 unique key를 가져야 하기 때문에 uid를 가지도록 수정

지금까지 construnctor에  적었던 모든 코드를 getInitialProps를 만들어서

그쪽으로 옮겨준다. 

getInitialProps는 서버사이드 렌더링이기 때문에 alert 갗은 것은 동작을 하지 않으므로 지운다.

async이기 때문에 await를 쓸 수 있다.

result가 db를 기다렸다가 진행되도록 수정한다.

---

실시간 입력과 최근 업데이트 순으로 정렬

constructor를 작성하여 전송한 글이 실시간으로 화면에 출력되도록 할 수 있다.

그리고 지금은 랜덤으로 정렬이 되어 있는데 이걸 최근 업데이트 순으로 볼 수 있게 바꿔준다.

getinitialProps에 넣어주면 이전에 썼던 리스트 들이 정렬되는 것이고

onSnapshot쪽에 넣어주면 실시간업데이트 되는 항목이 가장 위쪽으로 들어가게 해준다.