📌 팔로우-취소 테스트 화면
moontest라는 ID 계정으로 로그인했을 때 확인할 수 있는 팔로워 목록이다(둘다 내 테스트 계정). 팔로우 버튼을 클릭할 때 '내 팔로워 정보'와 '나를 팔로우한 팔로워'의 팔로워 정보 변화를 살펴보려고 한다.
위 gif에서 자기소개 내용이 '개발은 개발개발'인 팔로워의 ID 계정은 moon_220721이다.
나의 accountname(ID 계정): moontest내 팔로워의 accountname(ID 계정): moon_220721
ID 계정은 중복되지 않는다. 기본적으로 나를 팔로우한 사람 리스트를 보고 팔로우 버튼을 클릭하므로 먼저 나를 팔로우한 사람 리스트를 확인해보자.
👩🏻💻 팔로우하면 내 팔로워 정보가 어떻게 바뀔까
나를 팔로우한 사람 리스트는 [{...}, {...}] 형식의 배열이다. 배열 안에는 팔로워 계정의 정보가 들어있는데, 내가 moon_220721을 팔로워하면 이 정보 중에 isfollow, follower, followerCount가 바뀌어야 한다. moon_220721의 팔로워에 변동이 생기기 때문이다. 팔로우를 할 때는 /follow API에 POST 요청을 보내고 다시한번 팔로우 버튼을 누르면 토글처럼 언팔로우가 되며 이때는 /unfollow API에 DELETE 요청을 보낸다.
[Before] 나(moontest)를 팔로우한 사람 리스트
[
{
"_id": "62d8141217ae6665817d0a87",
"username": "moonhee",
"accountname": "moon_220721",
"intro": "개발은 개발개발",
"image": "...",
"isfollow": false, // (1)
"following": ["moontest의 토큰"], // (2)
"follower": [], // (3)
"followerCount": 0, // (4)
"followingCount": 1
}, ...
(1) moon_220721을 팔로우하면 나를 팔로우하고 있는 moon_220721의 isfollow는 true가 된다.
(2) "folowing"은 moontest를 팔로우하고 있는 moon_220721이 팔로우하는 사람을 배열로 나타낸다. 현재는 moontest밖에 없다.
(3) "follower"은 나를 팔로우하고 있는 moon_220721을 팔로우하는 사람(아무도 없음)을 배열로 나타낸다.
(4) 팔로워 숫자 0명 😥
[After] moon_220721을 팔로우한 이후에 나(moontest)를 팔로우한 사람 리스트
[
{
"_id": "62d8141217ae6665817d0a87",
"username": "moonhee",
"accountname": "moon_220721",
"intro": "개발은 개발개발",
"image": "...",
"isfollow": true, // (1)
"following": ["moontest의 토큰"], // (2)
"follower": ["moontest의 토큰"], // (3)
"followerCount": 1, // (4)
"followingCount": 1
}, ...(1) moontest가 moon_220721을 팔로우했기 때문에 true가 됐다!
(2) moon_220721는 여전히 moontest를 팔로우하고 있기 때문에 그대로 moontest의 토큰이 있다.
(3) moon_220721을 팔로우하는 사람(=moontest)이 생겼다!
(4) 팔로워 숫자가 증가했다. 😏
🚀 앞으로 개선해야할 부분
- 팔로우 - 취소 상태가 변화하면 버튼 스타일도 변화하게끔 만들기(버튼이 젤 어려운거 같다...)
- 팔로워 컴포넌트를 만들고 나면 팔로잉 컴포넌트로도 재사용할 수 있게 만들기
- 프로필 수정이 발생하면 관련 내용인 accountname, username, image, intro 변수들의 변화가 잘 반영되는지 확인하기
