✨ 구현한 부분

• 담당한 기능에 대한 설명

  • 다른 사용자(유저)를 팔로우 및 언팔로우 합니다.

    

• 구현 과정에서의 핵심 결정사항들

  • 유저 팔로우 및 언팔로우 api 연결 및 정상 동작
  • 팔로우, 언팔로우 시 팔로워 수 즉시 화면에 반영
  • 팔로우, 팔로잉 상태 구분하기 쉽게 스타일 적용
  • 📈

🤔 고민한 부분

• 성능 최적화를 위해 고려한 요소

  const UserPageContainer = ({ blogName }: UserPageContainerProps) => {
    const [userData, setUserData] = useState<MyBlogInfo | null>(null);
    const [userPosts, setUserPosts] = useState<MyPostCardTypes[]>([]);
    const [isFollowing, setIsFollowing] = useState<boolean | null>(null);
  
    // 사용자 블로그 정보 및 작성한 게시물 가져오기
    useEffect(() => {
      if (blogName) {
        const fetchUserBlogInfo = async () => {
          const response = await callGet(`/api/mypage?blogName=${blogName}`);
          if (response.isSuccess) {
            setUserData(response.result);
            setIsFollowing(response.result.following);
          }
        };
  
        const fetchUserPosts = async () => {
          const response = await callGet(
            `/api/mypage/posts?blogName=${blogName}`,
          );
          if (response.isSuccess) {
            setUserPosts(response.result);
          }
        };
  
        fetchUserBlogInfo();
        fetchUserPosts();
      }
    }, [blogName]);
  
    const handleFollowClick = async () => {
      try {
        if (isFollowing) {
          const response = await callDelete(`/api/follow/delete?id=${userData?.userId}`);
          if (response.isSuccess) {
            setIsFollowing(false);
            setUserData((prevData) => {
              if (prevData) {
                return {
                  ...prevData,
                  followerCount: prevData.followerCount - 1,
                };
              }
              return prevData;
            });
          }
        } else {
          const response = await callPost(`/api/follow?id=${userData?.userId}`);
          if (response.isSuccess) {
            setIsFollowing(true);
            setUserData((prevData) => {
              if (prevData) {
                return {
                  ...prevData,
                  followerCount: prevData.followerCount + 1,
                };
              }
              return prevData;
            });
          }
        }
      } catch (error) {
        console.error('팔로우/팔로우 해제 요청 중 오류가 발생했습니다:', error);
      }
    };
  

  성능 최적화를 위해 userData에 following여부를 boolean타입으로 추가해주고, 실제 팔로잉 여부를 받아와 화면에 적용시켰습니다. 실제 팔로잉 여부를 받아와야 내가 이미 팔로우 하고 있는 사용자인지 아닌지를 알 수 있기 때문에 실제 api result값 반영하여서 개발하였습니다.

• 확장성을 위한 고려사항

• 보안, UX 등 비기능적 요구사항에 대한 고민

  • 사용자가 다른 유저를 팔로우 하였을 때, 그 팔로우 여부가 화면에 바로바로 적용 되도록 하였습니다. 언팔로우 시에도 동일하게 바로 적용되도록 하였습니다. 팔로우, 팔로잉 텍스트 뿐만 아니라 언팔로우 상태일 때는 하얀 배경에 테두리를 주었고, 팔로우 하고 있는 상태일 경우에는 검은 배경에 하얀 텍스트로 설정하여 사용자가 보기 쉽게 UX제작 하였습니다.

☄️ 트러블 슈팅 및 해결 방법

• 오류 사항

  • 처음에 설정하였던 handleFollowClick 함수는 정상적으로 팔로우 및 언팔로우 기능이 작동되었고 api 요청도 정상적이였으나 화면에 팔로워 수가 즉시 반영되지 않고 새로고침을 해야만 다시 api요청으로 받아와 늘어나거나 줄어든 팔로워 수를 확인할 수 있었습니다.

  const handleFollowClick = async () => {
      try {
        if (isFollowing) {
          const response = await callDelete(`/api/follow/delete?id=${userId}`);
          if (response.isSuccess) {
            setIsFollowing(false); 
          }
        } else {
          
          const response = await callPost(`/api/follow?id=${userId}`);
          if (response.isSuccess) {
            setIsFollowing(true); 
          }
        }
      } catch (error) {
        console.error('팔로우/팔로우 해제 요청 중 오류가 발생했습니다:', error);
      }
    };
  

• 해결 방법과 그 선택 이유

  • 그래서 setIsFollowing(response.result.following) 를 통해 실제 현재 팔로잉 여부를 받아와 isFollowing state에 넣어주고 아래 handleFollowClick함수에서 setUserData 함수를 통해 prevData가 있다면 followerCount : prevData.followerCount +- 1 을 해주어 바로바로 화면에서도 팔로워 수가 늘어나고 줄어드는게 보일 수 있도록 설정해 주었습니다.

  const fetchUserBlogInfo = async () => {
          const response = await callGet(`/api/mypage?blogName=${blogName}`);
          if (response.isSuccess) {
            setUserData(response.result);
            setIsFollowing(response.result.following);
          }
        };
  const handleFollowClick = async () => {
      try {
        if (isFollowing) {
          const response = await callDelete(`/api/follow/delete?id=${userData?.userId}`);
          if (response.isSuccess) {
            setIsFollowing(false);
            setUserData((prevData) => {
              if (prevData) {
                return {
                  ...prevData,
                  followerCount: prevData.followerCount - 1,
                };
              }
              return prevData;
            });
          }
        } else {
          const response = await callPost(`/api/follow?id=${userData?.userId}`);
          if (response.isSuccess) {
            setIsFollowing(true);
            setUserData((prevData) => {
              if (prevData) {
                return {
                  ...prevData,
                  followerCount: prevData.followerCount + 1,
                };
              }
              return prevData;
            });
          }
        }
      } catch (error) {
        console.error('팔로우/팔로우 해제 요청 중 오류가 발생했습니다:', error);
      }
    };
  

• 성능 이슈

🧪 성능과 확장성 고려사항

• 성능 테스트 결과 및 분석