Nomad/twitter_clone

해당 프로젝트는 back-end가 없기 때문에, 모든 동작이 front-end에서 진행됩니다. 때문에 해킹에 취약합니다. 우리는 오늘 이 문제를 해결할겁니다. 우선 firebase 홈페이지 -> Firestore Database -> 규칙 으로 가줍니다. 코드를 보시면, read, write를 2024년 5월 3일까지 허락한다고 적혀있습니다. 일단 모든 주석을 제거하고 우선 read만 허용하는 rule을 추가할겁니다. 이렇게 수정하면 권한이 있는 누구든 읽기를 허용한다는 겁니다. 작성을 완료했다면 게시해줍니다. 우리의 사이트로 돌아가서 새로고침하면 정상작동 되는것을 확인할 수 있는데, 변화가 없어 모르겠다면 read를 write로 바꿔서 적용하고, 다시 새로고침하면 read를 할 수 없다는 것을 알게됩니..

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

이번에는 현재 로그인된 사용자의 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 = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username,..

이번엔 사용자의 프로필을 만들어 볼겁니다. 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 {user?.displa..

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을 생각하여 버튼을 만들어줬습니다. const onCancelEdit = () => { setIsEditing(false); setEditedTweet(..

트윗을 작성했다면 삭제할 수 있어야 합니다. 이번엔 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 ( {username} {tweet} Delete {photo ? : null} )..

이번엔 트윗을 실시간으로 적용되어서 화면에 보이게 하는 작업을 할겁니다. 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) ); // const snapshot = await getDocs(tweetsQuery); // const tweets = snapshot.docs.map((do..

이번엔 Firestore DB에서 데이터를 쿼리할겁니다. 쿼리한다는 뜻은 'DB에서 원하는 정보를 가져오는' 코딩을 말합니다. components 밑으로 timeline.tsx를 만들어줍니다. 우선 기본적인 틀을 먼저 작성하고 interface를 만들어줄겁니다. export interface ITweet { id: string; photo?: string; tweet: string; userId: string; username: string; createdAt: number; } export default function Timeline() { return ; } interface의 요소들은 이전에 작성한 폼 그대로 받아오면 되는데, firebase에서 확인 가능하고 각 자료형을 맞춰서 만들어줍니다. p..