Honey Pick - 사용자 쇼핑 상품 공유 및 추천, 투표 서비스
본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다.
상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다.
🎁 Honey Pick
💡 프로젝트 소개
코로나로 인하여 온라인 쇼핑몰 시장이 성장하고, 온라인 쇼핑몰의 종류는 기하급수적으로 증가하고 있습니다.
자주 애용하는 물건이나 구매하고 싶었던 물건들이 많아질수록 모든 사이트를 기록하는 관리는 어려워지고 있습니다.
또한, 인플루언서와 같은 본인만의 개성이 있는 사람들이 애용하고 관심을 갖는 상품 정보를 쉽게 공유 받고 싶어합니다.
저희의 서비스는 여러곳으로 흩어진 쇼핑몰들의 상품 정보들을 하나의 앱에서 확인하고 관리가 가능합니다.
그리고 본인만의 개성이 있는 사람들의 상품들과 나의 상품들을 서로 공유하고 추천할 수 있습니다.
또한, 내가 선택한 많은 상품들에 대해서 다른 사용자들은 어떻게 생각하는지 투표를 통해 의견을 나눌 수 있습니다.
📆 프로젝트 기간
2022-04-11 ~ 2022-05-20 (6주)
💻 프로젝트 상세 내용 (Github)
통합 README
프로젝트 소개 및 핵심 기능, 서비스 아키텍처, 전체 기술 스택, 디자인 컨셉, 팀원 소개, 전체 코드
https://github.com/ssafy6-koko/honey_pick
Frontend README
Wireframe, 페이지별 상세 설명
https://github.com/ssafy6-koko/honey_pick/tree/master/frontend
💭 커뮤니케이션
- 애자일 방법론을 적용하였으며, 스프린트 생성 및 이슈 관리는 Jira를 이용하였습니다.
- 기타 스크럼 미팅, 회의, 일정 공유는 Notion을 이용하였습니다.
- 실시간 보이스 채팅, 버그 공유, 코드 리뷰는 Discord를 이용하였습니다.
🙋♂️ 역할
프론트엔드
- 프로젝트 구조 정의, 레이아웃 구성
- 공통 컴포넌트, 모듈 제작 (버튼/텍스트 입력창 컴포넌트, 텍스트 검증/변환 모듈)
- AWS S3 (이미지 저장)
- IOS 대응
- 코드 리팩토링
- 버그 수정
📚 기술 스택
📌 기술 선정 이유
React-Native
다수의 사람들이 쇼핑, 정보 공유, SNS 등을 모바일 환경에서 많이 이용하고 있다고 판단하였습니다.
그리하여 사용자가 빠르게 상품 정보를 저장, 공유, 투표를 진행하기 위해서 네이티브 앱 환경을 고려하였습니다.
그러나 Java, Kotlin, Objective C, Swift 를 이용한 네이티브 앱 개발자 부재와 정해진 기간내 학습 및 Android, IOS 두 가지 플랫폼 동시 개발이 어려울것이라 판단하였습니다.
대안으로 Javascript 를 이용하여 Android, IOS 두개의 플랫폼 개발이 가능한 React-Native 를 선택하게 되었습니다.
TypeScript
이전 프로젝트에서 JavaScript 이용한 개발 진행 시 팀원간 변수 불분명한 변수 사용, 예상 못한 타입 변환, 오타 등과 같은 이유로 오류가 발생 하는 경우가 종종 있어 개발 과정에서 어려움을 겪었습니다.
TypeScript 를 이용하여 변수에 타입을 지정하여 팀원간 코드 공유시 변수 사용에 대해 분명하게 인지하고, 테스트 과정에서 오류 발생을 낮추고 디버깅을 수월하게 진행하기 위하여 선택하게 되었습니다.
Redux-toolkit
앱 전역에서 사용하는 상태 값들을 Redux 를 이용하여 전역으로 상태 관리하기 위해 선정하게 되었습니다.
React-Redux 와 다르게 Redux-toolkit 을 사용하면 Redux 를 사용하면서 이용하는 여러 라이브러리들이 지원되어 편리하게 개발 진행 가능하여 사용하게 되었습니다.
Styled-Components
CSS-in-JS 로 CSS 문법을 JavaScript 파일에서 사용할 수 있고, 컴포넌트 별로 스타일 파일을 따로 생성하여 각 컴포넌트 마다 스타일 지정이 수월하여 Styled-Components 를 사용하게 되었습니다.
✨ 프로젝트 성과 및 어려웠던 점
- React-Native 이용한 Android, IOS 두 가지 플랫폼 동시 개발
모바일 시장에서 대표적인 Android 와 IOS 두 가지 플랫폼을 한번에 대응하여 개발을 진행하는 방식을 학습하였습니다.
Android 와 IOS 에서 각각 지원하는 부분과 동일한 코드에서도 발생하는 작은 차이점에 대해 학습하였으며, 각각 OS 환경에 맞게 대응하는 방법을 학습하였습니다. - TypeScript 를 이용한 개발과 디버깅
개발 진행 중 라이브러리에서 제공하는 타입을 찾기 어렵거나, 라이브러리에서 타입이 지정되어 있지 않는 경우가 발생하여 어려움을 겪었습니다.
라이브러리에서 타입 지정이 되어 있지 않은 경우에, 직접 필요한 타입을 지정하여 사용하는 방법을 학습하였습니다.
TypeScript 를 이용하여 개발을 진행하면서 예상치 못한 버그 또는 잠재적인 버그를 줄일 수 있었습니다.
또한, 변수의 타입을 지정하여 팀원간 의사소통 및 협업시 조금 더 직관적으로 변수의 용도를 인지 할 수 있었습니다. - Redux-toolkit 이용한 전역 상태 관리
하나의 컴포넌트에서 종속되어 사용되는 상태 값은 해당 컴포넌트에서만 사용하였으며 여러 컴포넌트에서 상태 공유가 필요한 경우 Redux 를 이용하고 Slice 로 구분하여 필요에 따라 전역적으로 상태 관리를 하는 방법을 학습하였습니다.
비동기 요청과 관련된 상태 관리는 Redux-toolkit 에 내장된 createAsyncThunk 를 이용하여 비동기에 대한 상태 관리 하는 방식을 학습하였습니다.
📘 관련 포스팅