이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)
https://nomadcoders.co/nwitter
트위터 클론코딩 – 노마드 코더 Nomad Coders
React Firebase for Beginners
nomadcoders.co
먼저 components에 timeline.tsx파일을 생성해 준다. 그리고 interface를 하나 만들어 주고, 기본적인 Tweet의 구성을 담아주도록 한다.
export interface ITweet {
photo : string;
tweet: string;
userId: string;
username: string;
createdAt: number;
}
export default function Timeline() {
const [tweets, setTweet] = useState<ITweet[]>([]);
const fetchTweets = async() => {
const tweetsQuery = query(
collection(db, "tweets"),
orderBy("createdAt", "desc")
)
const snapshot = await getDocs(tweetsQuery);
snapshot.docs.forEach(doc => console.log(doc.data()));
}
useEffect(() => {
fetchTweets();
}, []);
return (<Wrapper>
{JSON.stringify(tweets)}
</Wrapper>
)
}
fetchTweets 함수를 생성하고 여기서 받아올 데이터의 쿼리를 보내준다. 쿼리의 인자로는 collection과 orderBy를 넣어주고, collection의 인자로 firebase의 db와 collection이름인 "tweets"를 넣어준다. orderBy의 인자로 시간과 내림차순 정렬을 넣어준다.
getDocs의 인자로 방금 생성한 tweetsQuery를 넣어서 호출하면 snapshot에 정보들이 담긴다. 이 담긴 정보들을 꺼내서 console.log로 확인해 본다.
데이터베이스에 있었던 내용들이 잘 나온다. 이제 snapshot.docs.forEach를 snapshot.docs.map으로 바꿔주고 변수에 저장해 준다.
const snapshot = await getDocs(tweetsQuery);
const tweets = snapshot.docs.map((doc) => {
const {tweet, createdAt, userId, username, photo} = doc.data();
return {tweet, createdAt, userId, username, photo, id:doc.id}
});
map 함수를 이용하여 데이터를 순회하며 아래의 변수에 맞는 데이터를 넣어 반환해 준다. 그리고 setTweet()에 tweets를 넣어준다.
그럼 아래쪽에 만들어둔 트윗이 보이게 된다.
이제 components폴더에 tweet.tsx파일을 만들어 주고, 아래와 같이 입력해 준다.
import styled from "styled-components";
import { ITweet } from "./timeline";
const Wrapper = styled.div`
display: grid;
grid-template-columns: 3fr 1fr;
padding: 20px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 15px;
`;
const Column = styled.div``;
const Photo = styled.img`
width: 100px;
height: 100px;
border-radius: 15px;
`;
const Username = styled.span`
font-weight: 600;
font-size: 15px;
`;
const Payload = styled.p`
margin: 10px 0px;
font-size: 18px;
`;
export default function Tweet({username, photo, tweet}:ITweet) {
return (<Wrapper>
<Column>
<Username>{username}</Username>
<Payload>{tweet}</Payload>
</Column>
{photo === "" ? null :<Column>
<Photo src={photo} />
</Column>}
</Wrapper>
)
}
이제 Timeline.tsx의 {JSON.stringify(tweets)}부분을 삭제하고 map함수를 이용하여 tweets를 보여준다.
return (<Wrapper>
{tweets.map(tweet => <Tweet key={tweet.id} {...tweet} />)}
</Wrapper>
)
마지막으로 Home.tsx에 Timeline을 넣어준다.
import styled from "styled-components";
import PostTweetFrorm from "../components/post-tweet-form";
import Timeline from "../components/timeline";
const Wrapper = styled.div`
display: grid;
gap: 50px;
overflow-y: scroll;
grid-template-rows: 1fr 5fr;
`;
export default function Home() {
return (
<Wrapper>
<PostTweetFrorm />
<Timeline />
</Wrapper>
);
}
작성자, 메시지, 사진이 잘 나오는 것을 볼 수 있다.
우측에 스크롤바는 App.tsx에 있는 GlobalStyles의 가장 아래에 다음 코드를 추가해서 없앨 수 있다.
::-webkit-scrollbar{
display: none;
}
이전 글 :
[노마드 코더] ReactJS 트위터 클론 코딩 - Router
[노마드 코더] ReactJS 트위터 클론 코딩 - Authentication
[노마드 코더] ReactJS 트위터 클론 코딩 - Github Login
[노마드 코더] ReactJS 트위터 클론 코딩 - Tweeting
[노마드 코더] ReactJS 트위터 클론 코딩 - Uploading Images with S3
다음 글 :
[노마드 코더] ReactJS 트위터 클론 코딩 - Realtime Tweets & Delete
[노마드 코더] ReactJS 트위터 클론 코딩 - Edit tweet(code challenge)
[노마드 코더] ReactJS 트위터 클론 코딩 - Pfofile page
