Front-end

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) )..

이번엔 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에서 확인 가능하고 각 자료형을 맞춰서..

이제 트윗을 저장할 Firestore를 활성화 할겁니다.firebase홈으로 가서 Cloud Firestore를 클릭합니다.데이터베이스 만들기를 눌러서 위치를 가까운 곳으로 선택해줍니다.저같은 경우는 seoul이 되겠네요. 다음단계에서 Test Mode를 선택해줍니다.(30일 후 정지됩니다.)그러면 데이터베이스가 만들어집니다.이후 좌측 네브바에서 빌드 -> Storage로 가줍니다.똑같이 Test Mode로 선택하고 진행해주면 됩니다.만들어지는 동안, vscode로 돌아와 firebase.tsx로 가줍니다. 이제 데이터베이스와 스토리지에 대한 액세스 권한을 얻을겁니다.export const storage = getStorage(app);export const db = getFirestore(app);au..

이제 본격적으로 만들어볼겁니다.우선 홈페이지 UI제작을 할겁니다. 네브바를 만들기 위해 layout.tsx로 갑니다.그리고 각각의 div를 만들어줄겁니다.import { Outlet } from "react-router-dom";import styled from "styled-components";const Wrapper = styled.div``;const Menu = styled.div``;const MenuItem = styled.div``;export default function Layout(){ return ( ..

소셜로그인을 구현할겁니다.firebase 페이지 - Authentication - 로그인 방법 탭을 클릭합니다."새 제공업체 추가" 를 클릭하고 저는 Github 로그인을 넣을거기 때문에 github로 선택합니다. 사용설정은 켜줍니다.https://github.com/settings/developers GitHub: Let’s build from hereGitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea....

사용자가 잘못되거나 중복된 정보를 입력해서 계정을 생성하려 한다면 오류가 날텐데 이 오류를 나타내는 작업을 할겁니다.우선 create-account.tsx로 가서 catch 블럭에 console.log(e);를 작성하고 중복된 이메일로 계정을 생성해봅니다.결과는 화면에 보이는 것과 같이 콘솔창에 firebaseError가 찍힙니다.좀더 알아보기 위해 catch 블럭에 에러코드와 메세지를 찍어봅니다.catch (e) { if(e instanceof FirebaseError){ console.log(e.code, e.message); } }이 오류코드들을 이용해서 오류마다 보여줄 메세지를 설정할 수 있습니다.메세지를 사용자에게 보..