항해99

[TIL] 7주차 클론 코딩ㅣReact + Spring boot 연동 에러 모음집

클론 코딩 [항해bnb] 진행 상황 내일 발표를 앞두고, 드디어 오늘! 프론트엔드와 백엔드의 결과물을 합쳐 보기로 했다. 지난 미니 프로젝트 때 React와 Spring Boot 연동을 하면서 너어어어무 많은 에러를 마주쳤기 때문에 이번에도 단단히 각오하고 덤벼들었다. 오늘의 에러 모음집 왜 갑자기 LocalDateTime이 배열로? Postman으로 조회 테스트 중에 생성날짜, 수정날짜 부분이 배열로 나오는 이슈가 발생했다. 팀원분이 빠르게 해결책을 찾아 적용해 주었다. @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Seoul") @JsonFormat을 ResponseDto 쪽에 ..

[TIL] 7주차 클론 코딩ㅣ@Query로 필터링 구현하기

@Query 어노테이션을 이용한 필터링 에어비앤비에는 카테고리 기능과 가격, 숙소 유형 등으로 필터링해 주는 필터 기능이 있다. 이번 클론 프로젝트에서는 숙소 유형으로 카테고리 기능을 대신하고, 가격 필터까지 적용해 볼 것이다. 현재 전체 조회에는 Pageable을 이용한 페이징이 구현되어 있기 때문에 어떤 방식으로 필터링 기능을 덧붙일까 고민하다가 최대한 Spring Data JPA의 Query Method를 활용하되, 조금 복잡한 쿼리에는 @Query 어노테이션을 사용해 보기로 했다. @Query 어노테이션을 이용하면 쿼리를 직접 정의할 수 있다! RoomRepository public interface RoomRepository extends JpaRepository { Page findByType..

[TIL] 7주차 클론 코딩ㅣAWS EC2 서버 배포

클론 코딩 [항해bnb] 진행 상황 바로 오늘! 되든 안되든 배포하기로 한 날이다. 생각보다 기능 구현이 빠르게 되어서 확장 스코프를 제외한 최소한의 스코프는 어느 정도 마무리가 되었다. ⭕ 구현 완료된 기능 리스트 1. 회원 로그인 회원가입 도전! 소셜 로그인 2. 방 CUD 방 등록 방 수정 (+S3 수정) 방 삭제 3. 방 R : 내가 맡은 부분 메인 페이지에서 방 전체 조회 type(호텔, 아파트, 주택) 별 필터링 → 진행 중 페이지네이션 4. 다중 이미지 업로드 S3에 이미지 등록(+방 등록) S3에 이미지 삭제(+방 삭제) 5. 좋아요 좋아요 추가 좋아요 삭제 좋아요 여부 반환(true or false) 6. 검색 키워드로 검색 ❓ 구현 예정인 기능 리스트 이메일 인증 타입별, 가격별 필터링..

[WIL] 항해99 6주차 회고ㅣ미니 프로젝트

이번 주 톺아보기 2022.12.19 [TIL] 6주차 미니 프로젝트ㅣAWS RDS, S3 다중 이미지 업로드 2022.12.20 [TIL] 6주차 미니 프로젝트ㅣAWS EC2 서버 배포 2022.12.21 [TIL] 6주차 미니 프로젝트ㅣReact + Spring boot 연동 2022.12.22 [TIL] 6주차 미니 프로젝트ㅣ프론트 서버 배포, 발표 2022.12.23 [TIL] 6주차 클론 코딩ㅣ주간 시작 2022.12.25 [TIL] 6주차 클론 코딩ㅣJPA Pageable을 이용한 페이징 이번 주는 클론 코딩, 실전 프로젝트를 앞두고 주특기 주차에서 배운 것들을 다시 익혀보는 시간이었다. 처음으로 프론트엔드와 협업하며 기본 CRUD를 포함한 미니 프로젝트를 구현하였다. 😀 잘한 점 새로운 기술..

[TIL] 6주차 클론 코딩ㅣJPA Pageable을 이용한 페이징

JPA Pageable을 이용하여 페이징 구현하기 에어비앤비의 무한스크롤을 구현하기 위해 JPA Pageable을 이용해보려 한다. 일단은 프론트에서 page, size를 받아 해당 개수만큼 데이터 끊어서 전달하는 데는 성공! 하지만 Page를 Entity 타입으로 받고 있어서 순환참조 에러가 나는 상황이다. DTO로 변환하는 작업과, 이후 필터링을 위해 pageable 객체 자체가 아닌 page, size, sort를 따로 받는 작업이 필요할 것 같다. 📚 참고자료 Spring Pagination으로 무한스크롤 구현 페이지네이션 하는법 1. 파라미터를 Pageable 객체로 받거나 page와 size받기. Pageable 객체로 받을 때 주의할 점은 @RequestParam 없이 받는다. 2. 참고자료..

[TIL] 6주차 클론 코딩ㅣ주간 시작

클론 코딩 주간 시작 1주 동안 뚝딱 만들었던 미니 프로젝트 주간이 끝나고, 클론 코딩 주간이 시작되었다. 실전 프로젝트 전 마지막 프로젝트이기도 하다. 2주 연속 팀장을 맡게 되었다. 이번 주까지 팀장을 주실 줄 몰랐는데😂 감사히 생각하고 열심히 해야지..! 진행 자체는 지난주와 크게 다르지 않겠지만, 분명 지난주보다 더 그럴듯한 결과물을 내야 할 것이다. 세부 일정은 다음과 같다. 12/23 (금) 19:00 까지 : 클론 코딩 주차 S.A. 제출 12/24 (토) 오후 : S.A. 서면 피드백 확인 12/26 (월) 저녁 : 클론 코딩 주차 중간 멘토링 12/29 (목) 19:00 까지 : 클론 코딩 완성본 제출 12/29 (목) 저녁 : 클론 코딩 주차 회고 발표 클론 코딩 기획 회의 이번 조는 ..

[TIL] 6주차 미니 프로젝트ㅣ프론트 서버 배포, 발표

미니 프로젝트 [감자마켓] 진행 상황 프론트 서버 배포 프론트 조원분들은 막바지 작업에 한창이셨고, 백 쪽은 어느 정도 작업이 마무리돼서 발표 자료를 준비하고 있었다. 당일 오후 7시까지 과제 제출인데, 5시까지도 작업이 끝나지 않은 상황이었다. 이대로 손 놓고 구경만 할 수는 없었다. 프론트 조원분께 서버 배포 관련 자료를 넘겨받아 내가 직접 프론트 서버를 배포하기로 결정했다. 이전에 다중 이미지 업로드를 구현하면서 다뤄봤던 AWS S3라서 큰 무리는 없겠다 생각했다. AWS S3를 이용한 정적 웹사이트 호스팅 이미지 업로드 때와 마찬가지로 AWS S3 버킷 생성 - 객체 소유권 비활성화 / 퍼블릭 액세스 차단 해제 정적 웹사이트 호스팅 활성화 버킷 정책 생성 IAM 사용자 생성 AWS CLI 설치 (..

[TIL] 6주차 미니 프로젝트ㅣReact + Spring boot 연동

미니 프로젝트 [감자마켓] 진행상황 React + Spring boot 연동 어제에 이어 프론트 분들이 만들어주신 화면에 API를 붙여 하나씩 테스트를 진행했다. 정말 말도 안 되게 많은 에러를 만났다. 너무 많이 만나서 무슨 에러를 만났는지 기억도 안 날 정도로.. CORS 에러 해결 대표적인 CORS 에러는 센스 있는 조원분이 미리 WebSecurityConfig에 추가해놓은 코드로 비교적 쉽게 해결할 수 있었다. @Bean public CorsConfigurationSource corsConfigurationSource(){ CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("http://localhost:3000..