Nomad/twitter_clone

이제 트윗을 저장할 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); } }이 오류코드들을 이용해서 오류마다 보여줄 메세지를 설정할 수 있습니다.메세지를 사용자에게 보..

로그인 된 사용자는 ProtectRoute를 볼 수 있고, 로그인이 되어있지 않다면 로그인 페이지나 계정생성 페이지로 가게되는 로직을 작성할겁니다.components에 Protected-route.tsx를 생성합니다.위와 같이 작성하는데, 조건을 통해 만약 user가 null이라면 비로그인 상태기 때문에 /login 즉, 로그인 페이지로 연결시켜줍니다.로그인이 되어있다면 children으로 리턴합니다.App.tsx로 와서 Layout을 ProtectedRoute로 감싸줍니다.home과 profile은 layout의 children이기에 layout만 감싸줘도 적용이 됩니다.브라우저로 가서 새로고침을 하면 홈페이지가 뜨는것을 알 수 있습니다. 로그인이 된 상태니 Protected-Route를 사용할 수 있..

Loading이 Ture면 아직 프로세스 처리중이라는 뜻이 되기 때문에 함수를 일찍 종료하고,name, email, password 중 하나라도 비어있으면 안되니까 일찍 종료하는 조건을 걸어줍니다.이메일과 비밀번호를 사용한 계정생성 함수는 이미 있으니 가져다 써주고,await는 async function 안에서만 사용이 가능하기 때문에 아래와 같이 수정해줍니다.createUserWithEmailAndPassword 는 성공시 credential을 반환하니 const credentials 로 넣어줍니다.const credentials = await createUserWithEmailAndPassword(auth, email, password);계정 생성과 동시에 사용자의 이름을 저장하기위해 updatePr..

이제 create-account 를 완성할 차례입니다.Wrapper로 감싼 후 Form을 만들고 그 속에 input을 작성합니다. 이름, 이메일, 비밀번호가 필요하고 계정생성 버튼이 필요합니다.위 사진과 같이 작성을 합니다.결과를 확인해보면 이쁘진 않지만 그럴듯한 결과가 완성되었습니다.받아온 값들을 저장하기위해 useState를 사용할겁니다.각 Input에 value값을 넣어서 연결해줍니다. 이제 onChange Listener를 사용합니다.name에 값이 들어오면 setName 새로운 값을 업데이트 합니다.마찬가지로 각 Input에 onChange를 적용해줍니다.결과 확인을 위해 onSubmit을 작성해주고 Form에 적용해줍니다. 이때, 동작방지를 위해 e.preventDefault();를 추가해줍니..

Firebase authentication을 적용할겁니다.Firebase authentication은 Firebase SDK와 Firebase server로 작동합니다.사용자가 서비스로 들어오게되면 쿠키와 토큰으로 서버를 통해 로그인 여부를 확인하게 됩니다. 그리고 사용자 정보를 가져오는데,이 과정에서 잠깐의 시간동안 로딩 화면을 보여줄건데, 이걸 먼저 작성해봅시다.이제 components 파일에 loading-screen.tsx를 만들고작성해줍니다. Wrapper와 Text는 정의해줘야 합니다.다시 App.tsx로 돌아와서 RouterProvider 부분에 삼항연산자를 사용해줍니다.isLoading이 ture라면 로딩페이지를, false라면 RouterProvider를 랜더링 하도록 설정해주고테스트를 ..