본문 바로가기

Today I Learned (TIL)

23.11.27 리액트 팀프로젝트 마감&리액트 무한로딩

728x90
반응형

일주일간에 짧았던 팀 프로젝트가 마무리되었다 많이 미숙하기도했고 모르는것도 많아서 우당탕탕 진행되었지만

이과정속에서도 많은 것들을 배울수있었다

프로젝트 시작전에는 패키지 매니저는 통일 해야한다던지..(npm 쓸거냐 yarn쓸거냐...)

git 브랜치 생성시에는 main -> dev -> feature 순으로 git flow 를 지켜야한다는점 등등

마지막 과제 발표시간에 튜터님의 피드백도 들을수있었다

https://tecoble.techcourse.co.kr/post/2021-07-15-git-branch/

git 브랜치 전략에 대해서
 

다음 프로젝트에서는 어느정도 git flow를 지키면서 작업해야겠다

개별에서 바로 메인브랜치로 넘어가니 가끔 바로 main에 커밋하려는 경우도있었다..!

 

제출 직전 실험중

 

마지막으로 제출 직전 기능 실험을 이것저것 해보았다

기본적으로 파이어 베이스를 연동한 로그인 기능과 게시물 작성정보 저장

마이페이지에서 개인정보 수정 구글로그인 등등 소셜 로그인 추가 등등 기능구현이있었다

파이어 베이스 연결중
 

그러다 과제 제출 1시간전에 갑자기 배포한 페이지가 다운이 되버렸는데 문제는 파이어베이스 저장소 용량초과..!급하게 조장님의 api를 대체하고 내가만든 파이어 베이스 api로 대체하여도 갑자기 트래픽이 증가하더니댓글하나 로그인하나 게시물 하나에 엄청나게 용량을 잡아먹었다

 

문제는 Use Effect 에서 무한 렌더링이 발생한것.... 튜터님과 같이 코드를 살펴보니

리액트에서 웬만한 무한 반복은 Use Effect 일가능성이 높다고한다

해당 함수의 목적은 바로바로 올라온 댓글을 보여주는것이였는데 이게 set State를 작동시켜 계속 렌더링이

일어났다 [] 안에 Fedd를 제거하니 렌더링이 멈춘걸 확인할수있었다

앞으로 실시간 반응을 보여줄때는 https://biio-studying.tistory.com/123

 

Firebase_ onSnapshot을 사용하여 실시간으로 DB 가져오기

firestore().collection('콜렉션이름')에는 onSnapshopt이라는 메서드가 있다. 이 메서드를 사용하면 실시간으로 정보를 가져올 수 있다. get대신 snapshot을 사용하여 실시간으로 DB를 받아와보자. onsnapshot 안

biio-studying.tistory.com

 

Firebase_ onSnapshot을 사용하여 실시간으로 DB 가져오기

 

onSnapshot이라는 기능을 사용해봐야겠다


 

팀프로젝트를 마치며...

사실 내가 기여한 부분은 팀원이 미리 만들어둔 홈페이지와 레이이아웃 코드를 이용하여

마이페이지 부분에 파이어 베이스 데이터가 나타나게한것 그리고 추가로

개인이 작성한 게시글만 따로 뽑아 화면에 나타나게 한정도라서 기여도가 많이 적은편이다

리액트 강의와 파이어 베이스 강의는 처음 부터 다시봐야할듯하다

이번주 에는 추가로 스탠다드반 과제가 진행될텐데 막막하지만 서둘러 복습해봐야겠다

시간이없다....!

728x90
반응형