• 프로젝트에서 사용하는 기술 스택/라이브러리와, 선정 이유

    [FE]

    • react-hook-form → 불필요한 렌더링을 없애주고, 정규식 사용이 간편해지기 때문에 사용. register에 모든 값을 담을 수 있음
    • react-slick: ^0.29.0 , slick-carousel: ^1.8.1 → carousel 을 간편하게 관리하고 커스텀 할 수 있음

    [BE]

    • AWS S3 - 이미지 업로드
    • AWS RDS - mysql 연결
    • AWS EC2 - 서버
    • AWS CODEDEPLOY
    • JAVA
    • SPRING
    • SPRINGBOOT
    • GITACTION
    • Web Socket - 채팅 기능 구현

  • 이번 주 한 일

    • 팀 전체

      [FE]

      • -회원가입 리팩토링 다중이미지 오류 , map 부분 데이터를 뿌려주고 마커를 지도에 마커를 그려줌
      • 주소를 좌표값으로 바꿔주는 로직 , react-hook-form 필수값 입력시 버튼활성화 기능
      • 카카오 로그인 구현
      • Refresh-token 설정
      • svg 파일 추가

      [BE]

      • 회원정보에 프로필사진 추가
      • 로그아웃, 회원탈퇴 기능 추가
      • 게시글 간 링크 기능
      • 일괄 예외처리
      • 회원, 게시글, 댓글 신고 기능 추가
      • 팀원 개인별

        • 이현동 → 1. 카카오 로그인 구현 카카오 로그인 버튼을 누르면 지정된 URL로 넘어가고 회원가입을 완료하게 되면 redirectURL 로 돌아와서 Access-token과 Refresh-token을 발급 받는다. → 2. Refresh token 구현 카카오와 동일하게 일반 로그인도 Access-token과 Refresh-token을 발급 받는다. 클라이언트에서 두 토큰 모두를 가지고 있어도 괜찮은지 의문이지만 우선, 모든 요청을 하기 전에 Access-token의 유효기간의 만료를 체크하고 만료 되었다면 에러 메세지를 받고 난 뒤에 Refresh-token을 서버에 넘겨주어서 새로운 Acess-token을 받아오는 방식으로 구현했다. → 3. 전체적인 CSS 수정 SVG 파일을 넣고 수정하고 불필요한 코드 삭제

        • 음지훈

           → 1. `signUp`  react-hook-form 사용해서 리팩토링 및 필수값 입력시 버튼 활성화 기능 

 → 2. `Missing`, `Catch`

          2-1 다중이미지 폼데이터로 전송 로직 구현 2-2 필수값 입력시 버튼 활성화

          2-3 지도 안에서 클릭시 마커 이동 및 클릭된 위치 지번주소로 변환 후 시각화

          2-4 카카오맵 부분 컴포넌트 화 시켜 로직 구현

           → 3.  `Map`  GET

          3-1 Missing, Catch 데이터를 가지고 와서 Map 부분에서 마커로 뿌려주는 로직 구현

          3-2 마커 클릭시 안에 정보를 보여줌

          3-3 geolocation 를 이용해서 현재 위치를 표시하는 마커를 그려주는 로직 구현

          → 4. MissingDetail CatchDetail adoptiondetail

          4-1 주소에 좌표로 변환하여 마커 부분에 마커를 찍어주는 로직 구현

        • 유영우 → 채팅, 채팅방 조회시 전송자 이름, 프로필 이미지 포함

          → 로그아웃 기능 추가

          → 카카오 연결끊기, 회원탈퇴 기능 추가

        • 김관희

          • 게시글 간 링크CRUD 작성
            • 게시판 분류에 따른 상호동작기능 활성화
            • 링크 작성 간 예외처리 기능
          • 게시글 CRUD작동시 링크관련 예외처리

        • 박성현

          • 유기동물 공공 AP

            • GlobalExceptionHandler 적용

            • Scheduled 적용/ 30분 단위 유기동물 공공API 호출 및 DB 저장

            • 기존 DB, 업데이트 DB 비교하여 변동 내역 저장 및 테스트 중

              → 현재 최신 DB를 받아와서 기존DB가 존재할 경우 업데이트 없을 경우 저장하는 방식에서 비교하여 저장하는 방식으로 변경 예정

        • 오영석 → 게시글 간 링크 CRUD 작성

          • 신고 기능 기능 구현
          • 맴버, 댓글, 게시글에 대한 신고 기능

  • 질문 리스트

    1. JWT 리프레쉬 토큰과 관련 현재에는 클라이언트에 Access-token과 Refresh-token을 로그인을 할 때 모두 받아 놓고 인증을 합니다. 인터셉터를 사용해서 모든 요청이 가기 전에 한번 만료가 되었는지 확인을 하고난 후, 만료가 되었다면 Refresh-token을 보내주어 새로운 Access-token을 쿠키에 업데이트 하는 방식인데 이 방식이 맞을까요?

    2. 채팅 기능 관련 → 채팅기능과 관련하여 질문 드립니다. 맨 처음에는 아래 1번째 사진과 같이 잘 연결이 됩니다. 그런데 다른 게시물의 채팅방으로 가거나 나갔다가 들어오면 2번째 사진처럼 됩니다. 그런데 메세지는 전송이 됩니다.. 이렇게 연결이 잘 되고 난 후 에는 새로고침을 하든 다른 게시물을 통해서 채팅방을 들어가든 메세지 전송만 가능합니다. 그래서 새로고침을 해서 채팅기록은 잘 불러와집니다. 원인은 아마 연결 성공을 한다면 sub부분을 실행하게 되는데, websocket 연결이 아예 되지 않는 것 같습니다..

    • 1번째 사진

    스크린샷 2023-03-24 오후 4.14.46.png

    • 2번째 사진

    스크린샷 2023-03-24 오후 5.11.33.png

    • 채팅기능 관련 FE 주소

    RescuePets_FE/ChatRoom.jsx at feat/chat · RescuePet/RescuePets_FE

    1. 레포지토리에 동일한 내용의 객체(POST LINK)가 이미 존재하는지 확인하는 방법 현재 방법은 모든 필드값을 비교해서 일치하는게 있는지 검증하는 방법입니다. 기존에 존재하던 엔티티를 파라미터로 넣어서 메소드로 비교하게 할 수도 있겠지만, 궁극적으로 레포지토리에서 메소드를 더 깔끔하게 입력하는 방법이 있는지 궁금합니다.

    2. 데이터 비교 관련(기존 DB == 유기동물 공공 API DB)

    질문(1)

    @Scheduled(cron = "0 0/30 * * * *")

    @Transactional

    protected void apiCompareDataSchedule() throws IOException { *log*.info("apiCompareDataSchedule 동작"); Execution time: 27,311ms

    →apiCompareDataSchedule() 메서드가public일 때 작업 소요 시간(Execution time: 219,313ms) →접근제한자에 따른 소요 시간 차이에 대해 명확히 이해 되지 않습니다.

    질문(2)

    공공API 데이터를 불러와서 기존 데이터와 비교하여 변동사항이 있을 경우 update를 동작하며 기존 데이터가 없을 경우 새롭게 저장합니다.

    entity 업데이트 메서드가 정상적으로 동작하였는데 데이터베이스에 반영이 안되는 문제

    5.프론트에서 사전에 예외차단이 가능한 부분도 백에서 예외처리를 해주는 것이 좋은 코드인가요?