낡은 플라스틱이 자랑이 되는 재활용 커뮤니티 서비스

🌳 쓰쓰또쓰 - 쓰고 쓰고 또 쓰자 🌳

쓰쓰또쓰와 함께 플라스틱을 재활용하고 기록해보세요.

개발기간: 2023.04.28 ~ 2023.05.25

---

• 팀 명 : 버리지마 나의 작은 아기봉다리
• 프로젝트 명 : 쓰쓰또쓰
• FE 팀원 : 천지인(팀장), 오아름, 정순현
• BE 팀원 : 진하늘(팀장), 김대현, 안윤아
• 배포 링크 : 쓰쓰또쓰 (모바일 환경에 최적화 되어있습니다. )

📢 쓰쓰또쓰를 소개합니다.

"잘" 분리 배출된 플라스틱 비닐의 8%만이 재활용된다는 사실을 아시나요?

쓰쓰또쓰는 낮은 재활용률의 한계를 탈피하고자 사용자에게 버리지 말고 더 쓸 것을 제안 합니다.
사용자가 두번, 세번 더 쓴다면 단번에 재활용률 100%, 200%를 달성한 것이지 않을까요? 👀

👨‍👩‍👧‍👦 우리팀을 소개합니다.

이름 클릭하면 개인 Github로 이동합니다.

파일 경로는 /seb43_main_008/client/app/페이지입니다.

천지인 (FE, 팀장)	🙋🏻‍♀️ 오아름 (FE)	정순현 (FE)
- 로그인 페이지 - 회원가입 페이지 - 회원 정보 수정 페이지 - 회원가입 축하 페이지 - 투표 완료 페이지	- 메인 페이지(/main) - 시리즈 상세 페이지(/detail) - 마이 페이지(/my-page) - 북마크 페이지(/bookmark) - 팔로우 페이지(/follow)	- 뱃지 페이지 - 시리즈 작성페이지 - 일지 작성 페이지 - 일지 상세페이지

진하늘 (BE, 팀장)	김대현 (BE)	안윤아 (BE)
- 회원 도메인 CRUD - 팔로우 도메인 CRUD - OAuth2 로그인 - Spring Security + JWT - 보안	- 시리즈 도메인 CRUD - 코멘트 도메인 CRUD - 데이로그 도메인 CRUD - CD/CI - 이미지 파일 처리 - 이미지 파일 처리	- 뱃지 도메인 CRUD - 북마크 도메인 CRUD - 투표 도메인 CRUD - Database Administrator - NginX

🔧 Skills

Tools

Git	Github	Notion	Discord

Front-end

Next.js	TypeScript	Styled- Components	Axios	PWA	ESLint	Prettier

Back-end

Java	mySQL	JWT	Gradle	AWS	Spring	Spring Security	Spring Boot

💻 Demo

HOME	DETAIL	NEWLOG
BOOKMARK	MYPAGE	FOLLOW
BADGE	PROFILE

📝 Documents

사용자 요구사항 정의서

화면 정의서

API 문서

ERD 문서

✨Git Commit & PR Message

태그이름	설명
Feat	새로운 기능 추가
Fix	git과 관련된 버그 수정
Design	CSS 등 UI 수정
Style	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
Refactor	코드 리팩토링
Docs	문서 수정 (MD 파일)
Test	테스트 코드를 생성하거나 수정 하는 경우

📓 프로젝트로 얻은 교훈

효율적인 API 통신을 더 깊게 고민하게 되었습니다.

• 사용자 행동에 따라 잦은 API 호출이 예상되어 불필요한 서버 통신을 최소화하는 것을 목표로 개발했습니다. 기획 단계에서 화면 기능 정의서를 만들어 각 컴포넌트에서 필요한 데이터를 문서화하였고, 이를 백엔드와 공유하여 컴포넌트별로 필요한 API를 정의했습니다.
• 하지만 이는 오히려 과도한 서버 통신의 결과를 만들었습니다. 이를 통해 효율적인 API 통신을 위해서는 다각적인 고민이 필요함을 배우게 되었습니다.

스택은 신중하게 선택해야함을 배웠습니다.

• 도전적인 과제로 Next.js App router를 선택했지만 충분한 사전조사가 이뤄지지 않아 프로젝트의 완성도를 높이지 못했습니다.
• server component, SSR 등을 활용하지 못한점에서 아쉬움을 느꼈으며, 스택을 선택할때는 충분한 레퍼런스 조사를 통해 해당 스택이 프로젝트에 어떤 영향을 미칠지 미리 고려해야함을 배웠습니다.