프로필 수정 버튼을 클릭하면 모달을 띄워서 프로필을 수정할 수 있게끔 기능을 만들어본다. 기존에 사용하던 TweetModal.vue의 내용들을 복사해서 ProfileEdeitModal.vue를 생성한다. 안의 html 부분들을 필요에 맞게 변경해주는데 프로필 수정 저장 현재 필요한 기능들은 아래와 같다. 1. 백그라운드의 카메라 버튼을 클릭하면 파일을 선택할 수 있게 만들고, 그 사진을 백그라운드에 적용시키는것 2. 백그라운드와 마찬가지로 프로필 파일을 선택 후 바로 프로필에 사진이 노출될 수 있도록 만들어야함 html 구성은 아래와 같다. button은 카메라 아이콘을 말하고 input은 위의 버튼을 클릭하면 이 input이 실행되어야 함 그래서 버튼에는 click 이벤트로 onChangeBackGro..

현재는 홈에서 다른 유저의 프로필을 클릭했을 때 다른 유저의 프로필을 볼 수 없다. 그래서 router의 추가로 profile/ :uid 파라미터를 주어서 각 유저에 맞게 프로필을 가져오도록 할거임 rotuer-> index.js에서 router를 추가한다. { path: "/profile", name: "profile", component: Profile, title: "프로필", icon: "far fa-user fa-fw text-2xl", meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true }, }, { path: "/profile/:uid", component: Profile, icon: "far fa-user fa-fw text-..

Profile페이지를 구현하도록 하겠다. import Trends from "../components/Trends.vue"; import Tweet from "../components/Tweet.vue"; import store from "../store"; import { computed, ref, onBeforeMount } from "vue"; import { onSnapshot, doc, collection, where, orderBy, query, } from "firebase/firestore"; import { db } from "../firebase"; import getTweetInfo from "../utils/getTweetInfo"; import moment from "moment"..

원하는 트윗을 클릭하면 트윗 페이지로 이동해서 트윗의 상세 정보와 댓글들을 확인할 수 있는 페이지를 만들거임 router -> index.js에 tweet 페이지를 추가한다. { path: "/tweet/:id", name: "tweet", component: Tweet, meta: { isMenu: false, layout: "DefaultLayout", requireAuth: true }, }, pages에서 Tweet 컴포넌트 생성 router import 해서 뒤로가기 버튼 클릭하면 router.go(-1)하면 이전페이지로 돌아감 (신기) 트윗 이메일 @id Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati cupiditate..

리트윗과 동일하게 좋아요 기능을 구현하면된다. utils에서 handleLikes.js추가 import { doc, setDoc, collection, updateDoc, increment, deleteDoc, query, where, getDocs, } from "firebase/firestore"; import { db } from "../firebase"; import store from "../store"; export default async (tweet) => { try { //이미 좋아요된 상태인지 확인하기 if (tweet.isLiked) { const q = query( collection(db, "likes"), where("from_tweet_id", "==", tweet.id), w..

이번에는 리트윗 버튼을 클릭하면 리트윗 db생성과 동시에 리트윗 숫자도 늘려줘야함 utils에 handleRetweet이라는 함수를 따로 만들어서 관리함 import { doc, setDoc, collection, updateDoc, increment, deleteDoc, query, where, getDocs, } from "firebase/firestore"; import { db } from "../firebase"; import store from "../store"; export default async (tweet) => { try { //리트윗 하지 않은 상황 //retweet 저장하기 const newRetweetRef = doc(collection(db, "retweets")); awai..

왼쪽에 댓글 아이콘을 클릭하면 트윗 모달과 비슷하게 답글 모달창의 띄워 댓글을 달아줄 수 있도록 만들것이다. CommentModal.vue를 생성하여 Tweet.vue에서 컴포넌트 등록을 한다. import moment from "moment"; import CommentModal from "./CommentModal.vue"; import { ref } from "vue"; export default { components: { CommentModal }, props: ["currentUser", "tweet"], setup() { const showCommentModal = ref(false); return { moment, showCommentModal, }; }, }; 그리고 showComment..

현재 트윗 버튼을 클릭하면 추가가 안된다. 그래서 트윗 버튼과 트윗 함수를 연결할거임 홈페이지에서 새로운 트윗을 추가하는거랑 코드가 동일하다 하지만 만약에 트윗 추가 코드가 수정되면 트윗 모달과 홈페이지 코드를 각각 수정을 해줘야하는 번거로움이 있기 때문에 이 코드를 분리해서 import하여 사용하는 방법으로 코드 수정을 최소화 하도록 한다. src 폴더 내에 utils 폴더를 만들어서 addTweet.js파일을 만들었다. addTweet 에는 Home에서 사용했던 addTweet함수를 그대로 복사하여 붙여넣기함 그리고 코드를 조금 수정한다. 1. export default를 붙여 다른 곳에서도 사용이 가능하도록 만들어주고 2. 트윗 내용, 현재 사용중인 유저 정보를 받아서 사용해야한다 그리고 Promi..

트윗 버튼을 클릭하면 tailwindcss를 활용해서 모달 팝업을 만들어보도록 하겠 TweetModal.vue -> 트윗 모달 컴포넌트를 만든다. tailwindcss 홈페이지에 들어가면 무료로 제공되는 다양한 코드들이 있는데 그 중 아래의 예시를 사용해볼거임 https://tailwindui.com/components/application-ui/overlays/dialogs Tailwind UI - Official Tailwind CSS Components & Templates Beautiful UI components and templates by the creators of Tailwind CSS. tailwindui.com html코드를 받아서 template에 붙여넣기함 그리고 트윗 모달 컴포넌..

트윗 컴포넌트에 props로 데이터를 넘겨줄 때 그 트윗을 작성한 유저의 정보( email, username)도 함께 넘겨줘야 한다. 그래서 getUserInfo라는 함수를 사용하여 트윗을 작성할 때 uid로 유저정보를 문서에서 검색해서 그 유저의 정보도 tweets에 함께 담아서 props에 전달하면된다. //트윗 실시간 가져오기 onBeforeMount(() => { const q = query(collection(db, "tweets"), orderBy("created_at", "desc")); const unsubscribe = onSnapshot(q, (snapshot) => { snapshot.docChanges().forEach(async (change) => { let tweet = awa..