2022.12.28 React, Firebase

그동안 프로젝트를 진행하면서 TIL을 작성하지 못했다.

내가 맡은 업무는 firebase를 사용하여 회원가입 및 로그인 구현을 맡았지만, 첫 프로젝트에서 firebase에 대해서 잘 이해하지 못한 상태에서 진행하려니 정말 막막하고 힘들었다.

구글링은 물론 유튜브를 동원해서 React와 Firebase 연동에 대해 정말 엄청 찾아봤다. 

우선 팀원들과 열심히 만든 홈페이지의 메인이다.

Router을 활용해서 기본 page들 만들고 components를 나눴다.

홈페이지의 컨셉은 개발자들을 위한 아이템을 자랑하거나 소개해주는 사이트다.

모달창을 이용해서 만든 로그인 페이지이다.

캡쳐를 위해서 사진을 잘랐지만 상단 로그인을 클릭하면 모달창이 띄어진다.

토글 버튼을 사용해서 하단의 회원가입 하시겠습니까?를 누르면 로그인 페이지로 바뀌게 했다.

사실 이 기능은 처음 써보는데 페이지 하나로 두가지 페이지를 구현할 수 있으니 너무 편하고 좋았다.

 

 

로그인이 완료 되면 상단의 로그인 버튼이 로그아웃과 프로필 이미지, 닉네임으로 변경된다.

이 부분에서는 유저의 로그인 값을 사용했다.

유저의 로그인 여부로 보여지는 메뉴 이름과 네비를 바꿨다. 

상단의 본인의 닉네임을 누르면 프로필 페이지로 이동하는데 사실 처음 기획은 이곳에서 본인이 작성한 글들을 보게 설정하려 했지만 프로필 변경에서 막혀서 밤을 세우느라 결국 구현하지 못했다.

다음부터 팀 프로젝트를 진행하면 철저하게 계획을 세우고 진행해야겠다.

프로젝트를 끝내면서 부족한 부분에 대해서 친절하게 설명해주신 팀원들에게 너무 감사하고 이번 프로젝트로 아주 조금은 실력 향상이 되지 않았을까? 라는 기대를 해본다.

 

내일은 리덕스 강의를 복습하고 프로젝트에 사용한 내 코드에 대해 정리하는 시간을 가져야겠다.

그럼 내일도 화이팅!