1. 프로젝트 소개
설문조사를 통해 유저에게 영화 해리포터 속 4개의 기숙사 중 하나를 배정해주는 사이트 제작
2. 개발 기간
23.07.17 ~ 23.07.21
3. 화면 구성
Main Page
Question Page
Result Page
Comments Page
5. 프로젝트 상세 설명
[회원가입 및 로그인]
- Firebase Authentication을 이용하여 이메일과 비밀번호를 통해 회원가입을 진행하고, 유저를 관리할 수 있습니다.
- 유저가 로그인하면 Header에 로그인과 회원가입이 아닌 유저 정보와 로그아웃으로 변경됩니다.
[설문조사]
- 질문의 개수는 5개에서 12개 사이로 직접 지정할 수 있습니다.
- Google Spread Sheet를 외부 DB로써 이용하여 질문과 답을 저장하고 해당 라이브러리를 이용해 설문을 진행합니다.
- Spread Sheet는 배열로 데이터를 가져올 수가 없어서 여러 정보가 들어있는 하나의 문자열을 정규 표현식으로 잘라서 문자열 배열로 만드는 과정을 통해 데이터를 관리하였습니다.
[결과 페이지]
- 마찬가지로 Google Spread Sheet를 외부 DB로써 이용하여 기숙사 정보 및 이미지를 저장하고 설문 결과에 따른 결과값을 가져옵니다.
- Youtube API를 이용하여 해리포터 기숙사 배정에 관한 영상을 가져와 사용자에게 추천합니다.
[댓글 페이지]
- json-server를 이용하여 댓글 DB를 관리합니다.
- 유저가 없을 때는 비밀번호를 입력 받고 비밀번호가 일치할 때만 수정과 삭제가 가능합니다.
- 유저가 있을 때는 유저의 닉네임이 작성자 명으로 자동 입력되고 유저가 작성한 댓글만 수정과 삭제가 가능합니다.
6. 트러블 슈팅
-
Google Spread Sheet를 사용하고자 할 때 많은 오류가 발생해서 처음 데이터를 불러오기까지 많은 시간 소모하는 이슈 발생
Google Spread Sheet 라이브러리 및 react script를 다운그레이드 하고, "react-scripts --openssl-legacy-provider start”를 사용하는 방법으로 해결 -
Google Spread Sheet만을 외부 DB로 사용하고자 댓글도 Google Spread Sheet로 구현했으나, CRUD 기능 모두가 너무 느려지는 이슈 발생
json-server를 사용하면서 해결 -
Youtube API를 이용하여 추천 영상을 가져올 때 검색어를 기반 영상을 불러오는 방법으로 먼저 구현 했으나, API 할당량 이슈 발생
미리 정해놓은 영상 id값을 넣어서 영상을 불러오는 방법으로 해결
7. 느낀점
이번 프로젝트를 통해서 구글 스프레드 시트 API를 활용하는 방법에 대해 새롭게 공부할 수 있었고, 처음으로 Youtube API도 활용해 볼 수 있어서 개인적으로도 많은 성장을 할 수 있었습니다. 협업을 하는 부분에 있어서도 팀원들과 소통하며 계획한대로 무난하게 프로젝트를 진행할 수 있었습니다. 또한 github을 활용해서 프로젝트하는 방법도 이제는 제법 익숙해졌으며 충돌도 많이 나지 않았고 쉽게 해결하면서 프로젝트를 진행할 수 있어서 좋았습니다.
프론트엔드 개발자를 꿈꾸는