🌞 1/30 내배캠 React 66일차 [프로젝트 발표]

 오늘 최종 프로젝트 전 마지막 프로젝트 발표가 끝났다.

 

이건 우리 프로젝트 Hi, 카공이다.

프로젝트 명

👋  Hi, 카공

컨셉

 📕 카페에서 공부하는 사람 (카공족) 들을 위한 사이트. 작은 카페에서 눈치 보면서 카공하지 말고 넓은 카페에서 눈치보지 말고 편하게 카공하자 !!

설명

 💻 혹시 카페에서 공부해보신 적 있으신가요?

아니면 나도 카페에서 공부하고 싶은데, 어디로 가야할 지 고민하신 적 있으신가요?

작은 카페는 눈치 보이기도 하고, 카페 분위기도 궁금하고, 좋은 자리가 있는지 콘센트는 얼마나 있는지

한번쯤은 궁금하셨을 거라고 생각합니다.

Hi, 카공은 카공 리뷰 사이트로 이 카페의 장단점, 평점, 나만의 명당 등을 공유할 수 있는

사이트입니다.

https://hi-cagong.vercel.app/

이번 프로젝트에서 발표와 CRUD 기능구현을 맡았다.

계속 반복했던 CRUD였지만 이번에 기능이 정말 많이 들어가면서 어려움을 겪었다.

 

특히 firebase에서 데이터를 불러내어 화면에 표시하는 기능은 reactQuery를 사용하여 만들고 싶었지만, 그렇게 하지못해 그냥 기본 react 코드로 사용하였다.

추후 리팩토링 해볼 계획이다. (이번주 안에)

 

 {authService.currentUser === null ? (
            <ReviewBtn onClick={onAlertLogin}> 리뷰작성</ReviewBtn>
          ) : (
            <>
              {toggle ? (
                <ReviewBtn
                  onClick={() => {
                    setToggle(!toggle);
                  }}
                >
                  리뷰 작성
                </ReviewBtn>
              ) : null}
            </>
          )}

해당 코드는

이 리뷰작성 버튼을 클릭 하기 전, currentUser가 있다면 즉, 로그인이 되어 있다면 정상적인 리뷰작성버튼이 클릭되어 리뷰를 작성할 수 있게 만들고, 그렇지 않다면 모양은 같지만 로그인을 진행하라는 모듈을 띄울 수 있는 버튼으로 만든 코드이다.

 

이렇게 삼항연산자를 사용하는 방법도 있지만, currentUser를 가져오는데 문제가 생긴다면 꼬일 수 있기 때문에 다른 방법을 찾아 구현할 수 있다면 그렇게 해보고 싶다.

이 코드가 왜 인상깊었냐면 마무리 전 갑작스럽게 이 기능을 추가해야 했는데, 어떤 방식을 사용하여 풀 수 있을 지 고민하다가 가장 빠르게 해결할 수 있는 방법을 사용하여 기능을 추가하였다.

이런 경험들이 추후에 다른 프로젝트에도 도움을 줄 거라 확신하며, 여기에 남겨본다.