Delete const DeleteButton = styled.button` background-color: tomato; `; 글을 삭제 할 수 있게 버튼을 생성한다. export default function Tweet({ username, photo, tweet }: ITweet) { const user = auth.currentUser; auth 인스턴스를 사용해서 현재 로그인된 유저를 받는다. {user?.uid === userId ? Delete : null} ITweet에서 userId를 가져온다 userId가 일치할 경우에 삭제버튼을 보여주고 일치하지 않을경우 null값을 반환한다. const onDelete = async() => { if(user?.uid !== userId) retur..

Timeline 파일을 생성해서 home에 태그로 사용해준다. const Wrapper = styled.div` overflow-y: scroll; `; 기존에 생성한 업로드 버튼과 textarea를 고정시키고 타임라인만 슬라이드 하기위해 작성 const [tweet, setTweet] = useState([]); React에 이건 tweet 배열이고 기본값은 빈배열이라고 알려준다. return {JSON.stringify(tweets)} ; tweets를 문자로 출력 const fetchTweets = async() => {} fetchTweets라는 비동기함수 생성 useEffect(() => { fetchTweets(); }, []); useEffect를 사용해서 fetchTweets호출 impor..

return ( ); Link to="/경로" 를 통해서 버튼 아이콘을 클릭했을 때 페이지 이동을 발생시킨다 로그아웃은 따로 경로를 잡을 필요가 없다. class선택자를 선언 할 땐 className="log-out" 로 선언한다. const MenuItem = styled.div` cursor: pointer; &.log-out { color: tomato; border-color: tomato; svg { fill: black; } } className으로 선언한 선택자를 css 속성 적용시 해당 문법을 사용하여 넣는다. 주의할 점으로는 & 와 . 사이에 공백이 있어서는 안된다. const Wrapper = styled.div` display: grid; grid-template-columns: 1f..

try { await createUserWithEmailAndPassword(auth, email, password); } try에서 await 를 통해서 email과 password를 이용해 사용자 생성하기. email 중복여부 체크 및 비밀번호 유효성 검사 const onSubmit = async (e : React.FormEvent) => { createUserWithEmailAndPassword는 async 함수에서만 사용이가능하므로 변경해주기 https://ko.javascript.info/async-await async와 await ko.javascript.info if( isLoading || name === "" || email === "" || password === "" ) return..

const [isLoading, setIsLoading] = useState(true); isLoading 이라는 setState() 생성하기 const init = async() => { }; async함수 init 생성하기 const init = async() => { // wait for firebase setIsLoading(false); }; firebase가 준비가되면 setIsLoading을 false로 반환 useEffect(() => {init()}, []); useEffect()를 통해 init함수를 호출 사용자에게 로딩화면을 출력하기 위해서 작성된 코드. import styled from "styled-components" const Wrapper = styled.div` height..

import { createBrowserRouter } from "react-router-dom" const router = createBrowserRouter([ { path:"/" } ] App.tsx 파일에서 Router 생성하기 components 폴더를 생성하고 layout.tsx 생성 import { Outlet } from "react-router-dom"; export default function Layout() { return ( ); } return으로 반환 export default function Home() { return Home!; } home.tsx 파일 생성후 작성 export default function Profile() { return Profile; } profil..