🐶 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	[BE] 최민주
메인 화면 Nav Bar Footer		[FE] 배경민 [BE] 최민주
Kakao 로그인	default.mov	[FE] 배경민 [BE] 최민주
피드 메인	default.mov	[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 를 명확하게 전달하여 빠른 이슈 파악을 돕는다.