전체 글

이제 만들어진 어플리케이션을 배포할겁니다.우선 Firebase -> 빌드 -> Hosting을 눌러줍니다.시작하기를 눌러주시면 명령어가 뜨게됩니다. 복사해주시고 vscode 터미널에 입력하고 실행해줍니다.다음을 눌러주시고 또 다른 명령어가 나옵니다.만약 이전 명령어 설치가 완료되었다면 다음 명령어를 복사해서 실행해줍니다.로그인이 되어있지 않다면 y를 입력하고 브라우저에서 로그인을 진행해주시면 됩니다.완료되면, 다음 명령어를 복사해서 실행해줍니다.방향키로 Hosting으로 온 다음 스페이스바로 선택하고, Enter로 실행합니다.이후 Use an existing project 를 선택해서 Enter배포하려는 프로젝트 선택 후 Enter.여기까지 완료하면, What do you want to use as yo..

이번에는 현재 로그인된 사용자의 tweets(게시물)만 가져오는 작업을 할겁니다.tweets 상태를 만들어주고const [tweets, setTweets] = useState([]); const fetchTweets = async() => { const tweetQuery = query( collection(db, "tweets"), where("userId", "==", user?.uid), orderBy("createdAt", "desc"), limit(25) ); const snapshot = await getDocs(tweetQuery); const tweets =..

이번엔 사용자의 프로필을 만들어 볼겁니다.profile.tsx로 가서 기본적인 폼을 작성합니다.import styled from "styled-components";import { auth } from "../firebase";const Wrapper = styled.div``;const AvatarUpload = styled.label``;const AvatarImg = styled.img``;const AvatarInput = styled.input` display: none;`;const Name = styled.span``;export default function Profile() { const user = auth.currentUser; return ..

Edit 기능을 만들때 저는 updateDoc을 사용했습니다. const onEdit = async () => { if (user?.uid !== userId) return; try { await updateDoc(doc(db, "tweets", id), { tweet: editedTweet }); setIsEditing(false); } catch (e) { console.log(e); } };Delete와 마찬가지로 해당 사용자가 맞는지 확인했습니다.이후 try-catch문을 이용하여 updateDoc을 해주었습니다.또한, 수정하다가 cancel을 생각하여 버튼을 만들어줬습니다. ..

트윗을 작성했다면 삭제할 수 있어야 합니다. 이번엔 Delete 버튼을 만들겠습니다.우선 tweets.tsx로 가줍니다.const DeleteButton = styled.button` background-color: tomato; color: white; font-weight: 600; border: 0; font-size: 12px; padding: 5px 10px; text-transform: uppercase; border-radius: 5px; cursor: pointer;`;export default function Tweet({ username, photo, tweet }: ITweet) { return ( ..

이번엔 트윗을 실시간으로 적용되어서 화면에 보이게 하는 작업을 할겁니다.export default function Timeline() { const [tweets, setTweet] = useState([]) useEffect(() => { let unsubscribe : Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) )..