[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_92일차_"프론트엔드 팔로우 기능 오류 해결 (2)"

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [92]일차

🚀92일차에 발생했었던 오류해결과정 및 수정사항을 회고하고자한다. (2025.04.23)

---

유저 생성 후 팔로우를 하여도 해당 유저의 팔로잉 목록은 비어있는 문제

 

⚠️오류원인

- userId와 Id 경로 문제
- LazyInitializationException 오류 발생
➡️JPA의 지연 로딩(Lazy Loading) 관련 문제로, 트랜잭션 범위 밖에서 지연 로딩된 엔티티에 접근하려고 할 때 발생

⌛진행과정

1. 새로운 유저 생성 (기존에 가입된 유저가 "팔로우할" 유저를 새로 생성함)

curl -X POST http://localhost:8090/api/v1/members/signup -H 'Content-Type: application/json' -d '{"email":"test3@test.com","password":"Test123!@#","name":"테스트3","blogName":"테스트블로그3"}'

 

2. 기존 유저로 로그인 (새로운 유저를 팔로우 하기 위함)

curl -X POST http://localhost:8090/api/v1/members/login -H 'Content-Type: application/json' -d '{"email":"test2@test.com","password":"Test123!@#"}'

 

3. 기존 유저로 새로운 유저 팔로잉

curl -X POST 'http://localhost:8090/api/v1/follows/follow?followingid=2' -H 'Authorization: Bearer 키값'

 

4. 기존 유저의 팔로잉 상태 확인

• 프론트엔드 UI에서는 팔로잉이 "1" 증가된 것을 확인 가능하지만

• 팔로잉을 눌러서 모달 팝업을 열게되면 여전히 팔로우하는 사용자가 없다고 표시되는 오류가 발생 중이다.

 

✅해결 방법

- 새 토큰을 받고 새 토큰으로 다시 팔로우 요청

curl -X POST 'http://localhost:8090/api/v1/follows/follow?followingid=2' -H 'Authorization: Bearer 키값'

• 이전 토큰이 만료되어 새로운 토큰을 받기 위해 로그인을 수행했고, 성공적으로 새 토큰을 발급
• 새 토큰을 사용하여 팔로우 요청을 보냈고, "팔로우 성공" 응답을 받음

 

테스트 결과 요약

1. 팔로잉 목록 조회 테스트 
   - ID 2번 유저("유저입니다")가 팔로잉 목록에 정상적으로 표시됨
   - 상태는 "ACTIVE"로 정상
   
   
2. 언팔로우 테스트
   - 언팔로우 요청 성공
   - 팔로잉 목록이 빈 배열 []로 변경되어 정상적으로 언팔로우됨
   
   
3. 다시 팔로우 테스트
   - 새 토큰으로 팔로우 요청 성공
   - 팔로잉 목록 재확인 시 ID 2번 유저가 다시 표시됨
   
   
4. ID 2번 유저의 팔로워 목록 확인 - UI화면

curl http://localhost:8090/api/v1/follows/members/2/followers -H 'Authorization: Bearer 키값'

• ID 2번 유저의 팔로워 목록을 확인한 결과
  - ID 1번 유저("테스트2")가 팔로워로 표시됨
  - 팔로워의 상태는 "ACTIVE"로 정상
  - 현재 프로필 사진은 없음(null)
  
  ➡️팔로우 작업이 성공적으로 반영된 것
  
  
• ID 1번 유저(테스트2)가 ID 2번 유저를 팔로우했기 때문에 팔로워 목록에 정상적으로 표시

---

팔로워/팔로잉 목록이 반대로 표시되고 있는 문제

⚠️오류원인

- 백엔드 API 응답은 정상적으로 오지만 프론트엔드에서 표시되는 방식이 잘못됨

 

✅해결 방법

• user_follower_tsx (유저 팔로워 관련 스크립트)

// 팔로워와 팔로잉 목록을 가져오는 함수
const fetchFollowData = async () => {
  setLoading(true);
  try {
    // 팔로워 목록 가져오기
    const followersResponse = await fetch(`http://localhost:8090/api/v1/follows/members/${userId}/followers`, {
      credentials: 'include'
    });
    
    // 팔로잉 목록 가져오기
    const followingResponse = await fetch(`http://localhost:8090/api/v1/follows/members/${userId}/followings`, {
      credentials: 'include'
    });

    if (followersResponse.ok) {
      const followersData = await followersResponse.json();
      setFollowers(followersData);  // 팔로워 데이터 설정
    } else {
      setFollowers([]);
    }

    if (followingResponse.ok) {
      const followingData = await followingResponse.json();
      setFollowing(followingData);  // 팔로잉 데이터 설정
    } else {
      setFollowing([]);
    }
  } catch (error) {
    ...
  }
};

 

// 현재 탭에 따른 사용자 목록
const currentUsers = activeTab === 'followers' ? followers : following;

• 1. API 호출과 상태 설정은 올바르게 되어있지만, 화면에 표시할 때 followers와 following 배열을 반대로 사용중인 문제발견
• 2. 다른 문제로 백엔드의 FollowServiceImpl에서 팔로워/팔로잉 목록을 조회하는 로직이 반대로 되어있는 문제발견
• 3. 또한 FollowRepository의 메소드와 FollowServiceImpl의 구현이 불일치하는 문제발견

FollowServiceImpl 에서 

• findAllByFollowerId(Long followerId) - 내가 팔로우하는 사람들 목록
• findAllByFollowingId(Long followingId) - 나를 팔로우하는 사람들 목록

메소드를 수정함으로써 해결

---

🚀회고 결과 :

회고를 통해 팔로우 관련 기능에서 모달 팝업의 출력문제를 해결할 수 있었다.

백엔드 단에서의 호출과 프론트엔드 단에서의 처리에서 꼬여있는 것 같았다.

팔로우, 팔로워, 팔로잉 등에 대한 용어 개념 정리가 필요하여서

팔로우 기능이라는 전체 범주 안에 (팔로워, 팔로잉)을 포함시키는 것으로 개념을 정리할 수 있었다.