VilEZ 🏠

1️⃣ 프로젝트 소개
2️⃣ 기술 스택
3️⃣ 폴더 구조
4️⃣ 나의 역할 및 화면 구성
5️⃣ 회고

프로젝트 소개

주제

이웃 간 물건 공유 플랫폼 웹 / 앱 서비스

목적

이웃주민과 소통이 단절된 현대사회에서 서로 필요한 물품을 공유하고, 요청하는 플랫폼을 만들어 지역사회를 따뜻하게 만들고자 함

진행 기간

2023.01.03 - 2023.02.17

구성원

• FrontEnd 3명 (본인 포함)
• BackEnd 1명
• Mobile 1명
• Fullstack 1명

기술 스택

JavaScript	React	recoil	emotion.js	axios

폴더 구조

src
│  App.js
│  GlobalStyle.jsx
│  index.js
│  
├─ api
│      instance.js
│      
├─ assets
│  └─images
│          
├─ components
│  │  StompRealTime.jsx
│  │  
│  ├─ button
│  │      
│  ├─ common
│  │      
│  ├─ login
│  │      
│  ├─ modal
│  │      
│  ├─ mybox
│  │      
│  ├─ product
│  │      
│  ├─ profile
│  │      
│  └─ signup
│          
├─ hooks
│      
├─ pages
│      
└─ recoil
        atom.js

나의 역할 및 화면 구성

공유 물품 등록 & 상세보기

• multipart/form-data 를 활용한 다중 파일 업로드
• 라이브러리 없이 캐러셀(무한 슬라이드) 구현

실시간 채팅 & 지도

피공유자	공유자

( * 현재 두 gif에 싱크가 맞지 않는 문제가 있지만 실제로는 실시간 통신이 되고 있습니다. )

• Websocket과 STOMP를 활용한 실시간 통신

회고

• API나 라이브러리의 공식 문서를 보는 데 능숙해지고, 이를 활용해 많은 궁금증과 오류를 해결할 수 있었습니다.
• recoil 사용법에 대해 공부하고, 이를 활용해 여러 컴포넌트에서 사용되는 데이터들의 관리를 효율적으로 하였습니다.
• axios interceptor에 대해 공부하고, 토큰을 관리하는 법을 터득하였습니다.
• 테스트와 디버깅 과정에서 버그를 고치면서, 더 효율적인 컴포넌트 구조에 대해 고민해볼 수 있었습니다.
• 백엔드에서 제공하는 Swagger를 사용해 API 요청 테스트를 효율적으로 하였습니다.
• 실시간 통신을 구현하며, React의 생명 주기에 대해 더 자세히 공부할 수 있었습니다.