팀플) API 연결 비회원 별자리 데이터 처리, 유저 상세보기 페이지

어제 이제 각 팀원들 브랜치까지 머지 완료했고, 또 뭐 오류가 있었어서 그거 해결한다고 조금 오래 걸렸다. 지금 브랜치는 master, develop, develop2, feature * 4, 이렇게 7개 있음..

---

여튼 이제 내가 만든 API를 연결해야되는데 이걸 어떻게 관리해야될지 조금 고민 해볼 필요가 있다.

일단은 리팩토링을 좀 해서 구조를 짜놓자. 만들어둔 CRUD가 존재하는게 그에 대한 구조 자체도 수정할 필요가 있다.

우선 이 친구들을 따로 빼줌.

---

그리고 DB에 저장할 것을 생각해보자면 변동성이 적을 테이터만 DB에 저장하면 될 것 같은데 뽑아보면 별자리 데이터랑 유성우 데이터가 있다.

하지만 별자리 데이터는 위치별로 좀 나눠서 응답을 할거기 때문에 그냥 유성우 정도만 DB에 저장하도록 구조를 짜자.

그리고 나머지 데이터는 기본적으로 화면에 나타낼 때 특별한 요청이 없다면 서울의 위도 경도를 디폴트로 두는게 좋을 것 같다.

그럼 Spring에서 주기적 통신을 해서 화면에 나타내는 로직이 필요하겠네. 예를 들면 12시간에 한번씩 API 요청후에 자동으로 화면을 갱신하게끔 한다거나?

일단은 api 요청후에 데이터를 화면에 출력하는 것 까지가 1차 목표(유성우는 DB에 저장해서 사용) 이렇게 틀을 잡고 시작해보자.

---

일단은 별자리부터 처리해보자.

ConstellationController와 ConstellationService를 만들어서 GET 요청을 받을 수 있게 구현해뒀고, 이제 요청을 보내서 제대로 작동하는지 확인을 하면 되는데, 일단은 로그인 하지 않았을 때, 서울 기준으로 요청을 보내게끔부터 해보자.

우선 필요한 것들을 하나하나 씩 채우고 있는데,

여기서 기존에 팀원이 작성한 프론트, StarMap.jsx에 요청 함수 생성, 요청함수에 필요한 useUserLocation.js를 hooks에 생성, useUserLocation.js 함수에서 필요한 유저 DB 접근 후 위도 경도를 가져올 함수를 userLocationService.js를 service에 생성함.

userLocationService.js의 로직은 나중에 작성해보고 일단은 서울을 기준으로 데이터를 끌어오는지 확인해보자.

대충 로직 짜고 처음으로 확인해봤는데

생각해보니까 시큐리티 설정을 안했다.

401에러 아마 시큐리티 때문일거임.

그럼 뭐 해주고 와야지.

시큐리티에 / 경로를 허용해줬다.

데이터 백엔드에서는 올바르게 반환받았다!!

---

그럼 이제 로그인 유저에 대한 처리를 해야되는데, 그럼 그 전에 해야될 것이 있다.

로그인한 유저가 위치 정보를 여러개를 저장할 수 있다.

그럼 하나의 위치에 대해서만 보내야되는데 지금은 그런 로직이 없다. (DB 테이블에는 즐겨찾기를 도입해두긴함)

그래서 즐겨찾기 설정할 수 있게끔 해야되니까 내 정보 보기 페이지를 대충 그려서 구현도 해두고 로직을 짜야될듯?

// userLocationService.js

export const getUserLocationFromProfile = () => {
    // 실제로 사용자 프로필에서 위치 정보를 가져오는 로직을 작성 (예시 데이터)
    return { latitude: 35.6895, longitude: 139.6917 }; // 사용자 위치 (도쿄 예시)
};

근데 여기 대충 하드코딩 해둔게 있어서 로그인 상태로도 페이지 접근을 해봤는데 데이터가 두개가 반환되서 일단은 그거부터 고치고 넘어가자.

오케이 이제 로그인시에 중복 요청 하지 않는다.

 

문제가 뭐였냐면 useEffect의 훅이 상태 변경에 반응하도록 작성되어 있었음. 때문에 로그인 여부나 위치 정보가 변경될 때마다 해당 훅이 재실행되어서 api 요청이 두번 일어난 것

해결

isLoading을 사용해 첫 번째 로딩 이후 중복된 요청을 방지했고, isMounted로 컴포넌트의 상태 업데이트를 안전하게 처리하여 두 번의 중복된 API 호출이 일어나는 것을 막을 수 있었음.

---

사용자 Detail 페이지

일단 이거부터 대충 만들어서 사용자 위치를 즐겨찾기 할 수 있게끔 구현해보자.

상세보기 페이지를 만들기 위해서 memberDetailDTO부터 생성하고, memberController, memberService에 상세보기 페이지에 전달할 데이터 로직을 작성함.

