[Project] Twitter 앱 (Vue.js) 🐦

[Project] Toy 프로젝트 회고 🚝

🐦 Twitter

해당 서비스는 Twitter 를 클론한 프로젝트로
게시물을 생성 및 조회하며
원하는 게시물에 좋아요 기능을 통해
유저들의 반응을 확인할 수 있는 서비스 입니다.

---

PipeLine 🔮

프로젝트 구성 🌱

프로젝트 기간 (7/3 ~ 7/7)

• Front-end Vue.js 프레임워크인 Quasar 로 웹 페이지 UI/UX 구성
  
• Back-end firebase 의 Firestore 로 유저 및 게시물 DB 관리

---

기능소개 🔨

Home 탭과 About 탭으로
두 페이지를 라우팅 기능을 활용하여 구성했지만,
현재는 단일 페이지 구성으로
최대한 Twitter 와 유사하게 구성하려 기획하였습니다.

반응형 사이즈로 1024px 이하이거나, 모바일 환경에서 실행 시 UI 가 변경되도록 설정하였습니다.

Post Firestore 를 통해 게시물을 생성할때마다 문서를 추가하고,
제거 시 실시간으로 DB 에 반영되도록 구현하였습니다.

Like UI 에서 하트 이모지를 클릭 시 Toggle 되어
색깔이 변경되며 이를 Firestore 에서도 실시간 반영되게 구현하였습니다.

---

Github 소스코드
> https://github.com/wavescats/Twitter_App

---

개발회고 💡

새로 입사한 기업에서
React 가 아닌 Vue.js 로 프로젝트를 진행하고 있어
Vue.js 를 공부하던 중

instagram 을 제작한 기업인
meta 에서 새로운 탈 중앙 소셜 미디어 플랫폼인 ‘스레드(Threads)’ 가 출시하였고,
이에 감명을 받아
Twitter 앱을 클론 해 보는 Toy Project 를 진행했습니다.

---

아쉬웠던 점 & 보완해야 할 사항

DateTime

새로운 게시물 작성 시 date-fns 라이브러리를 사용하여
"3 minute ago" 형태로 구현하려 했지만
생각한대로 잘 되지 않아 추후 개선해야 할 부분으로 남겨두었습니다.

Authentication 유저들의 DB 를 관리하기 위하여
회원가입 및 로그인기능을 추가할 계획을 갖고있습니다.
사용자의 편의를 위하여 소셜 로그인 기능을 추가하려고 합니다.

---

Reference 🌊

https://youtu.be/la-0ulfn0_M<br
https://date-fns.org/
https://firebase.google.com/docs/firestore/using-console?hl=ko&authuser=0
https://about.instagram.com/ko-kr/blog/announcements/introducing-threads-app