🗯️ 어쩌다 보니 명세에 없는 기능을 구현하게 되었다..
잘 보고 기획했어야했는데 🤔 근데.. 이런 기회? 오히려 좋아 ~!
사건의 개요..
우리가 구현하고자 하는 API명세는 '감귤마켓'의 명세이다.
그냥 딸기마켓, 포도마켓 이렇게 이름만 바꾸고 이런 종류의 프로젝트를 구현해봐라! 라는 목적인 것 같았는데 우리는 남들과는 다른 차별화된 우리만의 프로젝트를 만들고싶었고..
그러다보니 마켓이아닌 '펫메이트' 라는 반려동물 매칭 서비스를 기획하게 되었다.
감귤마켓의 기본 명세는 지키되, 우리는 사용용도를 살짝씩 변화를 주었고
기존의 감귤마켓에는 없는 매칭할 반려동물을 구하는 피드를 추가로 기획했다!
그래서 최종적으로 우리피드는 매칭피드 , 커뮤니티피드 두가지였는데 둘 다 모두 자신이 팔로우한 사람의 게시글이 피드에 올라가는 방식이다. 그러나 API 명세에서 제공되는 것은 커뮤니티피드 단 한 개였다...!
이거 명세에 없는거면,, 우리가 구현할 수 없는건가? 하는 생각에 멘토님께 질문을 드렸고
가능하다는 답변을 받아 냅다 도전!!!!!!
도전
일단 문제를 해결하려면, 전체게시글 중 내가 팔로워 한 사람의 글만 골라서 보이게 구현하면 될 것 같았다!
현재 내가 팔로우 하는 사람의 정보를 불러오는건 API명세에 있기때문에 그 명세를 사용해서 이 기능을 구현하였다. 처음 써보는 리덕스툴킷을 이용해서 팔로워의 정보의 상태관리를 시도했다.
내가 팔로우한 사람들의 정보를 불러오는데는 성공..!
follower 배열을 얻게되었다.
이제 여기서 follwer의 accountname과 posts의 accountname이 일치하는 posts를 찾아서 배열로 만들어주면되는데,,
filter 함수를 사용하면 될 것 같았다.
function isFollower(e) {
if (e.accountname === follower.accountname) {
return true
}
}
const followpost = posts.filter(isFollower);무작정 위 코드를 쳐봤지만 당연히 안될 것 같았다 ^^..
일단 followerId를 따로 빼내서 배열을 만들었다.
그럼 이제 얘네랑 일치하는 posts를 찾으면되는데,,
이거 뭔가 가볍게 해결 가능 할 것 같은데 ..!
어떤 로직을 짜야할까
첫 시도
function isFollower() {
for (let i = 0; i < followerId.length; i++) {
for (let j = 0; j < posts.length; j++) {
if (posts[j].accountname === followerId[i]) {
return true
}
}
}
}
const followpost = posts.filter(isFollower);
흠.. 결과값이 몬가 이상하다..
두번째 시도
이번에는 filter를 안쓰고 그냥 짜보았다.
const followPost = [];
for (let i = 0; i < followerId?.length; i++) {
for (let j = 0; j < posts?.length; j++) {
if (posts[j].accountname === followerId[i]) {
followPost.push(posts[j])
}
}
}나올 것 같은데 안나온다.
콘솔로 찍었을 경우 i와 j는 잘 찍히는걸 보면 posts[j]쪽이 문제인 것 같다.
posts는 객체들이 배열로 들어가 있기 때문에 몇번째인지 정해주면 출력이 될 것 같았는데 콘솔로 찍어본 결과 
이렇게 object로 출력된다 ㅠㅠ
삽질하다가 배열을 클릭해봤는데,, posts[j]다음에 accountname이 아니었구나..? 그래서 그런건가.. 싶어서 posts[j].author.accountname 으로 바꿔주었다!
const followpost = [];
for (let i = 0; i < followerId?.length; i++) {
for (let j = 0; j < posts?.length; j++) {
if (posts[j].author.accountname === followerId[i]) {
followpost.push(posts[j])
}
}
}근데도 undefind가 떠서 한참을 삽질했다 근데 알고보니,,
const loginReqPath = `/product/?limit=100`;100개의 리미트 중에 내가 팔로우 한 사람의 글이 없었음 ㅋ..ㅋ...ㅋㅋ..
팔로워 배열에 다른사람 막추가해보고 콘솔찍다 알아차려따..
그래서 리미트 한도를 올려줬더니??
잘뜬다 ^_^
결론 코드는 맞는 코드였다 ㅠ
for문으로 성공은 했지만 for문에서 undefind 뜬 것 때문에 잘못 사용한 줄 알고
아까 하다가 말았던 filter를 사용해서 다시 구현했었다.
여기서도 제대로 했는데 계속 동작이 안돼서 봤더니 100개중에 팔로워 게시글이 없는거 알아차려서 for문도 이렇게 수정할 수 있었다..ㅎㅎ
수정한 filter를 사용한 코드 (최종코드)✨
let followpost = posts?.filter(e => followerId.includes(e.author.accountname));for문보다 더 깔끔하고 간결하다!!!
그리고 for문을 사용했을 때는 아이디별로 포스트를 찾아서 넣어주는 방식이다보니 순서가 시간순서가 아닌, 아이디별로 포스트가 모아져 있어서 시간순으로 다시 정렬해주는 코드를 추가로 짜야했다. 그러나 filter를 사용해서 짠 코드는 순서가 최신글이 위에 올라와있어서 훨씬 보기좋고 효율적인 것 같아 이 코드를 사용할 예정이다!
그냥 끄적거리다가 버린 코드
dipatch 쪽도 한 번 건드려봤다.
AxiosPetInfo(URL + `/product/${followerId}/?limit=30`)저 괄호속의 아이디를 가진 사람의 글을 불러오기때문에 .. 팔로워된 모든 사람의 아이디를 요청하면 되지않을까..? 싶어서 코드를 작성해봤는데
useEffect(() => {
for (let i = 0; i < followerId?.length; i++) {
dispatch(AxiosPetInfo(URL + `/product/${followerId[i]}/?limit=30`))
console.log('gg', followerId[i])
}
}, [followerId])
아주 신나는 화면이 출력되고있다. 무한로딩이다 ... ㅋㅋㅋ
일단 for문을 디스패치에 사용하는게 옳지 않는 것 같다. 그리고 생각해보니까
dispatch(AxiosPetInfo(URL + `/product/${followerId[i]}/?limit=30`)여기서 followerId의 값이 계속 바뀌어 통신을 해주어야해서 안좋은 코드가 될 것 같아서 이방법은 끄적거려 보다가 바로 포기했다!
만약 팔로워가 1000명이라면 1000번의 통신을 해야하는데,, 끔찍하다 ,,,,
.
.
.
그래서 결론은 깔끔하게 filter를 사용해서 구현 성공!!!
