심화 프로젝트 WIL

2023.08.13

이번주 회고

심화프로젝트가 마무리 되었다. 주특기 플러스 주자에서 배운 타입스크립트를 사용해 보았다. 코드 작성 하면서 타입을 체크해 미리 오류를 잡을 수 있었다. 이 번 프로젝트에서는 전역상태 관리 라이브러리 zustand도 사용해 볼 수 있었다.

좋아요

좋아요 DB

좋아요를 누르면 해당유저의 이메일과 코스의 정보가 데이터베이스에 담긴다.

"likes": [
	{
		id: "Edvt5NKt0yC5vqKYh-WiI",
		crsId: "T_CRS_MNG0000005298",
		crsName: "서해랑길 25코스",
		likedUserEmail: "aaa@aaa.aaa"
	}
]

// 좋아요 추가
export const addLike = async (newLike: LikeType) => {
  await axios.post(`${LIKE_URL}`, newLike);
};

// 좋아요 삭제
export const deleteLike = async (likeId: string) => {
  await axios.delete(`${LIKE_URL}/${likeId}`);
};

좋아요한 코스 목록이 마이페이지에서 보여진다. 클릭 시 해당 코스페이지로 이동한다.
onClick={() => navigate(`/detail/${like.crsName}`)}

stopPropagation

클릭하면 코스페이지로 이동하는 div영역 안에 좋아요 버튼을 만들어 보았다. 하지만 좋아요를 클릭하면 부모div까지 클릭되는 이벤트 버블링 문제가 있었다.

Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다.
-mdn

자식요소인 Like클릭 함수에 stopPropagation() 메서드 사용해 문제를 해결했다.

const switchLike = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    e.stopPropagation();
}