Recording/에러 기록장

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

LEFT 2025. 5. 20. 18:31

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

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

🖇️기타 업데이트 사항

- ERD 사진 엔티티 추가

  • 게시글에 여러 장의 사진이 들어가면서 사진 관리의 복잡도가 증가
  • 또한 S3에서 가져온 사진 URL을 저장할 필요가 생김
    이를 해결하기 위해, 사진 정보를 별도로 저장하는 Photo 엔티티를 도입

  • 사진 타입 컬럼 (photo_type) 사진의 용도를 구분하기 위해 PhotoType enum을 정의하여,
    - 프로필 사진 (PROFILE)
    - 게시글 메인 사진 (MAIN)
    - 게시글 추가 사진 (ADDITIONAL) 으로 나눔

    ➡️해당 사진이 어떤 용도로 쓰였는지 빠르게 식별 가능

  • URL 컬럼 (url) S3에서 사진 업로드 시, presigned URL은 일정 시간 뒤 만료되기 때문에
    임시 URL이 아닌, 변하지 않는 S3 Key 기반 URL을 저장

    ➡️이 URL을 통해 백엔드에서 S3의 사진을 안정적으로 참조 가능

  • 게시글 ID (board_id) 하나의 게시글은 여러 장의 사진을 가질 수 있음
    ➡️사진 입장에서 보면 다수의 사진이 하나의 게시글에 속함 (ManyToOne)
    즉, 게시글과는 1:N 관계매핑 (게시글 기준)

  • 유저 ID (user_id) 마찬가지로 유저는 여러 장의 사진을 업로드할 수 있음
    ➡️사진 기준에서 보면 여러 사진이 하나의 유저에 속함 (ManyToOne)
    즉, 유저와도 1:N 관계매핑
@Entity @Getter @Setter
@SuperBuilder
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "photos")
public class Photo extends BaseEntity {
    @Enumerated(EnumType.STRING)
    @Column(name = "photo_type", nullable = false, length = 100)
    private PhotoType type;

    @Column(nullable = false)
    private String url;

    @ManyToOne
    @JoinColumn(name = "user_id")
    private User user;

    @ManyToOne
    @JoinColumn(name = "board_id")
    private Board board;
}

프론트엔드 팔로우 기능 해결

⚠️오류원인

<문제상황>
- 팔로우, 팔로워가 0일때의 팔로우 관련 팝업이 발생하지 않는 문제
- 팔로워/팔로잉이 없을때 빈 배열 [] 이 오는 문제

<오류원인>
- ➡️컴포넌트가 마운트될 떄 useEffect에서 isOpen && userId 조건으로 데이터를 가져오고 있음
- ➡️팝업 오픈 여부와 관련된 상태 관리가 잘못되고 있음

⌛진행과정

1. isOpen && userId 대신 isOpen 일 때만 데이터를 불러오도록 수정
2. 백엔드에서 status 중복 선언 문제 해결
3. 사용자 객체를 먼저 저장하여 DB에서 ID를 할당받고 refresh token을 생성하는 순서로 수정

✅해결 방법

  1. 팔로워/팔로잉 목록 모달 구현
    - UserFollower.tsx 컴포넌트를 활용하여 팔로워/팔로잉 목록을 모달로 표시
    - initialTab 속성을 추가하여 처음 열릴 때 어떤 탭을 보여줄지 설정 가능
    - 팔로워/팔로잉이 0명일 때도 모달 표시 가능
  2. 팔로워/팔로잉 영역 개선
    - 프로필 영역의 팔로워/팔로잉 정보를 클릭 가능한 영역으로 변경
    - 클릭 시 해당 탭이 선택된 상태로 모달 표시

  3. 빈 상태 UI 개선
    - 팔로워/팔로잉이 없을 때 유저 친화적인 UI 표시
    - 안내 메시지와 적절한 아이콘으로 빈 상태임을 시각적으로 표현
    - 팔로잉 탭이 비어있을 때 "사용자 찾아보기" 버튼 제공

  4. API 연동
    - 백엔드 API와 적절히 연동하여 팔로워/팔로잉 정보 조회
    - 팔로우/언팔로우 기능을 백엔드 API와 연동

프론트엔드 회원가입 오류 해결

⚠️오류원인

<문제상황>
- 회원가입 페이지가 제대로 렌더링되지 않는 문제
- members/signup/page.tsx에서 handleSignUp 함수가 중복 정의
- 회원가입 진행 시 "서버와의 통신 오류 발생" : 새 사용자 저장하는 과정에서 refresh Token을 생성할때 아직 저장되지 않은 사용자의 ID를 사용하고자하는 원인

✅해결 방법

- 사용자 객체를 먼저 저장하여 DB에서 ID를 할당받고 refresh token을 생성하는 순서로 수정

회원가입 테스트

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

로그인 테스트

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

  • accessToken과 refreshToken이 정상적으로 발급됨
  • 사용자 정보 (email: test2@test.com, name: 테스트2)가 정상적으로 반환됨
  • 토큰에 ROLE_USER 권한이 포함되어 있음을 확인

팔로잉/팔로워 테스트

팔로워 목록 확인

curl <http://localhost:8090/api/v1/follows/members/1/followers>

 

  • 팔로워 목록 API (/api/v1/follows/members/1/followers)가 빈 배열을 반환

 

팔로잉 목록 확인

curl <http://localhost:8090/api/v1/follows/members/1/followings>

  • 팔로잉 목록 API (/follows/members/1/followings)가 빈 배열 반환

➡️새로 가입한 계정의 예상대로 팔로워와 팔로잉이 모두 0명인 상태

 

실행 결과

팔로워/팔로잉이 0명일 때 백엔드 API와 프론트엔드 모달 팝업이 모두 정상적으로 동작하고 있음

🚀회고 결과 :

회고를 통해 팔로우 관련 기능에 대해 해결할 수 있었다.

팀 프로젝트여서 맡은 기능을 책임지고 해결해나가는 과정에서 성장할 수 있었다.

저작자표시 (새창열림)