React 아웃소싱 팀프로젝트 2일차

어제 작성한 SA에서 영상을 카테고리별로 나누면 더 좋을 것 같다고 하셔서 내가 맡은 게시물 등록페이지에서 게시글을 등록할 때 카테고리부분을 select box로 넣었다.

처음에는 그냥 select태그 사용 후 option태그를 이용하여 카테고리를 쭉 적었는데 생각해보니 firebase에 data를 넣고 가져오고 사용하기 위해서는 value값이 필요했다.

=> 먼저 useInput이라는 custom Hook을 만들어 state가 바뀔 때마다 값을 세팅했다.


=> map을 이용해서 리스트 렌더링을 해줬다.

다음은, firebase에 임의의 값을 담아두고 가져오는 것 부터 해보았다.

=>다양한 query 조건문 중 특정 컬렉션을 고를 수 있는 collection()을 사용하여 데이터를 가져왔다. getDocs()라는 함수의 인자로 query를 넘겨주면, getDocs()는 비동기적으로 작동하며, querySnapshot을 반환한다. querySnapshot은 가져온 문서들에 대한 정보와 해당문서들에 접근할 수 있는 메서드를 포함한다.

=> 콘솔창에서 데이터를 잘 가져온 것을 볼 수 있다.

firebase에 값을 추가해보았다.

=> addDoc이라는 함수를 활용해서 새로운 Document를 post Collection에 추가해주었다. addDoc은 첫번째 인자로 컬렉션에 대한 참조를, 두번째 인자로는 추가할 Document값을 받는다.

=> 실제로 카테고리, url, 제목, 내용을 입력하고 등록한 후firebase 콘솔을 확인해보면 제대로 추가된 것을 확인할 수 있다.