yj-front
미니 프로젝트 - 우리의 모든것 본문
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을 사용하게 된다면 이점을 꼭 고려해볼 생각이다. 마지막으로 추후 진행할 예정이지만 광고를 다는것과 검색최적화 부분 진행할 계획이다.
좋은분들과 프로젝트를 진행해서 의미있었으며 계획했던 기간안에 마무리한게 너무 만족한다.
메인 페이지
내 정보 입력 페이지
상대방 정보 입력 페이지
결과 페이지
'프로젝트' 카테고리의 다른 글
최종 프로젝트 - AFTERWORK | 퇴근하고 뭐하지? (0) | 2021.05.30 |
---|---|
미니 프로젝트 - 웹사이트 클론 코딩(다노 샵) (0) | 2021.05.27 |
미니프로젝트 - Palette (0) | 2021.04.25 |
미니 프로젝트 - 이미지 포스팅 커뮤니티 (0) | 2021.04.04 |
미니 프로젝트 - 일정관리 캘린더 (0) | 2021.03.25 |