🐶 PetWithU

안녕하세요, 저희는 'PetWithU' 팀입니다.

• 'PetWithU' 는 Wecode 코딩 부트캠프 41기 학생들로 구성된 최종 프로젝트 팀명이자 저희의 서비스 이름으로,
• 반려동물을 키우거나 곧 입양 예정인, 또는 반려동물에 관심있는 사용자들에게 커뮤니티 서비스를 제공하고 반려동물 용품을 판매하는 애플리케이션입니다.
• '오늘의집' 사이트 클론 코딩
  • '오늘의집' 은 한국의 스타트업이 런칭한 인테리어 플랫폼 서비스로 온라인 집들이 콘텐츠부터 스토어, 전문가 시공 서비스 등 인테리어에 필요한 모든 서비스를 제공합니다.

🖥️ Demo video

🐩 서비스 소개

• 소셜 로그인 기능을 이용해 번거로운 회원가입 절차를 생략하여 사용자의 접근성과 편의성을 높였습니다.
• 피드 게시글을 작성할 때 사이트에서 구매한 제품을 태그하여 다른 유저가 상품에 접근할 수 있습니다.
• 유저들이 가볼만한 산책로를 지역별로 조회할 수 있어 원하는 지역의 산책로 정보를 빠르게 찾아볼 수 있습니다.
  • 지도API 를 사용하여 산책로의 위치를 지도 위에 좌표로 표시해 줍니다.
• 유저가 스크랩한 피드 게시글과 산책로 게시글을 스크랩 페이지에 모아서 볼 수 있도록 하여 유저의 히스토리를 기록하고 스크랩한 게시글을 한 눈에 조회할 수 있습니다.

🗓 Project기간

2023/01/30 ~ 2023/02/10 (약 2주)

👥 인원 및 구성

Back-End

👑 최민주 (Product Manager)

Front-End

👑 강서윤 (Project Manager), 배경민, 권나현

💻 기술 스택

Frond-End

Back-End

Common

Communication

🖼️ 구현 예시

이미지 보기

!2월 중 이미지 일괄 교체 예정! | 페이지 | 구현 내용 캡쳐 | 개발 담당 | | --- | --- | --- | | DB 설계
Migration |

