농장을 한 눈에 담다,

농담 🧑‍🌾


농담은 귀농한 청년 혹은 농장 관리자에게
농장 운영에 필요한 데이터를 모아 제공하고
누적된 농장데이터 통계 분석으로 생산성을 높여주는 서비스입니다.

농담 둘러보기



📺 발표영상

농담 발표영상 링크



🩻 Service Architecture








📍 서비스 핵심기능

핵심기능

📊 농장 관리 현황

올해 수입&지출 총계, 작업시간 통계 및 작년대비 상승/감소율
사용자 작물 월별/연도별 수확량 통계, 월별/연도별 매출, 비용, 순이익 통계




⛅️ 실시간 날씨정보 제공

사용자 지역의 실시간 날씨 상세정보, 시간별/주간 날씨정보 open api




📈 지역/작물별 도/소매 시세정보 제공

국내 17개 지역 中 사용자 희망 시세지역의 월별/연도별 도/소매 시세 정보 open api
102개 작물 中 검색 조회, 사용자 작물의 당일 시세 조회, 예상 판매 금액 조회






📆 일정관리

월별 / 주간 타임라인 관리, 이번 주 일정 조회




💵 농장장부

월별 수입&지출 내역 관리, 월별 결산 조회 및 관리, 최근 내역 조회




✍️ 농장일지

농작업 노하우, 회고 기록 및 관리






🛠 Tech & Platfrom

Front-End

Back-End

Design

Tools



💡 주요 기술

사용 기술 기술내용
CI/CD FE에서는 Github Actions, BE에서는 jenkins, nginx를 사용한 자동 빌드 및 무중단 배포 구현
Refresh token JWT 토큰을 일정 시간마다 자동 발급하여 으로 인증시간을 늘리고 보안성 높임
이메일 인증 회원가입시 인증 이메일을 발송하여 사용자 확인
소셜 로그인 카카오를 통한 소셜 로그인
Cache 케시 데이터를 사용한 API 요청 최소화
CloudFront 정적 컨텐츠의 전송 속도를 높이고 HTTPS 적용을 통한 보안강화
통계데이터 시각화 ApexCharts 커스텀을 통해 통계 데이터를 다양한 그래프로 시각화



📚 주요 라이브러리

라이브러리명 버전 사용목적
react-redux 6.3.0 규모가 큰 프로젝트의 데이터 전역관리에 용이. mobx, recoil 등과 비교했을 때 아직까지 사용자가 압도적으로 많고 커뮤니티가 가장 발달되어 있으므로 제일 기본적인 상태관리 라이브러리 이해도를 높이기 위해 사
react-actions 2.6.5 리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용하여 코드가 짧아지고 가독성이 좋아짐. 다른 상태 라이브러리에 비해 코드가 길고 복잡한 redux의 단점 보완
react-thunk 2.4.1 redux 액션을 반환할 때 객체뿐 아니라 함수를 반환하게 해주어 미들웨어에서 비동기 처리 가능
react-router-dom 6.3.0 리액트 컴포넌트 기반으로 경로설정 가능
Styled-components 5.3.5 css의 컴포넌트화로 재사용 및 유지보수 용이, props 전달 및 jsx문법 적용 가능
jwt-decode 3.1.2 jwt토큰에서 유저정보 디코딩을 위해 사용
axios 0.27.2 HTTP Client 라이브러리로 Fetch API에 비해 코드가 간결하고 JSON데이터로 자동변환 가능
Apexcharts.js 1.4.0 3type(선그래프, 바그래프, 파이그래프) 차트 커스텀 및 mousehover시 나타나는 tooltip 커스텀 용이
react-big-calendar 0.40.2 react-datepicker는 일정의 기간을 보기에 용이하다면 react-big-calendar는 등록된 이벤트 내용을 직관적으로 보여줌



🔥 이슈 및 트러블슈팅

FE

📒 장부 월별 내역 상태관리
👉 throttle로 렌더링 제어
📅 safari(ios)에서의 Invalid date

BE

👨‍🔧 Redis
🖥️ 서버 모니터링
⚙️ CI/CD
🔑 카카오 로그인

팀 소개


프로젝트 기간
22.06.24 - 22.08.05 (6주)

🧑‍🔧 제작자