HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트
/
☘️
초록집사
☘️

초록집사

 
📌
댓글 UI에 SWR을 적용하여 실시간 대화 지원하기
📌
SWR의 캐싱과 프리패칭1
📌
SWR의 캐싱과 프리패칭2
 
 

반려식물에 관한 정보를 공유할 수 있는 SNS 플랫폼

 
📌 배포 링크
🌵 초록 집사
Web site created using create-react-app
🌵 초록 집사
https://green-butler-585a32.netlify.app/
🌵 초록 집사
 
📌 깃허브 링크
FEDC2_GreenButler_Off
prgrms-fe-devcourse • Updated Jul 5, 2023
 
📌 회고 링크
프로젝트 회고
19일간의 팀 프로젝트가 끝났다. 이것은 나의 첫 팀 프로젝트였고, 처음이었던 만큼 많이 낯설고 어려웠지만 그래도 무사히 프로젝트를 완성할 수 있어서 뿌듯했던 시간이었다. 우리는 총 4명으로 구성된 팀이었다. 돌이켜 보면 개발 외에도 각자 잘하는 것이 있는, "밸런스가 좋은" 팀이었던 것 같다. 디자인 경력이 있는 팀원이 있었고, 문서화를 잘 하는 팀원, git 관리에 능한 팀원도 있었다.
https://gitul0515.github.io/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A6%AC%EB%B7%B0/2022/06/24/%EC%B4%88%EB%A1%9D%EC%A7%91%EC%82%AC6.html
프로젝트 회고
 
📌 최종 발표 영상
 
 

☘️ 기간


  • 구현 기간: 22.6.06 ~ 21.06.22
  • 리팩토링 기간: 21.06.24 ~

☘️ 인원


  • 팀장: 권기홍
  • 팀원: 하신영, 함소진, 조윤정
 
 
 

☘️ 기획 배경 & 주요 기능


주제

  • 초록 집사(Green Butler)
  • 반려 식물에 관한 정보를 공유할 수 있는 SNS 플랫폼
 

선정 배경

  • 반려 식물이란 '사람이 정서적으로 의지하고자 가까이 두고 기르는 식물'을 뜻하는 신조어다. 장기화된 팬데믹으로 집에 있는 시간이 늘자 반려식물을 키우는 이들이 늘고 있다. 최근 조사에 따르면, 팬데믹 이후 반려식물에 관심이 늘었다는 의견이 51.1%나 된 것으로 나타났다(농촌진흥청, 2022).
  • 반려 식물은 종류에 따라 양육 방식이 다양하다. 정보가 부족한 초심자가 기르는 데는 적지 않은 어려움이 따른다. 이에 반려 식물을 기르는 데 체계적인 관리를 제공하고, 다른 이들과 정보를 공유할 수 있는 서비스에 대한 요구가 존재한다.
  • 반려 식물 정보 공유 서비스는 이미 존재하나, 일부 서비스는 기능 및 UX에 대한 불만이 꾸준히 제기되고 있다. 예를 들어, '플랜트그램'은 식물의 종류가 적어 검색이 불편하고, 메뉴를 선택하는 방식이 복잡하다는 불만이 제기되고 있다. 이에 더욱 편리한 UX를 갖춘 서비스에 대한 요구가 존재한다.
 

타겟 사용자

  • 반려식물을 기르는 사람들
  • 양육 초보자 + 경험 많은 애호가
 

주요 기능

  • 반려식물 포스트: 사진과 글이 포함된 포스트를 볼 수 있고, 직접 작성할 수 있다.
    • 관심 있는 포스트에 좋아요를 누를 수 있고, 댓글을 작성할 수 있다.
  • 태그 검색: 태그를 기반으로 포스트 검색을 할 수 있다.
  • 팔로우: 팔로우를 통해 다른 유저와 친분을 맺을 수 있다. 해당 유저의 정보를 볼 수 있다.
  • 활동 점수: 활동 점수에 따라 유저에게 등급이 부여된다.
 
 

☘️ 사용 기술


언어

  • JavaScript

라이브러리

  • React, React Router, Axios, Emotion 등

패키지 관리

  • yarn

컴포넌트 관리

  • Storybook

코드 컨벤션

  • ESLint, Prettier

배포

  • Netlify

협업

  • github, Notion, Slack

디자인

  • Figma
 

☘️ 나의 역할 & 담당 기능


  • 팀장 역할
    • 일정 관리, 회의 진행, 발표 등
  • 앱의 구조 설계
    • 컴포넌트 다이어그램 제작
  • axios를 통해 API 요청 메서드 구현
  • 메인 페이지 담당
    • 무한 스크롤, 가상 스크롤, 좋아요 등
  • 게시물 상세 페이지 담당
    • 댓글 추가 및 삭제, 게시물 삭제 등
  • 라우터 설정 & 페이지 접근 관리
 
 

🛠 앱의 구조 설계


팀장으로서 앱의 구조를 설계하여 팀원들에게 제시해 줄 필요가 있다고 생각했습니다.
컴포넌트 다이어그램을 통해 프로젝트의 청사진을 그렸고,
이를 바탕으로 팀원들에게 적절한 역할을 배분했습니다.
 
 

🛠 API 요청 메서드 구현


axios를 사용하여 API를 요청하는 메서드를 구현했습니다.
  • common: axios 인스턴스 설정 및 응답 처리
  • postApi: 게시물 조회, 생성, 수정, 삭제 등 API 요청
  • useApi: 로그인, 회원가입, 인증 확인 등 API 요청
깃허브 링크
notion image
 
 

🛠 메인 페이지 구현


 
 
 
 
 

🛠 게시물 상세 페이지 구현


 
 
 

🛠 라우터 설정 & 페이지 접근 관리


 
 
 
 

☘️ 주요 기술 이슈


📌
무한스크롤에서 Intersection Observer가 중복 생성되는 문제
📌
페이지 뒤로가기 시 스크롤 복원하기
📌
무한스크롤을 가상스크롤(virtual scroll)로 교체하여 렌더링 최적화
📌
JWT 관리 - 로컬 VS 세션 스토리지
📌
로그인 / 비로그인 여부에 따라 페이지 접근 관리하기
📌
커스텀 훅은 무언가를 꼭 리턴해야 할까?
 
 

☘️ 팀워크 & 관리 이슈


👿
악마의 대변인 팀원
📝
문서화의 부족
😢
경험 부족으로 인한 일정 계획의 어려움
 
 

☘️ 와이어 프레임


 

☘️ 디자인 시안