[Detail LINK](https://github.com/wecode-bootcamp-korea/41-2nd-PetWithU-backend/issues/5) | [BE] 최민주 | | 메인 화면
Nav Bar
Footer |

| [FE] 배경민
[BE] 최민주 | | Kakao 로그인 |

| [FE] 배경민
[BE] 최민주 | | 피드 메인 |

| [FE] 배경민
[BE] 최민주 | | 피드 디테일 |

| [FE] 권나현
[BE] 최민주 | | 피드 스크랩
모아보기 |

| [FE] 배경민
[BE] 최민주 | | 피드 글쓰기 |

| [FE] 권나현
[BE] 최민주 | | 상품 검색 |

| [FE] 배경민
[BE] 최민주 | | 상품 디테일 |

| [FE] 권나현
[BE] 최민주 | | 산책로 메인 |

| [FE] 강서윤
[BE] 최민주 | | 산책로 디테일 |

| [FE] 강서윤
[BE] 최민주 | | 산책로 스크랩
모아보기 |

| [FE] 강서윤
[BE] 최민주 | | 장바구니 | FE 캡쳐 미제공 | [FE] 권나현
[BE] 최민주 |

📑 API Documentation

Postman Link

🛠️ 구현 상세

상세보기

### 🗄️ Server & DataBase - AWS RDS 에 DB를 구축하여 FE 및 사용자가 언제든지 원활하게 DB를 이용할 수 있도록 지원. ### 👨‍👩‍👧‍👦 Users #### Login / Sign Up - Kakao SDK for JavaScript 를 이용한 카카오톡 소셜 로그인 및 회원가입 구현 - 로그인 성공 시 서버에서 secret key 를 이용하여 JWT 생성 - 로그인 후 사용자 인증/인가에 패스워드 대신 JWT 를 사용하여 보안성 향상 - Bcrypt를 사용하여 비밀번호를 암호화하여 DB에 저장 - 사용자의 계정 정보를 더욱 안전하게 관리 #### Follow / Following - 사용자 간 팔로우 / 팔로잉 지원 ### 🦴 Products #### Main page - 오늘의 제품 : 판매량을 기준으로 각 카테고리별로 내림차순 정렬 후 상위 1개 제품만 DB에서 추출 - 모든 제품 : 모든 제품을 판매량을 기준으로 내림차순 정렬하여 DB에서 추출 #### Detail page - 특정 제품의 세부 정보 조회 ### 🖼️ Feed 모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가. #### Main Page - Request query 를 이용하여 FE에서 요청하는 페이지 정보를 효율적으로 요청받음 - Pagination 지원 - Request query를 이용하여 FE에서 요청하는 카테고리 페이지 정보를 효율적으로 요청받음 - FE 의 Pagination 을 효과적으로 지원하기 위해 DB에서 데이터 추출 시 Pagination 단위만큼 데이터를 추출하여 FE에 제공 - 한번에 너무 많은 데이터를 전달할 경우 발생하는 트래픽 과부하 및 수행 시간을 줄이는 효과도 있음. - 로그인한 사용자가 팔로우하는 사용자가 작성한 게시글만 조회 1. 팔로우하는 사용자 ID 를 얻어서 2. 해당 ID가 작성한 게시글을 최신 순으로 pagination 크기만큼 정렬 - Flag 를 사용하여 Feed Main 에 필요한 정보만 리턴되도록 하여 효율성 증대 - 좋아요 / 스크랩 / 댓글 조회 지원 - 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함 #### Detail Page - 좋아요 / 스크랩 - 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함 - 댓글 조회 / 등록 / 삭제 지원 - 댓글 생성 시 사용자 정보를 FE 에 리턴하여 작성자 정보를 알 수 있게 함. #### Collection(Scraped posts) Page - 사용자가 스크랩한 게시글을 한 페이지에서 조회할 수 있도록 하여 사용자 편의성 증대 ### 📝 Feed (Special Options) #### 글쓰기 - Bulk INSERT - Bulk Insert 를 이용하여 많은 양의 데이터를 하나의 INSERT 쿼리로 DB에 저장 - 수행시간 최소화, 하나의 쿼리만을 사용하므로 효율성 증대 - Multer & AWS S3 - 이미지 업로드를 위해 Multer 미들웨어 사용 1. FE로부터 이미지 파일을 전달받아 S3에 저장 2. 이미지 S3 url을 DB 에 저장 #### 상품 검색 - FE로부터 검색할 키워드를 request 쿼리로 전달받아 DB에서 검색 - 키워드를 포함하는 상품정보를 판매량 순으로 정렬하여 최대 10개 리턴 ### 🏞️ Promenade 모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가. 지도 API (카카오맵) 을 이용한 산책로 위치 표시 #### Main Page - Request query 를 이용하여 FE에서 요청하는 페이지 정보를 효율적으로 요청받음 - 카테고리(시, 행정구) 별 조회 시 Query 재사용성 증대 - 카테고리별(시, 행정구) 게시물 조회 시 비슷한 SQL 쿼리가 반복하여 사용되는 것을 최소화하고자 중복되는 쿼리는 defaultQuery 문자열로 한 번만 선언한 뒤 각 페이지에서 필요한 추가 쿼리를 덧붙여 사용 - Pagination 지원 - Request query를 이용하여 FE에서 요청하는 카테고리 페이지 정보를 효율적으로 요청받음 - FE 의 Pagination 을 효과적으로 지원하기 위해 DB에서 데이터 추출 시 Pagination 단위만큼 데이터를 추출하여 FE에 제공 - 한번에 너무 많은 데이터를 전달할 경우 발생하는 트래픽 과부하 및 수행 시간을 줄이는 효과도 있음. - Flag 를 사용하여 산책로 Main 에 필요한 정보만 리턴되도록 하여 효율성 증대 - 좋아요 / 스크랩 / 댓글 조회 지원 - 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함 #### Detail Page - FE 에서 카카오맵 API를 사용하기 위해 필요한 정보 저장 (장소명, 장소 ID, 위도, 경도 저장) - 좋아요 / 스크랩 - 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함 - 댓글 조회 / 등록 / 삭제 지원 - 댓글 생성 시 사용자 정보를 FE 에 리턴하여 작성자 정보를 알 수 있게 함. #### Collection(Scraped posts) Page - 사용자가 스크랩한 게시글을 한 페이지에서 조회할 수 있도록 하여 사용자 편의성 증대 - 스크랩한 게시글의 지도 정보(장소 좌표)를 모두 리턴하여 하나의 지도 위에 모든 장소 좌표가 표기될 수 있도록 지원. 사용자 편의성 증대. ### 🛒 Carts 모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가. #### 장바구니 추가/수량 변경 - UPSERT 구문을 사용하여 하나의 API 및 하나의 쿼리 내에서 INSERT와 UPDATE가 동시에 이루어지도록 구현 #### 장바구니 조회 / 삭제 - INNER JOIN 쿼리를 조합하여 JWT 단 하나만으로 사용자 장바구니의 모든 정보를 조회할 수 있도록 구현 (정보 노출 최소화 및 보안 강화) - Bulk Delete 를 이용하여 여러 개의 장바구니 삭제를 하나의 Query 로 수행

🤔 아쉬웠던 점 & 개선방법

더보기

### JWT 만으로는 보안상 취약하다 - 💡 추가적인 보안 기능을 도입한다. - Kakao SDK for JavaScript 를 이용한 카카오톡 소셜 로그인 및 회원가입을 도입하여 보안성과 사용자 편의성 모두 향상 ### 팀 멤버들이 완전히 동일한 DB를 사용할 수 없어서 테스트 환경에 차이가 난다 - 💡 AWS RDS 를 이용해 모든 팀원이 하나의 DB를 사용 - 💡 AWS S3 를 이용해 이미지 파일 업로드 시 하나의 DB를 공유 ### 비효율적인 FE-BE 연결 테스트 - 한 번에 서버 1개만 켤 수 있었다 - 💡 포트 번호를 바꿔서 서버를 켠다. - 관리자(멘토) 가 PR에 피드백을 주고 Main 브랜치에 merge 할 때까지 기다려야 했다. - 기능이 각 브랜치에 나누어 구현되어 있으므로 서로 다른 기능을 테스트하기 위해서는 브랜치를 계속 전환해야 했다. - 💡 테스트 브랜치를 한 개 생성하여 모든 코드를 통합하여 사용한다. - 포트 번호를 바꿔서 테스트 브랜치 서버를 실행할 경우, 개발 서버에서 디버거 실행 시 테스트 브랜치 프로세스에 붙는다. - 테스트 브랜치를 전환하는 작업이 번거롭고, 코드를 통합하는 데에도 리소스가 든다. - 💡 AWS EC2 인스턴스 생성 후 git 을 이용해 GitHub 리포지토리로부터 소스코드를 pull 받아와서 테스트한다. - FE 와 BE 모두 언제든지 실시간으로 테스트 가능. 테스트 브랜치 사용 이슈 해결 ### Dao Layer 에서 트랜잭션(Query Runner) 이 간헐적으로 비정상적으로 동작한다. - FE 연결테스트 반복 시 간헐적으로 에러 발생 - ☠️ 원인을 알 수 없고 문제가 해결되지 않음. 추후 트러블슈팅 필요 😂 ### Multer 테스트 시 Postman 에서 Malform Header 이슈 발생 - 💡 Postman 자체 버그이므로 Insomenia 를 이용하여 해결 ### AWS EC2 서버에 VScode SSH Remote 시도할 경우 서버 응답이 현저히 느려지는 이슈 - ☠️ 원인을 알 수 없음. 추후 트러블슈팅 필요 ### API 관리 - 작성한 API 가 20개가 넘으니 나도 내가 무엇을 개발했는지 모른다 😂 - 💡 문서화 툴을 적극 활용한다 - Postman Team Workspace 를 생성 후 모든 팀원 초대 - Postman 에서 모든 API 정보를 실시간으로 확인할 수 있도록 함 - 💡 Postman 이외에 다른 API Documentation 툴을 시도해 볼 수 있다. - ex) Swagger ### 개발 완성도 - 개발 후 테스트해보니 버그가 너무 많다 🐞 - 💡 개발 단계에서 Jest 등을 이용하여 코드를 테스트한다. - 💡 FE 에서 BE 에 이슈 전달 시 Error status code 와 Error message 를 명확하게 전달하여 빠른 이슈 파악을 돕는다.