2024.01.16

아..

드디어 길고 긴 근무 기간이 끝났다. 

일 때문에 공부를 못 한 것인가? 라고 하면 할 말은 없다..

너무 지치고 피곤해서 쉬었다 라는 핑계밖에 되지 않을 듯 하다. 

 

영대 멋사 프로젝트의 경우에는 주말에 디자인이 다 나오면 시작하기로 했다.

프로젝트 회의에서 주제에 대해 각자가 생각하는 바가 서로 달랐다. 

나는 '앞으로의 멋사 회원들이 사용하게 될 강의포털' 같은 느낌의 프로젝트를 원했지만

다른 분들은 홍보 페이지로 생각하시는 분도 계셨다. 

투표를 통해 내 의견으로 진행하게 되었다.

우선 최소한의 기능인 로그인, 회원가입, 로그아웃, 게시글(공지)과 댓글/대댓글 CRUD, 관리자 페이지에서의 회원가입 승인 기능을 구현하기로 했다. 

이 기능들이 정상적으로 작동한다면 그 이후로 게시판을 늘리는 등의 확장은 큰 문제가 없으리라 생각된다. 

 

12기 fe 강의 커리큘럼은 목요일 회의를 통해 결정될 것이다. 

11기 때는 총 5번의 강의가 있었는데, 이번에는 주 2회로 총 10번의 강의가 진행된다. 

이에 맞춰서 강의 커리큘럼 또한 크게 개편될 것 같다. 

 

그럼 오늘은 그동안 못한 firebase 활용에 대해 계속 공부해보자. 

firebase의 인증 기능 이후, firebase DB를 활용한 none-sql 데이터 접근, firebase storage를 활용한 이미지 저장을 배웠다. 

오늘은 Twitter의 timeline update를 위해 firebase DB에서 query하는 법을 배울 것이다. 

 

---

timeline은 긴 배열의 형태이다.

timeline에 해당하는 데이터들을 map() 함수로 tweet 컴포넌트에 담아 보여주는데, 아주 긴 스크롤이 생기게 된다. 

정해진 칸을 벗어나는 경우에는 CSS의 overflow-x, overflow-y 속성을 사용할 수 있다. 

가로로 벗어날 때는 x(x축), 세로로 벗어날 때는 y(y축)를 사용한다. 

overflow에 올 수 있는 것들은 다음과 같다. 

• visible: 벗어난 부분이 잘리지 않고 칸 밖으로 넘친다. 
• hidden: 벗어난 부분 모두 잘리되 스크롤이 존재하지 않는다. 
• scroll: 벗어난 부분 모두 잘리되 스크롤이 존재한다. 
• auto: 모두 잘리되 필요한 경우 스크롤이 존재한다. 

Tweeter 프로젝트의 경우 트윗을 포스팅하는 입력 form이 항상 상단에 고정되어있어야 하므로, overflow-y: scroll을 이용해 칸에서 벗어나면 스크롤을 통해 timeline을 볼 수 있도록 하였다. 

 

---

realtime timeline을 구현하기 위해 onSnapshot()으로 데이터를 감지하여 쿼리문에 알려주는 이벤트를 추가했다. 

useEffect에 사용하면 되는데, 문제는 timeline을 보지 않을 때도 이벤트를 듣고있다는 점이다. 

지금은 괜찮을지 모르지만, 서비스 규모가 커지면 계속 데이터를 받아와 비용이 엄청나게 증가할 수 있다..

그래서 useEffect의 clean-up 함수를 사용한다. 

Timeline 컴포넌트가 보여지지 않을 때는 연결을 끊어줌으로써 비용을 절약할 수 있다. 

마지막으로 데이터가 아주 많아질 경우를 대비해 query에 limit을 추가하였다. 

limit(25)로 25개의 데이터만 받아올 수 있게 되었다. 

---

트윗 삭제를 마지막으로 chapter4가 완료되었다. code challenge로 수정 기능을 만들어야 한다. 

더욱 발전하고 싶다면 사진 파일 수정 기능도 구현해보라 하는데.. 

사실 그렇게 어려워 보이지는 않는다. 

그냥 수정을 위한 form을 새로 만들어야 하는 것이 꽤 번거로울 뿐이다. 

<Wrapper>
	<PostTweetForm />
	<Timeline />
</Wrapper>

트윗 작성을 위한 form과 timeline이 형제 태그로 붙어있다. 

timeline 컴포넌트 아래의 tweet 컴포넌트에 수정 버튼이 있다. 

이 버튼을 눌러서 timeline - form으로 데이터를 옮기기란 쉽지 않다. 

웬만하면 기존의 form을 사용하고 싶은데 일이 더 커질 것 같다. 

 

여기서 또 생각난 것이 있는데, code challenge를 위한 branch를 처음부터 만들 걸 그랬다. 

기존의 강의 내용과 겹치지 않도록, 그리고 언제든지 다시 code challenge를 할 수 있도록 지금이라도 branch를 새로 만들어야겠다.