[섞어마셔] 프로젝트 6일차 - like 로컬 스토리지와 연결, netlify 연결

발표까지 D-1 마무리 단계입니다.

오늘은 like부분을 새로고침을 해도 사라지지 않게 로컬스토리지와 연결을 하고 네트리파이와 연결을 하였습니다.

그리고 세세한 디자인 변경사항을 함께 수정하고 팀원들의 머지를 도왔습니다.

 

1. like 로컬 스토리지와 연결

---

연결하는건 쉬웠지만 리팩토링하는데 조금 애를 썼습니다.

 

우선 이 코드는 각 Card컴포넌트에 하나씩 다 들어가있습니다.

 

아래의 코드를 보고 겁먹지마시고! 하나씩 천천히 설명을 해보겠습니다.

// idDrink는 api로 받아온 칵테일의 id
const { idDrink } = cockTailData;
    
// localStorage에서 'likes' 데이터 가져오기 및 초기 like 상태 설정
const likesData = JSON.parse(localStorage.getItem("likes") || "[]");
const isLiked = likesData.includes(idDrink);

const [like, setLike] = useState(isLiked);

useEffect(() => {
	// 배열 중복 제거를 위해 Set 사용
	const uniqueLikes = new Set(likesData);
	
    // like가 true라면 더하고 없다면 뺀다.
	if (like) {
		uniqueLikes.add(idDrink);
	} else {
		uniqueLikes.delete(idDrink);
	}
	const updatedLikes = [...uniqueLikes];
	localStorage.setItem("likes", JSON.stringify(updatedLikes));

}, [like, idDrink, likesData]);

 

1. idDrink

이건 그냥 여기서 사용하는 api에서 가져온 값입니다.

각 cocktail의 id값입니다.

 

2. LikesData

localStorage.getItem을 이용해서 값을 가져오는 겁니다.

값이 없다면 []빈 배열을 가져옵니다.

 

3. const isLiked = likesData.includes(idDrink);

LikesData에 api로 가져온 idDrink값이 있는지 true, false로 나타냅니다.

 

4. const uniqueLikes = new Set(likesData);

Set을 이용한 이유는 배열안에서 중복된 값이 있다면 삭제해주기 때문에 사용했습니다.

 

5. if문

like가 true라면 값을 넣고 false라면 값을 뺍니다.

 

6.const updatedLikes = [...uniqueLikes];
Set에서 벗어나 배열로 다시 만듭니다.

 

7. localStorage.setItem("likes", JSON.stringify(updatedLikes));
로컬스토리지에 넣습니다.

 

2. 네프리파이 연결

연결하는 건 어렵지 않았지만 search페이지에서 에러가 나서 vercel이랑 netlify둘다 연결해보았습니다.

하지만 둘다 에러가 나네요..

https://shakedrink.netlify.app/