파이어베이스 리액트 방명록사이트 만들기 #1

해기·2023년 1월 4일

리액트 방명록 파이어베이스 포트폴리오

이제 파이어베이스를 사용하는게 나름 익숙해진듯하여

드디어 포트폴리오를 진행해보려한다.

일단 생각한건 내 포트폴리오를 방문해주는사람들이 방명록을 남길 수 있는 방명록사이트를 만들기로 해보았다.

프로젝트 시작하기

이제 시작을할텐데 이미 한번 만들어보긴했으나 파이어베이스를 익힐겸 만들어본거라 CSS도 막넣고 컴포넌트도 제대로 분류해놓지않아서 최적화도 진행해주지않았다.

그것에 대한건 이곳에 기록해두진않겠다.

프로젝트 시작에 앞서 일단 본인이 설치한 라이브러리들은

리액트 라우터
리덕스 툴킷
폰트어썸
styled components
파이어베이스
페이지네이션

이 여섯가지를 사용할거라 미리 설치해두고 시작했다.

벨로그에 기록을하면서 작성을했어야했는데 홈화면정도는 벌써 만들어버렸다.

구현할 목록들

일단 미리 내 방명록사이트에 어떠한 기능들이 들어가야할지를
미리 작성을해두고 시작하려한다.

일단 다른 사용자들이 들어오면 이미 작성되어있는 글들은 다 볼 수 있을것이고

사용자가 글을 작성하려면 로그인을 해야한다. 그러기위해 회원가입기능과 로그인기능을 구현할것이고

글 작성 기능을 구현해야한다.

그리고 글 수정기능과 글 삭제기능을 추가해주고

프로필을 수정할 수 있는 마이페이지를 구현할것이다.

그리고 앞서 만들어보았던 방명록사이트에서는 새로고침을하면 로그인이 풀리는일이 생겼는데 이걸 고쳐줄것이고

유저의 프로필사진을 저장할 수 있게끔 만들어줄것이다.

현재까지는 이정도만 생각이나서 이정도를 구현해보고 더 추가할게있으면 추가하면되지않을까싶다.

홈화면 만들기

이제 홈화면을 만들어줄것인데 저번에 만들었던 사이트에서는 디자인이 너무 별로였기에 차근차근 천천히 해보려한다.

일단 구조부터 잡아두었는데

이러한 모습으로 구조를잡아주었다.

게시글을 보여주는 카드디자인은 벨로그의 게시글 카드모양을보고 비슷하게 만들어보려했는데 디자인을 새로잡아주어야할거같다.

홈화면의 데이터는 파이어베이스에서 가져왔고 데이터베이스에서 가져오는방법은 사용하면할수록 간단한거같다.

파이어베이스 세팅을 잘 해두었다면 (8버전)

본인은 useEffect로 마운트됐을 때 데이터를 한번 불러오게끔 해두었다.

useEffect(()=>{
	db.collection("guest").onsnapshot(()=>{
    const resGetArr = res.docs.map(()=>({
    id : doc.id,
    ...doc.data(),
    }));
    setData(resGetArr);
    })
},[])

data라는 useState를 만들어 둔 뒤 그곳에 resGetArr을 추가해주는 식으로 만들어두었다. resGetArr에는 데이터베이스에 있는 모든 데이터가 들어가있다.

그리고 그 data를 map함수를 돌려서 화면을 구성해주었다.

이곳은 다른 유저들의 글을 보여줄 홈화면이기에 이정도만 구성해놓아도 될것같다.

로그인 그리고 회원가입

문제는 로그인인데 컴포넌트를 어떻게 나누어줘야할지 모르겠다.
결국 로그인과 회원가입은 비슷하게생겼을텐데 하나 잘 만들어두면 재사용이 가능하지않을까

회원가입에는 유저의 이름 이메일 비밀번호 프로필사진을 받고
로그인에는 유저의 이메일과 비밀번호를받는다.

이 차이뿐이고 인풋을 사용하고 버튼이있는건 같은데..

어떻게 만들어줘야할지 생각이 잘 안난다..

그래서 일단 회원가입부터 만들어보기로했다.

만들어보고 뜯어올 수 있을거같으면 그때 뜯어보자

디자인은 뒤에 생각하기로하고 label과 input을 사용해 위와같은 회원가입창을 만들어주었다.

const Join = () => {
  return (
    <div className="Join">
      <h1>회원가입페이지</h1>
      <form className="join_Form">
        <label htmlFor="joinPhoto">프로필 사진 선택</label>
        <input id="joinPhoto" type="file" style={{ display: "none" }} />
        <label htmlFor="joinEmail">이메일</label>
        <input
          id="joinEmail"
          type="email"
          placeholder="이메일을 입력해주세요."
        />
        <label htmlFor="joinPassword">비밀번호</label>
        <input
          id="joinPassword"
          type="password"
          placeholder="비밀번호는 6자리 이상"
        />
        <label htmlFor="joinName">이름 또는 닉네임</label>
        <input id="joinName" type="text" placeholder="이름 또는 닉네임" />

        <button>회원가입</button>
      </form>
    </div>
  );
};

export default Join;