React/TS study - twitter clone(2)

  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: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

`;

const Text = styled.span`

    font-size: 24px;

`;

export default function LoadingScreen() {

    return <Wrapper><Text>Loading....</Text></Wrapper>

}

loading-screen.tsx 생성 후 위 코드를 작성.

 <Wrapper><Text> </Text></Wrapper>

Wrapper / Text는 위에서 선언된 변수

 

 

 

  return (

    <>

      <GlobalStyles />

      {/* <Rout{erProvider router ={router} /> */}

      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}

    </>

  )

App.tsx에 True False 에 따른 출력을 설정

 

 

  const init = async() => {

    // wait for firebase

    // setIsLoading(false);

    setTimeout(() => setIsLoading(false), 2000);

  };

로딩시간을 2초로 변경

 

 

 

FireBase install 하기

 

npm install firebase

 

import { initializeApp } from "firebase/app";

const firebaseConfig = {

  apiKey: "AIzaSyDVQx8_EuVgA7zuy900FtgZlypeSW3SVfo",

  authDomain: "nwitter-19df0.firebaseapp.com",

  projectId: "nwitter-19df0",

  storageBucket: "nwitter-19df0.appspot.com",

  messagingSenderId: "36406489889",

  appId: "1:36406489889:web:b8848bf464731bb17d8460"

};

const app = initializeApp(firebaseConfig);

이후 firebase.tsx 파일을 생성하고 firebase에서 생성한 앱코드 입력

 

 

authentication 활성화 시키기

Firebase에서 활성화한 이후에 코드에서 initialize

https://rangbits.tistory.com/18

React + Firebase Setup 환경 설정

export const auth = getAuth(app);

auth export 하기

 

 

  const init = async() => {

    // wait for firebase

    // setTimeout(() => setLoading(false), 2000);

    await auth.authStateReady();

    setLoading(false);

  };

auth의 인증상태가 준비되었는지를 기다리기위해

auth.authStateReady() 사용

최초 인증상태가 완료될 때 실행되는 Promise를  return

Firebase가 쿠키와 토큰을 읽고 백엔드와 소통해서 로그인여부를 확인하는동안 기다리는 역할

 

import { useState } from "react";

import styled from "styled-components"

const Wrapper = styled.div``;

const Form = styled.form``;

const Input = styled.input``;

export default function CreateAccount() {

    const [isLoading, setLoading] = useState(false);

    const [name, setName] = useState("");

    const [email, setEmail] = useState("");

    const [password, setPassword] = useState("");

    return <Wrapper>

        <Form>

            <Input name="name" placeholder="Name" type="text" required />

            <Input name="email" placeholder="Email" type="email" required />

            <Input name="password" placeholder="Password" type="password" required />

            <Input type="submit" value="Create Account" />

        </Form>

    </Wrapper>

}

create-account.tsx  파일에 작성하기

 

react로 form생성하는걸 도와주는 패키지로 작성하기 위해서는

<Input name="name" value={name} placeholder="Name" type="text" required />

input 안에 value={값}을 적어주면 state에 연결된다.

 

 

 

    const onChange = (e : React.ChangeEvent<HTMLInputElement>) => {

        const {target: {name, value}} = e;

        if(name==="name"){

            setName(value);

        } else if(name==="password"){

            setPassword(value);

        } else if(name==="email"){

            setEmail(value);

        }

    }

이후 on change listener  를 생성하고 Input의 속성으로 name값과 value값을 타겟으로 잡아서 

반복문을 통해 value값을 검증한다.

 

<Input onChange={onChange} name="name" value={name} placeholder="Name" type="text" required />

onChange={onChange}를 적어 이벤트 핸들러를 생성해준다.

 

 

 

    const onSubmit = (e : React.FormEvent<HTMLFormElement>) => {

        e.preventDefault();

        console.log(name, email, password);

    }

submit listener를 생성하고 화면이 새로고침 되지 않도록  preventDefault 해준다.

 

        <Form onSubmit={onSubmit}>

Form상단에 onSubmit={ onSubmit }을 적어 이벤트 핸들러를 생성해준다.

 

출력되는 화면

 

 

onSubmit을 통해서 계정을 생성하고 사용자 프로필이름을 지정해줘야한다.

Firebase에는 사용자 프로필이 있어서 이름이 필요.

그 후 홈페이지로 리디렉션 하기

 

<Input type="submit" value={isLoading ? "Loading..." : "Create Account"} />

 isLoading을 통해 로딩여부를 검증하고 True(로딩중) 이면 "Loading..." False(로딩완료) "Create Account" 출력하기

 

 

 

    const [error, setError] = useState("");

onSubmit 일때 error를 보여주기위한 state 생성

 

 

const Wrapper = styled.div`

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 420px;

    padding: 50px 0;

`;

위와같은 방식으로 각각에 css 속성부여

 

 

const Input = styled.input`

    width: 100%;

    padding: 10px 20px;

    border-radius: 50px;

    border: none;

    font-size: 16px;

    &[type="submit"]{

        cursor: pointer;

        &:hover {

            opacity: 0.8;

        }

    }

`;

속성을 부여할때 if 문으로써 조건을 걸어준다.

&[ type="" ] 로 선택한 속성의 하위속성으로 & : 를 작성하여 css :hover 생성가능

 

 

 

const Wrapper = styled.div`

  height: 100vh;

  display: flex;

  justify-content: center;

`;

이후 content의 가운데정렬을 위해서 App.tsx에서 Wrapper 생성

 

 

function App() {

........

  return (

    <>

      <Wrapper>

        <GlobalStyles />

        {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}

      </Wrapper>

    </>

  );

}

Wrapper = styled.div   를 적용시키기위해 App() 의 return값에 작성

 

 

 

        {error !== "" ? <Error>{error}</Error> : null}

만약 error가 빈문자열이 아니면 에러메세지 출력하기