[TIL] 7주차 클론 코딩ㅣairbnb 클론 코딩 발표

 

클론 코딩 [항해 bnb] 발표

 

1. 프로젝트 소개

🏖️ 에어비앤비 웹서비스를 클로닝한 프로젝트

hanghaebnb

 

2. 주요 기능

• Spring Security, JWT를 이용한 회원가입/로그인
• 이메일 인증을 통한 로그인 구현
• AWS S3를 이용한 다중 이미지 업로드
• JPA Pageable을 이용한 페이지 무한 스크롤
• 타입별, 가격별 필터링 기능
• 키워드 검색 기능
• 숙소 좋아요 기능
• swagger 적용
• 숙박 시설 CRUD(조회 시 이미지 preview)

 

3. 서비스 아키텍처

 

4. 기술 스택

🎨 Front-end Stack

• React , javascript
• Redux
• Redux Toolkit
• MUI , styled-components
• axios

🛠 Back-end Stack

• Spring boot
• Spring Security, JWT
• AWS S3, RDS(MySQL)
• OAuth 2.0

🌐 Infrastructure

• AWS EC2
• AWS S3

🗂 Dev tools

• Swagger
• Git, Github

 

5. 트러블 슈팅

필터링 + 페이징 (with Spring Data JPA)

• 문제
  • 페이징과 카테고리별/가격별 조회를 한 번에 하려다 보니 쿼리가 복잡해져서 Spring Data JPA의 Query Method만으로는 조회가 어려운 상황이었다.
  • @Query 어노테이션과 native query를 이용하여 해결하려 하였으나 native query와 페이징을 함께 사용하기가 까다로웠다.
• 해결
  • countQuery를 이용하여 query문을 작성하고, @Param 어노테이션을 함께 사용하여 메서드를 생성하여 해결하였다.

@Query(countQuery = "select count(*) from room r where (r.price between :minPrice and :maxPrice) and r.type = :type", nativeQuery = true)
Page<Room> findByPriceBetweenAndType(@Param("minPrice") int minPrice,
                                     @Param("maxPrice") int maxPrice,
                                     @Param("type") String type,
                                     Pageable pageable);

 

6. 다음엔 사용해보고 싶은 기술

• S3를 이용한 다중 이미지 업로드의 개별 이미지 수정
• refresh 토큰
• https 적용
• logging
• 소셜 로그인 ( google, naver )
• bucket4j
• 지도 api
• 주소 찾기 api 기능
• grid속성을 조절해 카드 컴포넌트 크기 키우기
• 웹소캣 채팅 기능

 

 

기술 매니저님 피드백

공통 피드백

• Frontend
  • baseURL도 프론트쪽에서 환경변수 처리
  • 프론트 CI/CD, 성능 최적화
• Backend
  • 좋은 코드는 주석 없이도 이해가 가는 코드!
  • 실전에서는 새로운 기능도 좋지만 아키텍처, 스프링이 제공하는 세부 기능 적용해 보기
  • CloudFront, Redis 쓰는 이유, 장단점 알아두기
  • 제네릭을 왜 썼는지 꼭 써야만 했는지
  • GIt flow, Commit 컨벤션
  • 이유가 뭐고, 왜 쓰는지? 왜 이 구조로밖에 사용하지 못하는가? 다른 기능은 없나? 이게 맞나?
  • 인프라에 대해서도 알고 있는 게 좋음
  • 관심사 분리 신경 써서 아키텍처에 대한 고민 많이 해보기
  • CI/CD 방법만 찾아보면 적용해 볼 수 있음
  • 프론트랑 백 같은 서버에서 배포하면 백이 서브 도메인으로 사용하면 됨

우리 팀 피드백

• Frontend
  
  • 싱크로율이 매우 높음
  • 사용하지 않는 파일 정리 후 깃헙에 올리기
  • 실전 때는 커스텀훅, 비즈니스 로직을 따로 유틸함수로 빼서 관리해 보기
• Backend
  
  • 아키텍처 디자인 잘 그렸음
  • 코드를 통일하려는 노력 좋았음
  • 백서버 자체의 아키텍처 생각하기
  • util 패키지의 정의를 알아보고 했어야 함
  • jpql, query DSL을 이용하면 유동적으로 가능하다
  • JWT 사용 안 해도 되니까 소셜 로그인 구현해 보기
  • WebSocket 왜 있고 왜 쓰는지에 대한 걸 알아보고 쓰기 (채팅뿐만 아니라 알림에도 쓰임)