그리고 이제 페이지 그리려는데 진짜 리액트쪽이 리팩토링이 안되어있어서 너무 어지러워서 리팩토링함.

페이지 안보이는 문제가 좀 있었는데 일단은 다 해결했고 이거 develop브랜치로 머지해서 팀원들 받게 해야겠다.

---

여튼 다시 페이지 그리는 걸로 돌아와서..

대충 그렸고 버튼 함수 App.js에 라우트까지 설정 다 하고 이제 해봤는데

userId를 출력까지는 잘 하는데 백엔드로 전송할 때 문제가 생기는듯?

---

이제 문제를 확인해보니까 전송하는 쪽 문제가 아니였고, MemberDetail.jsx에서 response.data로 응답 받고 있었는데 response.data.member로 수정해주니까 필드의 값을 가져오도록 설정하니까 페이지가 잘 떴음.

근데 왜 이름을 못가져오지?

그래서 로그 찍어보니까

아 필드가 userName이네 그래서 스프링 DTO 필드를 보니까 내가 저렇게 써놨다. 엔터티랑 똑같이 반환하게 수정하고 시도해보자.

이제 잘 가져오네 그럼 위치 즐겨찾기 로직 시작하면 될듯

---

위치 즐겨찾기

해보자고

위치 저장을 시켜보고 왔는데 프론트는 이미 시나리오를 그리면서 그려는 놔서 이렇게 뜨는거라 구현된건 없음.

백엔드 로직 짜고,,

백엔드와 통신할 프론트 로직짜고,,

또 아까처럼 정의 되지 않음 에러 떠서 백엔드 부터 확인했는데 DTO에 location ID 필드가 존재하지 않는 것을 발견하고 만들고 다시 시도 해도 그래서 프론트에서 콘솔로그랑 ID 찍어보고.

ID는 잘 뜨니까 뭔가 내가 코드를 개떡같이 썻구나 싶어서 확인해보니까.

<button onClick={() => handleUpdateFavoriteLocation(location.locationId)}>
이 부분을
<button onClick={() => handleUpdateFavoriteLocation(location.id)}>
이렇게 고쳐서 해결함.

이게 결과고 DB에서도 반영이 되었는가 교차 검증해봄.

저기 끝에 즐겨찾는 위치 보면 1번으로 업데이트 잘 되어있음.

2번으로 바꿔도 적용 바로 잘 됨!

그럼 일단 이건 끝이고 부수적으로 위치 설명 저장도 같이 짜면서 했는데 아마 되지 않을까?

안되네?

타이핑하면 1번 아이디의 위치와 2번 아이디의 위치가 동시에 적힘 이거 또 골때리네 ㅋㅋ

---

여튼간에 자잘한거 수정 했고, 보내봤는데 요청까지는 되는데 이후 컨트롤러에서 제대로 받지를 못해서 JSON 형신으로 값을 보내게끔 수정해보고 재시도 했다.

JSON으로 바꾸니까 잘 되네 DB도 확인해보자.

업데이트 잘 되어있다.

바꾸고 다시 보내도 잘 된다 DB도 확인해보면,

나이쑤

그럼 이제 이거 alert들을 토스트로 다 바꿔서 조금 더 이쁘게 만들어 놓고 프론트로 넘겨줘야겠다.

---

오케이 그리고 혹시 모르니까 인증되지 않은 사용자가 접근했을 때 메인 페이지로 리디렉션 하는 로직까지 하면 진짜 끝일듯 (이미 막혀있긴함.)

// PrivateRoute.jsx

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from '../../services/AuthProvider';
import { toast } from 'react-toastify';

const PrivateRoute = ({ children }) => {
    const { isAuthenticated } = useAuth(); // 로그인 여부 확인

    if (!isAuthenticated) {
        // 로그인되지 않은 경우 메인 페이지로 리디렉션
        toast.warning('로그인이 필요합니다. 메인 페이지로 이동합니다.');
        return <Navigate to="/react/main" />;
    }

    // 로그인된 경우, 요청한 페이지로 이동
    return children;
};

export default PrivateRoute;

뭐 나중에는 로그인 하지 않으면 내정보 상세보기 페이지가 보이지 않도록 할 예정이지만 혹시 모르니까 자연스러운 UI로 막아두는게 나중을 위해서 편하지 않을까?

                    <Route path="/react/member/:userId" element={
                        <PrivateRoute>
                            <MemberDetail />
                        </PrivateRoute>
                    } /> {/* 유저 상세 보기 페이지 라우팅 */}

이렇게 해서 쓰도록 했고,

했다가 그냥 이런식으로 다시 고쳐서 했음,

근데 이제 로그인 페이지와 괴리가 커서 로그인 페이지의 배경까지 끌어다 와서 썼다.

오케이 끌어오는 것 까지 완벽하다!

그럼 이건 이제 마무리 하고 다음엔 유저가 로그인시에 별자리 데이터를 즐겨찾기한 위치를 기준으로 요청하고 받아오는걸로