✅ 식집사들을 위한 식물 관리 사이트 ✅
- 성향에 맞는 식물을 테스트해보고, 테스트한 식물의 성장도를 기록할 수 있어요 📈
- 식물의 특징을 필터링해서 검색하고 다양한 식물의 정보를 찾아볼 수 있어요 ❓
- 키우는 식물을 체계적으로 관리하고 식물과 함께하는 일상을 기록해보세요 📆
- 식물에 대한 정보와 이야기를 식집사 이웃들과 공유해보세요! 💬
1️⃣ 개발 기간
2️⃣ 아키텍처
3️⃣ 주요 기능
4️⃣ 기술 스택
5️⃣ 기술적 의사결정
6️⃣ 트러블 슈팅
7️⃣ 팀원
2022.12.30(금) ~ 2023.02.10(금) (6주간)
✔️ 식집사 테스트/ 가이드
- 16가지 유형의 성격 테스트
- 6가지 의 식물 추천 및 가이드
✔️ 식물 찾아보기
- 300여종의 식물 검색
- 5가지 필터 (초보자, 잎, 열매, 꽃, 다육/선인장)
✔️ 식물 일지
- 내가 키우는 식물을 등록하고 관리
- 각 식물의 관리도를 그래프로 나타내고, 일기를 작성 가능
✔️ 커뮤니티
- 태그별 게시판 (질문과 답변, 식물자랑, 기타, 추천 게시판)
- 인기 게시물
react-query | 리액트 쿼리는 전역 상태를 고려할 필요 없이, 어느 곳에서든지 캐싱 설정(axios)같은 것을 정의할 수 있습니다. 덕분에 중복되는 api 요청들을 줄이게 되면서 UI/UX 개발에 도움을 받을 수 있는 것이 장점이라고 생각하여 사용하였습니다. |
Querydsl | 태그별 필터 조회 구현을 위한 동적 쿼리 작성을 고려하여 Querydsl을 사용하였습니다. |
github action | 효율적인 협업을 위해서 github에서 지원하는 github action을 사용하여 자동 배포를 진행하였다. |
nginx | 서버 확장에 용이하고 리버스 프록시를 통해 보안적으로 뛰어나며 무중단 배포를 통한 사용자의 편의성 또한 제공하고 이용자가 많아졌을 경우의 확장성을 생각하여 사용하였습니다. |
cloudfront | 사용자에게 제공되는 컨텐츠의 전송 속도를 높이고, cloudfront를 사용해 제공함으로써 보안성을 강화하기 위해 사용하였습니다. |
lambda | 이미지 리사이징은 CPU, 메모리를 많이 사용하기 때문에 독립적인 서버에서 이미지 리사이징을 하게 된다면 서버의 부담을 줄일 수 있기 때문에 사용하였습니다. |
Front-end | 검색기능 |
![]() |
Front-end | React Custom Hook |
![]() |
Back-end | RefreshToken 탈취 위협 |
![]() |
Back-end | 이미지 로딩 속도 개선 |
![]() |
홈 | 식집사 테스트 |
---|---|
![]() |
![]() |
식물 검색하기 | 식물일지 |
![]() |
![]() |
커뮤니티 | 마이페이지 |
![]() |
![]() |
BE 팀장 김인광 | BE 팀원 이상현 | BE 팀원 박소연 |
![]() |
![]() |
| FE 부팀장 강민승 | FE 팀원 정다솔 | Design 최미진 |