트위터 클론 ‘Deli’ 회고 — React + Firebase (1. 어떤 웹사이트야?)

 

1. 프로젝트 개요

• 서비스명: Deli (트위터 클론)
• 주요 기능:
  • 게시글 작성·삭제
  • 좋아요(‘함께하고 싶어요’)
  • 프로필 편집
  • 실시간 타임라인
• Live Demo: https://nwitter-reloaded-ad7cb.web.app/

---

2. 개발 동기 & 목표

• 사용자 경험 향상을 목표로 React + TypeScript 실전 연습
• Nomad Coders 강의(React Firebase for Beginners) 수강 후,
  강사 스타일과 커리큘럼이 잘 맞아 바로 착수

https://nomadcoders.co/nwitter/lobby

트위터 클론코딩 – 노마드 코더 Nomad Coders

 

• Firebase를 처음 써보며 “간편하다!”는 첫 인상

---

3. 기술 스택 & 구조

• Front‑end: React, TypeScript, React Router
• Back‑end: Firebase Auth, Firestore, Storage
• 폴더 구조

---

4. 주요 화면 & 캡션

4.1 데스크톱 뷰

PC 로그인 : 이메일 및 비밀번호 입력, 회원가입 페이지로 전환

 

 

PC 프로필 : 내가 쓴 글 확인 및 프로필 이미지, 닉네임 등 편집

 

 

PC 타임라인 : 가입자 게시글 최신 순으로 모아보기

 

4.2 모바일 뷰

모바일 타임라인 : 가입자 게시글 최신 순으로 모아보기

모바일 프로필 : 내가 쓴 글 확인 및 프로필 이미지, 닉네임 등 편집

모바일 로그인 화면 : 이메일 및 비밀번호 입력, 회원가입 페이지로 전환

---

5. 회고 & 배운 점

• Firebase의 장단점
  • 간편한 인증/DB 연동
  • 쿼리 한계로 복잡한 조회 구현 시 공부 필요
• React Hooks 활용
  • useState, useEffect 로직 정리법
• UI/UX 개선 포인트
  • 긴 글은 …더보기 처리하기
  • ‘UP 버튼 배치 이유

 

“다음 회차에서는 회원가입 로직과 타임라인 실시간 업데이트 코드를 분석해볼게요. 기대해주세요!”