안녕하세요, 저희는 'PetWithU' 팀입니다.
- 'PetWithU' 는 Wecode 코딩 부트캠프 41기 학생들로 구성된 최종 프로젝트 팀명이자 저희의 서비스 이름으로,
- 반려동물을 키우거나 곧 입양 예정인, 또는 반려동물에 관심있는 사용자들에게 커뮤니티 서비스를 제공하고 반려동물 용품을 판매하는 애플리케이션입니다.
- '오늘의집' 사이트 클론 코딩
- '오늘의집' 은 한국의 스타트업이 런칭한 인테리어 플랫폼 서비스로 온라인 집들이 콘텐츠부터 스토어, 전문가 시공 서비스 등 인테리어에 필요한 모든 서비스를 제공합니다.
🖥️ Demo video
- 소셜 로그인 기능을 이용해 번거로운 회원가입 절차를 생략하여 사용자의 접근성과 편의성을 높였습니다.
- 피드 게시글을 작성할 때 사이트에서 구매한 제품을 태그하여 다른 유저가 상품에 접근할 수 있습니다.
- 유저들이 가볼만한 산책로를 지역별로 조회할 수 있어 원하는 지역의 산책로 정보를 빠르게 찾아볼 수 있습니다.
- 지도API 를 사용하여 산책로의 위치를 지도 위에 좌표로 표시해 줍니다.
- 유저가 스크랩한 피드 게시글과 산책로 게시글을 스크랩 페이지에 모아서 볼 수 있도록 하여 유저의 히스토리를 기록하고 스크랩한 게시글을 한 눈에 조회할 수 있습니다.
2023/01/30 ~ 2023/02/10 (약 2주)
👑 강서윤 (Project Manager), 배경민, 권나현
이미지 보기
!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] 최민주 |
상세보기
- AWS RDS 에 DB를 구축하여 FE 및 사용자가 언제든지 원활하게 DB를 이용할 수 있도록 지원.
- Kakao SDK for JavaScript 를 이용한 카카오톡 소셜 로그인 및 회원가입 구현
- 로그인 성공 시 서버에서 secret key 를 이용하여 JWT 생성
- 로그인 후 사용자 인증/인가에 패스워드 대신 JWT 를 사용하여 보안성 향상
- Bcrypt를 사용하여 비밀번호를 암호화하여 DB에 저장
- 사용자의 계정 정보를 더욱 안전하게 관리
- 사용자 간 팔로우 / 팔로잉 지원
- 오늘의 제품 : 판매량을 기준으로 각 카테고리별로 내림차순 정렬 후 상위 1개 제품만 DB에서 추출
- 모든 제품 : 모든 제품을 판매량을 기준으로 내림차순 정렬하여 DB에서 추출
- 특정 제품의 세부 정보 조회
모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가.
- Request query 를 이용하여 FE에서 요청하는 페이지 정보를 효율적으로 요청받음
- Pagination 지원
- Request query를 이용하여 FE에서 요청하는 카테고리 페이지 정보를 효율적으로 요청받음
- FE 의 Pagination 을 효과적으로 지원하기 위해 DB에서 데이터 추출 시 Pagination 단위만큼 데이터를 추출하여 FE에 제공
- 한번에 너무 많은 데이터를 전달할 경우 발생하는 트래픽 과부하 및 수행 시간을 줄이는 효과도 있음.
- 로그인한 사용자가 팔로우하는 사용자가 작성한 게시글만 조회
- 팔로우하는 사용자 ID 를 얻어서
- 해당 ID가 작성한 게시글을 최신 순으로 pagination 크기만큼 정렬
- Flag 를 사용하여 Feed Main 에 필요한 정보만 리턴되도록 하여 효율성 증대
- 좋아요 / 스크랩 / 댓글 조회 지원
- 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함
- 좋아요 / 스크랩
- 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함
- 댓글 조회 / 등록 / 삭제 지원
- 댓글 생성 시 사용자 정보를 FE 에 리턴하여 작성자 정보를 알 수 있게 함.
- 사용자가 스크랩한 게시글을 한 페이지에서 조회할 수 있도록 하여 사용자 편의성 증대
- Bulk INSERT
- Bulk Insert 를 이용하여 많은 양의 데이터를 하나의 INSERT 쿼리로 DB에 저장
- 수행시간 최소화, 하나의 쿼리만을 사용하므로 효율성 증대
- Bulk Insert 를 이용하여 많은 양의 데이터를 하나의 INSERT 쿼리로 DB에 저장
- Multer & AWS S3
- 이미지 업로드를 위해 Multer 미들웨어 사용
- FE로부터 이미지 파일을 전달받아 S3에 저장
- 이미지 S3 url을 DB 에 저장
- 이미지 업로드를 위해 Multer 미들웨어 사용
- FE로부터 검색할 키워드를 request 쿼리로 전달받아 DB에서 검색
- 키워드를 포함하는 상품정보를 판매량 순으로 정렬하여 최대 10개 리턴
모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가.
지도 API (카카오맵) 을 이용한 산책로 위치 표시
- Request query 를 이용하여 FE에서 요청하는 페이지 정보를 효율적으로 요청받음
- 카테고리(시, 행정구) 별 조회 시 Query 재사용성 증대
- 카테고리별(시, 행정구) 게시물 조회 시 비슷한 SQL 쿼리가 반복하여 사용되는 것을 최소화하고자 중복되는 쿼리는 defaultQuery 문자열로 한 번만 선언한 뒤 각 페이지에서 필요한 추가 쿼리를 덧붙여 사용
- Pagination 지원
- Request query를 이용하여 FE에서 요청하는 카테고리 페이지 정보를 효율적으로 요청받음
- FE 의 Pagination 을 효과적으로 지원하기 위해 DB에서 데이터 추출 시 Pagination 단위만큼 데이터를 추출하여 FE에 제공
- 한번에 너무 많은 데이터를 전달할 경우 발생하는 트래픽 과부하 및 수행 시간을 줄이는 효과도 있음.
- Flag 를 사용하여 산책로 Main 에 필요한 정보만 리턴되도록 하여 효율성 증대
- 좋아요 / 스크랩 / 댓글 조회 지원
- 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함
- FE 에서 카카오맵 API를 사용하기 위해 필요한 정보 저장 (장소명, 장소 ID, 위도, 경도 저장)
- 좋아요 / 스크랩
- 좋아요 및 스크랩 버튼 클릭 시 Toggle 형태로 FE 에서 간편하게 상태 변경 결과를 알 수 있게 함
- 댓글 조회 / 등록 / 삭제 지원
- 댓글 생성 시 사용자 정보를 FE 에 리턴하여 작성자 정보를 알 수 있게 함.
- 사용자가 스크랩한 게시글을 한 페이지에서 조회할 수 있도록 하여 사용자 편의성 증대
- 스크랩한 게시글의 지도 정보(장소 좌표)를 모두 리턴하여 하나의 지도 위에 모든 장소 좌표가 표기될 수 있도록 지원. 사용자 편의성 증대.
모든 API가 수행되기 전에 로그인한 사용자의 JWT 를 검증하여 사용자 인증 후 인가.
- UPSERT 구문을 사용하여 하나의 API 및 하나의 쿼리 내에서 INSERT와 UPDATE가 동시에 이루어지도록 구현
- INNER JOIN 쿼리를 조합하여 JWT 단 하나만으로 사용자 장바구니의 모든 정보를 조회할 수 있도록 구현 (정보 노출 최소화 및 보안 강화)
- Bulk Delete 를 이용하여 여러 개의 장바구니 삭제를 하나의 Query 로 수행
더보기
- 💡 추가적인 보안 기능을 도입한다.
- Kakao SDK for JavaScript 를 이용한 카카오톡 소셜 로그인 및 회원가입을 도입하여 보안성과 사용자 편의성 모두 향상
- 💡 AWS RDS 를 이용해 모든 팀원이 하나의 DB를 사용
- 💡 AWS S3 를 이용해 이미지 파일 업로드 시 하나의 DB를 공유
- 한 번에 서버 1개만 켤 수 있었다
- 💡 포트 번호를 바꿔서 서버를 켠다.
- 관리자(멘토) 가 PR에 피드백을 주고 Main 브랜치에 merge 할 때까지 기다려야 했다.
- 기능이 각 브랜치에 나누어 구현되어 있으므로 서로 다른 기능을 테스트하기 위해서는 브랜치를 계속 전환해야 했다.
- 💡 테스트 브랜치를 한 개 생성하여 모든 코드를 통합하여 사용한다.
- 포트 번호를 바꿔서 테스트 브랜치 서버를 실행할 경우, 개발 서버에서 디버거 실행 시 테스트 브랜치 프로세스에 붙는다.
- 테스트 브랜치를 전환하는 작업이 번거롭고, 코드를 통합하는 데에도 리소스가 든다.
- 💡 AWS EC2 인스턴스 생성 후 git 을 이용해 GitHub 리포지토리로부터 소스코드를 pull 받아와서 테스트한다.
- FE 와 BE 모두 언제든지 실시간으로 테스트 가능. 테스트 브랜치 사용 이슈 해결
- 💡 AWS EC2 인스턴스 생성 후 git 을 이용해 GitHub 리포지토리로부터 소스코드를 pull 받아와서 테스트한다.
- FE 연결테스트 반복 시 간헐적으로 에러 발생
- ☠️ 원인을 알 수 없고 문제가 해결되지 않음. 추후 트러블슈팅 필요 😂
- 💡 Postman 자체 버그이므로 Insomenia 를 이용하여 해결
- ☠️ 원인을 알 수 없음. 추후 트러블슈팅 필요
- 작성한 API 가 20개가 넘으니 나도 내가 무엇을 개발했는지 모른다 😂
- 💡 문서화 툴을 적극 활용한다
- Postman Team Workspace 를 생성 후 모든 팀원 초대
- Postman 에서 모든 API 정보를 실시간으로 확인할 수 있도록 함
- 💡 문서화 툴을 적극 활용한다
- 💡 Postman 이외에 다른 API Documentation 툴을 시도해 볼 수 있다.
- ex) Swagger
- 개발 후 테스트해보니 버그가 너무 많다 🐞
- 💡 개발 단계에서 Jest 등을 이용하여 코드를 테스트한다.
- 💡 FE 에서 BE 에 이슈 전달 시 Error status code 와 Error message 를 명확하게 전달하여 빠른 이슈 파악을 돕는다.