배포 이후에 개발환경에서는 발견할 수 없었던 자잘한 버그들을 모두 잡아서 완성도를 높이고 싶었으나.. 시간 관계 상 우선 1차적으로 마무리하고 부랴부랴 후기를 올려봅니다..!

1. 자기소개

안녕하세요! 디지털 노마드를 꿈꾸는 프론트엔드 취업 준비생입니다. 실력을 쌓으며 다양한 도전과 경험을 통해 더 나은 결과물을 만들고자 노력하고 있습니다. 최근에 Next,js 다루는 방법을 익히던 중 좀 더 재밌게 공부할 방법을 모색하던 중에 웹 개발 초반에 알게된 노마드 코더가 떠올라서 이번 트위터 컨테스트에 참여하게 되었습니다.

2. 배포 URL & 깃허브 레포

배포 URL 👉 https://mynnect.vercel.app/
깃허브 레포 👉 https://github.com/mynolog/mynnect

3. 서비스 소개

서비스명은 제 닉네임인 mynolog와 connect의 합성어로 mynnect. 라고 지었습니다.

회원가입 페이지)

구글 또는 깃허브 계정으로 소셜 로그인을 구현하였고 firebase auth의 User 객체는 추가적인 커스텀이 어려워서 firestore에 User 객체의 일부 내용과 닉네임을 users 컬렉션에 별개로 저장하여 관리하도록 구현하였습니다.
그리고 원래 이메일을 사용하는 로컬 로그인도 구현하였으나.. 입력값에 대한 유효성 검증 코드를 완성하지 못하여 지금 당장은 막아둔 상태입니다.

메인 페이지)

중간 공유에서도 언급하였지만 미니멀 컨셉을 지향하여 UI는 최대한 걷어내고(사실은 미적 감각이 부족한 탓이 크긴 합니다만😅) 정말 필요하다고 생각하는 부분만 구현하였습니다.
tweets 컬렉션에 저장되는 모든 트윗을 onSnapshot으로 구독하여 실시간으로 UI가 업데이트 되도록 구현하였고 현재 로그인한 사용자의 uid와 각 트윗글의 uid를 비교하여 일치할 경우에만 트윗을 수정하거나 삭제할 수 있는 버튼을 보여주도록 구현하였습니다.

추가 기능은 좋아요 기능입니다.

프로필 페이지)

사용자 이름 수정과 나의 트윗을 모아볼 수 있는 기능을 구현하였습니다. 사실 사용자 이름이 실질적으로 사용되는 부분이 없어서 이름을 바꾸는게 의미가 있나 싶어서 닉네임 수정도 고려해봤는데 기존 작성했던 트윗의 닉네임을 업데이트하는 부분에서 버그가 발생하여 이 부분도 조금씩 고쳐나가보려고 합니다.

반응형 UI)

만들다보니 구현 내용이 너무나 부족하다고 판단하여 태블릿 화면까지만 반응형 디자인을 구현해봤습니다. 사실 처음부터 반응형도 고려하여 레이아웃을 구성한 것이기 때문에 생각보다 이부분은 오래걸리지는 않은 거 같아요. 브레이크 포인트는 768px 기준으로만 했는데 모바일 화면까지는 추가로 구현해봐야하나 고민되네요.

4. 사용한 기술 스택, 의존성

Next.js

Tailwind CSS

RTK -> 모달, 다크 모드 상태 관리 사용 예정

SWR

Firebase

js-cookie/ firebase-admin -> next.js 서버사이드로 인증 토큰 관리
Jest/react-testing-library -> 유닛 테스트

5. 느낀점

돌이켜보니 정말 딱 필수 기능만 구현하기 바쁜 2주였습니다.

최근 관심사가 Next.js, 테스트 코드 작성 연습이라 이번 컨테스트에 적용해볼 계획이었으나 SSR에 대한 이해가 부족한 탓도 있었고 리액트와 비슷하면서도 다른 부분이 많아서 수많은 에러들을 경험했고 덕분에 2주 전에 비해서는 조금은 성장하지 않았나 생각이 들기도 합니다. 이번 컨테스트는 아쉬움이 더 크지만 아직 구현하지 못한 부분은 점진적으로 수정을 거듭하여 완성도를 높여보도록 하겠습니다..!
모두들 고생하셨습니다 :)