미니 프로젝트 - 우리의 모든것

allaboutour

사이트 바로가기

개요

- 프로젝트 주제: mbti, 별자리, 띠, 혈액형 모든 궁합을 한번에 확인할 수 있는 서비스

- 본 프로젝트는 모바일 화면에 최적화해서 구현함

- 개발인원 3명(프론트엔드1명-본인, 백엔드2명) 디자이너 1명

- 개발 기간: 2021.07.05 ~ 2021.07.11

- 클라이언트: React, 서버: node.js(express) 사용

- 형상관리 툴: git

 

🛠 Tools

- View (React with JavaScript, React-Router, antd, Styled-components)

- State Management (Redux, Redux-Thunk, Immer, Redux-actions)

- Build Tool (Create React App)

- Code Quality Tool (Prettier)

- Infrastructure (AWS S3, Route 53)

- Design Tool (Xd adobe)

- CI/CD (github-action)

 

🕹 기능정보

- 메인페이지: 현재 참여한 인원수를 보여주며 테스트 공유버튼을 클릭하면 클립보드에 링크가 복사됩니다.

- 내 정보 입력 페이지: 이름, 성별, 생년월일, 혈액형, mbti를 입력합니다. mbti유형을 모른다면 검사할 수 있게끔 링크 버튼을 만들었습니다.

- 상대방 정보 입력 페이지: 내 정보 페이지와 동일 합니다.

- 결과 페이지: 나와 상대방의 궁합점수가 나오며, 각 궁합별 점수도 볼 수 있습니다. 또한 궁합별 코멘트도 확인할 수 있습니다.

후기

해당 프로젝트의 경우 부담갖지 않고 하루 하루 꾸준히 하는 것을 목표로 했으며 그 결과 깔끔하고 재미있는 프로젝트를 만든 것 같다.
이번 프로젝트는 개발적 부분도 있지만 관련 레퍼런스도 조사해보는 경험을 했으며, https를 cloudfront를 이용해서 연결했지만 내부 조율이 있어 이 부분은 다시 http로 변경했다. 하지만 이를 통해 cloudfront 사용 경험을 할 수 있었다. 또한 github action을 이용해 S3 배포 자동화를 경험했다. 이 부분은 조금 더 고려를해봐야할 필요가 있을 것 같다. node-modules를 매번 install하지 않고 캐싱해서 변화가 있을때에만 install을 한다면 배포시간을 더욱 단축시킬 수 있을것 같아 나중에도 github action을 사용하게 된다면 이점을 꼭 고려해볼 생각이다. 마지막으로 추후 진행할 예정이지만 광고를 다는것과 검색최적화 부분 진행할 계획이다.
좋은분들과 프로젝트를 진행해서 의미있었으며 계획했던 기간안에 마무리한게 너무 만족한다.

 

메인 페이지

 

내 정보 입력 페이지

 

상대방 정보 입력 페이지

 

결과 페이지