프로젝트 소개

✅ 식집사들을 위한 식물 관리 사이트 ✅

• 성향에 맞는 식물을 테스트해보고, 테스트한 식물의 성장도를 기록할 수 있어요 📈
• 식물의 특징을 필터링해서 검색하고 다양한 식물의 정보를 찾아볼 수 있어요 ❓
• 키우는 식물을 체계적으로 관리하고 식물과 함께하는 일상을 기록해보세요 📆
• 식물에 대한 정보와 이야기를 식집사 이웃들과 공유해보세요! 💬

👉 풀밭에 사이트 바로가기
👉 풀밭에 노션 바로가기

🔭 목차 | Contents

1️⃣ 개발 기간
2️⃣ 아키텍처
3️⃣ 주요 기능
4️⃣ 기술 스택
5️⃣ 기술적 의사결정
6️⃣ 트러블 슈팅
7️⃣ 팀원

⏰ 개발 기간 | Project Period

2022.12.30(금) ~ 2023.02.10(금) (6주간)

🛠 아키텍처 | Architecture

🌱 주요 기능 | Main Function

✔️ 식집사 테스트/ 가이드

• 16가지 유형의 성격 테스트
• 6가지 의 식물 추천 및 가이드

✔️ 식물 찾아보기

• 300여종의 식물 검색
• 5가지 필터 (초보자, 잎, 열매, 꽃, 다육/선인장)

✔️ 식물 일지

• 내가 키우는 식물을 등록하고 관리
• 각 식물의 관리도를 그래프로 나타내고, 일기를 작성 가능

✔️ 커뮤니티

• 태그별 게시판 (질문과 답변, 식물자랑, 기타, 추천 게시판)
• 인기 게시물

⚙ 기술 스택 | Technology Stack

Front-End

Back-End

개발 환경 | Environment

📑 기술적 의사결정 | Technical Decision-Making

react-query	리액트 쿼리는 전역 상태를 고려할 필요 없이, 어느 곳에서든지 캐싱 설정(axios)같은 것을 정의할 수 있습니다. 덕분에 중복되는 api 요청들을 줄이게 되면서 UI/UX 개발에 도움을 받을 수 있는 것이 장점이라고 생각하여 사용하였습니다.
Querydsl	태그별 필터 조회 구현을 위한 동적 쿼리 작성을 고려하여 Querydsl을 사용하였습니다.
github action	효율적인 협업을 위해서 github에서 지원하는 github action을 사용하여 자동 배포를 진행하였다.
nginx	서버 확장에 용이하고 리버스 프록시를 통해 보안적으로 뛰어나며 무중단 배포를 통한 사용자의 편의성 또한 제공하고 이용자가 많아졌을 경우의 확장성을 생각하여 사용하였습니다.
cloudfront	사용자에게 제공되는 컨텐츠의 전송 속도를 높이고, cloudfront를 사용해 제공함으로써 보안성을 강화하기 위해 사용하였습니다.
lambda	이미지 리사이징은 CPU, 메모리를 많이 사용하기 때문에 독립적인 서버에서 이미지 리사이징을 하게 된다면 서버의 부담을 줄일 수 있기 때문에 사용하였습니다.

🛠 트러블 슈팅 | Trouble Shooting

Front-end	검색기능
Front-end	React Custom Hook
Back-end	RefreshToken 탈취 위협
Back-end	이미지 로딩 속도 개선

🎥 시연 GIF | Testing

홈	식집사 테스트
식물 검색하기	식물일지
커뮤니티	마이페이지

🙂 팀원 | Member

BE 팀장 김인광	BE 팀원 이상현	BE 팀원 박소연
FE 부팀장 강민승	FE 팀원 정다솔	Design 최미진