Toy Project : Teta's Card Maker

Teasan·2021년 3월 6일

Cloudinary Firebase React React Hooks authentication postcss reactjs realtime database

Toy Project

목록 보기

2/2

👩🏻‍💻 Toy Project : Teta's Card Maker

▪️ 프로젝트 소개

지인의 정보를 card로 담아 입력하고, 입력한 데이터를 저장/관리하는 웹사이트입니다.

▪️ 기술 스택

ReactJS / React-Hooks / PostCss
Firebase / Cloudinary
JavaScript(ES6) / HTML

▪️ 진행 도구

Notion (프로젝트 기능 구현 계획과 일정 관리)
Git + GitHub
Postman (API data 관리)

▪️ 구현한 기능

React-hooks, CSS(PostCSS) 사용
Router를 사용한 페이지 이동 구현
Firebase Authentication을 사용한 소셜 로그인 인증 구현
Firebase realtime database를 사용한 카드 데이터 저장 관리
Cloudinary 를 이용한 이미지 업로더 기능 구현
Dependency Injection을 통한 API 보안 관리
cursor 애니메이션 구현
도형 애니메이션 및 반응형 웹페이지 구현

▪️ 구현 기능 영상

소셜 로그인 (Firebase Authentication)

Firebase Authentication 서비스를 이용한 구글, 깃허브 소셜 로그인을 구현했다. Firebase 를 Add 할 때 역시, 지난 토이 프로젝트에서 진행했던 것과 동일하게 Dependency Injection를 적극 활용하여 API 보안 관리를 진행하고자 .env 파일 안에서 API Key를 작성하고 전체적으로 firebase API를 받아오는 js 안에서 불러오도록 만들었다.

자세한 소스코드는 github의 repo를 참고 부탁드립니다.

그리고, 인증 서비스 기능만을 담당하는 auth_service.js를 만든 뒤 firebase에서 import해온 firebaseAuth, githubProvider, googleProvider 등으로 해당 auth service 내에서 class를 작성하고 각각의 용도에 맞는 (인증)서비스가 필요한 컴포넌트에서 받아오는 방식으로 구현했다.

	자세한 소스코드는 github의 repo를 참고 부탁드립니다.

소셜 로그인
firebase.js(firebase API)에서 import 해온 firebaseAuth에 getProvider와 signInWithPopup(firebase)메소드 함수를 사용하여 인증 서비스가 필요한 컴포넌트에서 해당 함수를 받아오는 방식으로 구현했다. Github와 Google 의 인증 서비스 구분은 switch 문을 활용하여 각각의 인자가 case와 동일하면 그에 맞는 해당 소셜 인증 API 명령어로 받아올 수 있도록 설정해주었다.
로그아웃
로그아웃 역시, firebase.js(firebase API)에서 import 해온 firebaseAuth에 signOut(firebase)메소드 함수를 사용하여 로그아웃 서비스가 필요한 컴포넌트에서 해당 함수를 받아오는 방식으로 구현했다.
로그인 유지
로그인을 한 상태에서 새로 페이지를 열었을 때에도 자동으로 로그인이 되도록 구현했다. 이때에도 인증 서비스 기능만을 담당하는 auth_service.js의 class 에서 user가 로그인이 되어있는 상태인지만을 확인하는 로직에 onAuthStateChanged(firebase)메소드 함수를 활용하여 조건식을 통해 로그인 정보가 필요한 컴포넌트에 id 값을 넣어주는 방식으로 구현했습니다.

카드 메이커 페이지

실시간 정보 입력 및 수정, data 삭제 기능 구현

해당 폼을 입력하는 태그마다 useRef() 를 설정해준 뒤, event.current.target이 업데이트 될 때마다 해당 card의 name 값을 value 값으로 업데이트 할 수 있도록 함수를 작성해주었다.

또한, 상위 컴포넌트의 콜백 함수 내에서 delete 명령어를 사용하고, 해당 폼을 입력하는 컴포넌트에 props 로 함수를 보내 delete 버튼을 누르면 입력 폼 카드가 삭제되는 기능까지 구현하였다.

Cloudinary를 적극 활용하여, 이미지 업로딩을 구현했다.

자세한 소스코드는 github의 repo를 참고 부탁드립니다.

앞서, 작성한 firebase 인증 class 처럼 이미지 업로더 기능만을 담당하는 image_uploader.js 안에서 class 를 만든뒤, 이미지 업로더 서비스가 필요한 컴포넌트에서 해당 함수를 받아오는 방식으로 구현했다.

이미지를 업로드할 때, 이벤트 함수와 조건식을 활용하여 css로 로딩스피너도 만들었다.

실시간 데이터 서비스 (Firebase Realtime database)

실시간 정보 저장, 삭제 기능

자세한 소스코드는 github의 repo를 참고 부탁드립니다.

실시간 데이터 서비스 기능만을 담당하는 card_repository.js 안에서 class 를 만든뒤, 로그인 함수를 작성하고 set와 remove(firebase)메소드를 사용하여 실시간 데이터 서비스가 필요한 컴포넌트에서 해당 함수를 받아오는 방식으로 데이터 저장/삭제 기능을 구현했다.

Router 페이지 이동 기능 구현

Router와 useHistory()를 사용하여 페이지 이동을 구현했다.

        <Route exact path="/">
          <Main />
        </Route>

반응형 웹페이지 구현 및 애니메이션 구현

@media screen 을 이용하여 반응형 사이트를 구현했습니다.

커서 애니메이션 구현은 Awesome Cursor Animation 영상을 참조했다.

두번째 토이프로젝트를 진행하면서, 그동안 사용해보지 못했던 firebase 서비스와 Cloudinary 등을 적극적으로 차용해보았다. 위코드의 첫번째 팀 프로젝트를 진행할 때만 해도, firebase 서비스를 몰랐고 덕분에 간단한 로그인 기능만 구현하게 되면서 소셜 로그인 기능을 미처 추가하지 못했던 게 늘 아쉬움으로 남아 이번 토이 프로젝트에서는 최대한 구현해보려고 했다. firebase의 소셜 로그인 인증 서비스를 사용하면서 초기에 firebase라는 서비스를 알지 못한 상태에서 인증 서비스를 구현하기에는 진입장벽이 높지 않을까 우려했었는데, 기본적으로 firebase 내에 문서화가 잘되어 있어서 생각보다 간단하게(!?) 구현해낼 수 있었다. 또한, 로그인한 유저가 작성한 카드 폼의 내용을 저장해야만 했는데 이 부분도 firebase의 Realtime database를 이용하여 보다 수월하게 각 유저의 데이터를 저장하고 관리할 수 있었다. 이미지 업로드 서비스를 제공하는 Cloudinary는 사용법이 간단하고, 서비스 내에서 간단하게 이미지 크기나 화소를 지정하거나 업로드한 이미지 데이터 관리도 가능해서 편리하게 사용했다. 나중에 동기들과 진행하기로 한 사이드 프로젝트에서 한 번더 사용할 예정이다.

✨✨ 사이트 둘러보기! 👉🏻👉🏻 Teta's Card Maker

Teasan

일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

이전 포스트