1. 결과물 공유 (링크 클릭 or https://supinkim.github.io/sweet/#/signin)

2. 안녕하세요. FE 개발자 준비생입니다 :D 지난번 천하제일 todolist 챌린지 참여 이후 두 번째 참가입니다. 오랜만에 챌린지에 참여하게 되었는데요, 생각보다 많이 어려웠지만 그래도 재밌었습니다.

저는 이전에 다른 직무로 회사에서 일을 하다 개발이 더 제 적성에 맞는 것 같아 과감히 퇴사하고 개발자를 준비하게 되었습니다.(학부 당시 컴퓨터 과학을 전공했어요!)

천하제일 챌린지 때와 비교하면 그 사이 좋은 회사에서 인턴십도 하게 되었고 실력도 그 때보다 많이 늘어서 개인적으로 FE 개발자의 입문 때 함께하던 노마드 코더, 니콜라스와 린 님께 늘 감사의 마음을 갖고 있습니다. 목표는 내년 상반기까지 좋은 직장에 취뽀하는 것입니다!

3. 만든 기능은 다음과 같습니다.

1) 로그인 & 회원가입
: Firebase의 Auth 기능을 이용하여 이메일 인증으로 진행했습니다. (노마더 사이트 로그인 방식과 거의 동일해요. 다만, 현재는 스마트폰에서는 동작하지 않아 PC 웹을 이용해주세요.)

1) Home
: 좌측 Form에서 트윗을 생성할 수 있고, 우측에 생성된 트윗이 바로 업데이트 됩니다.

: 트윗 생성 시 해시태그 선택 및 사진 첨부가 가능합니다.(여러 장이 가능하게 설정해 뒀는데 사진이 많거나 gif 등 크기가 클수록 업데이트 속도가 많이 느려지니 이 점 참고해주세요 :) )

: 트윗 리스트에서 좋아요 & 좋아요 취소가 가능하고 해시태그를 누르거나 키워드를 검색하면 해당 키워드를 갖고 있는 트윗만 필터링 해서 보여줍니다.

2) My Profile

: 회원가입 시 적은 이름이 기본 프로필로 설정되어 있고 이름과 프로필 사진을 변경할 수 있습니다. (아쉽게도 이메일 변경 기능은 이번엔 넣지 않았는데, 추후 디벨롭 시에 넣을 수도 있을 것 같아요.)

: 본인이 작성한 트윗 리스트가 나열되고 삭제 버튼을 누르면 삭제할 수 있습니다.

4. 일단 라우팅 부분에서부터 막혔었는데요.
로그인 하지 않은 사용자가 메인 화면으로 가거나,
반대로 로그인 한 유저가 로그인 화면이나 회원 가입 화면으로 가지 못하게 막는 것 때문에
좀 헤맸던 것 같아요.

DB는 Firebase의 RealTime DB를 사용했는데, 트윗이 생성되거나 삭제됐을 때 바로 업데이트 해주기 위해서 DB 리스너를 붙여놓은 게 검색어 필터링 기능이랑 충돌되면서 이 부분을 해결하는 게 좀 까다로웠습니다. 필터링 기능이 있을 때 좋아요 버튼을 눌러도 필터링이 풀리지 않게 하기 위해 searching이라는 boolean 값을 주어 한 번 더 걸러주었는데 그러다 보니 로직이 좀 복잡해져서 다음번에 비슷한 기능을 만든다면 더 좋은 로직을 짜기 위해 고민할 것 같습니다.

이번엔 그렇게 큰 규모가 아니라고 생각해서 Redux나 Context API를 사용하지 않았는데
지금은 데이터가 많지 않아 필요한 정보를 firebase를 호출해서 사용하고 있지만
규모가 커지면 상태 관리 라이브러리를 붙여서 좀 더 성능 개선을 위한 로직을 추가로
고민해봐야겠다고 생각했어요.

배포 후에도 에러가 너무 많이 터져서 에러 잡는 데만 두 시간은 쓴 것 같네요 :)

그리고 저는 항상 css가 제일 어려운 것 같습니다.

그래도 혼자 프론트 + 백엔드를 다 해보니 재미는 있었어요.
다들 한 번씩 가입해서 구경해보시는 것도 좋을 것 같고,
혹시나 버그를 발견하신다면 댓글로 달아주시면 빠르게 수정해볼게요.

감사합니다. :)