- 커피 디테일 페이지에서 main page 뒤로 가기, 홈 버튼 눌렀을때 로드 안 됐던 현상
커피 디테일 페이지 로드시에 같은 이름(list)으로 저장하고 store에서 꺼내와서 생기는 문제였다.
커피 디테일 가져오는 api사용하고 store저장 시
case LOAD_COFFEE_DETAIL: {
return { ...state, coffee: action.payload };
}store안에 다른 항목(coffee)으로 저장하게 바꾸어 줬더니 바로 해결!
- kakao맵 첫 로딩 시 geolocation이 한발짝 늦게 적용되어서 내 현재위치 주변의 커피숍이 안떴음.
/>> route설정 페이지에서 geolocation함수 돌려서 MAP 페이지로 태워 보냈다. 페이지 로드 전에 geolocation state로 태워 보냈더니 바로 해결!
- kakao맵 화면 자체 사이즈 변경시 일부가 로드 되지 않는 현상 발생!
/>> map이라는 영역의 스타일이 미리 지정되지 않고
지도를 생성한 뒤 지정되면 이런 현상이 나타난다고 한다.그래서 맵생성하는 쪽에 스타일 미리 지정하고
relayout()공식문서
relayout()함수 사용해서 집어 넣어줫더니 바로 해결됨
// 지도 생성
const map = new window.kakao.maps.Map(container, options);
container.style.width = '800px';
container.style.height = '600px';
map.relayout();-
naver 소셜로그인 시 kakao랑 똑같이 code만 넘겨줬더니 토큰값이 부족하다는 에러가 뜸. naver로그인 같은 경우는 서버에 get요청 보낼 때 코드값이랑 state값 모두 보내줘야한다.
오늘도 하나 해결- 찡긋--⭐ヾ(•ω•`)o -
map돌린 수정 버튼 modal창에 id값 싣어보내기
<ScWrap>
{review_list.map((item, index) => {
return (
<ScComment key={index}>{item.id}:{item.review}
<ScHR/>
<ScButton onClick={()=>{
setShowUpdate(true)
}}>수정</ScButton>
{showUpdate === true ? (
<UpdateComment
showUpdate={showUpdate}
setShowUpdate={setShowUpdate}
commentId={item.id}
boardId={boardId}
brand={brand}
/>) : null}
<ScButton onClick={()=>{
dispatch(__deleteComment(brand,boardId,Number(item?.id)))
dispatch(__loadComment({brand, boardId}));
}}>삭제</ScButton>
</ScComment>
)})}
</ScWrap>위에는 원래 코드! 수정 버튼을 클릭시 update모달로 코멘트의 아이디와 보드의 아이디가 api로 들어가서 업데이트가 실행되는 로직이다. 그런데 아무리 업뎃을 해도 한가지 리뷰만 업데이트가 되는 것이었다!구래서 콘솔로 여기저기 찍어서 확인해 보니까 review_list의 id값이 맵에의해서 하나씩만 찍혀 나오는게 아니고 모든 id값이 나오는 것이었다. 그래서 그중에 맨 마지막 리뷰만 업데이트가 되던 것이었던 것이었던 것이다! 그래서 엄청 고민하다가 나온 해결책
<ScWrap>
{review_list.map((item, index) => {
return (
<ScComment key={index}>{item.id}:{item.review}
<ScHR/>
<ScButton onClick={()=>{
setShowUpdate(true)
setReviewId(item?.id)
console.log(reviewId)
}}>수정</ScButton>
<ScButton onClick={()=>{
dispatch(__deleteComment(brand,boardId,Number(item?.id)))
dispatch(__loadComment({brand, boardId}));
}}>삭제</ScButton>
</ScComment>
{showUpdate === true ? (
<UpdateComment
showUpdate={showUpdate}
setShowUpdate={setShowUpdate}
commentId={reviewId}
boardId={boardId}
brand={brand}
/>) : null} 내가 보기에는 업뎃 모달은 showUpdate가 true인 상태에서만 맵 안으로 들어오기 때문에 item.id값이 안읽혀 오는것 같아서 무조건 맵안을 도는 수정 버튼의 온클릭에 item?.id를 setState함수를 사용해서 넣었다. 그랬더니 클릭하면 그 해당 맵속의 아이디가 정확하게 들어와서 수정값이 잘 적용되었다!!! 사실 아직도 막 명확하게 이래서!! 이래!! 이건 아니지만 된다!!!!!!!!! 비둘기 머리돌려서 날라가도 날라간건 날라간거야!!!!!!!!!!!!!!!!!! o(￣▽￣)ブ🕊🕊🕊
6.useState가 바로 적용되지 않았던 문제에 대하여
CoffeeDetail.js 페이지!
useEffect(()=>{
dispatch(__loadCoffeeDetail(brand, boardId))
setLike(coffeeReducer?.loveCheck)
console.log(coffeeReducer?.loveCheck)
},[like])
console.log(like)CoffeeDetail.js의 컴포넌트 내부 좋아요 클릭시 실행되는 함수
const likeCoffee =async()=>{
await apis.likeCoffee(item?.brand,item?.id)
.then((res)=>{
console.log(res.data)
setLike(res.data)
})
}처음에 불러온 store 내부의 좋아요 true,false값을 useState의 set함수로 설정해서 보여주고 클릭할때마다 그 부분의 모양이 변하게 하는 방법을 선택했지만.... 클릭을 세번쯤 해야 그때서야 변해... 아니 스테이트 변할때 바뀌라고 뒤에 의존성 배열도 넣어놨는데 값은 변하는데 모양이 안변해 ㅠㅠ 그래서 곰곰히 생각해보니까 컴포에서 setLike실행을 하면 페이지에서 dispatch후에 또 setLike를 실행해서 그런...것 같더라 그래서
//Like자체 바뀔때마다 바뀌게 설정
useEffect(()=>{
dispatch(__loadCoffeeDetail(brand, boardId))
console.log(coffeeReducer?.loveCheck)
},[like])
console.log(like)
//불려올때마다 재설정되서 처음 불려올때만 like설정하게 바꿔둠
useEffect(()=>{
setLike(coffeeReducer?.loveCheck)
},[])이렇게 페이지에 있는 useEffect를 분리해서 실행했더니 어어어?? 작동해1!! 사실 이유는 정확히 모르겠지만 set함수 실행할때마다 다시 불려져 오는 것 때문에 그런 것 같다..암튼 해결팍팍!
