[메인프로젝트] 리스트 필터링 기능 / 프로그래스 바 스타일링

계속 콘솔 찍고 API 요청에 맞춰 요청값 들어가는지 확인하고 응답 확인해 가며 만든 거라 따로 길게 적을 건 없지만 오늘 삽질한 게 너무 많아서 간단하게 적기만이라도 하려고 한다.

 

리스트 필터링

event.target과 event.currentTarget

분명히 카테고리 '버튼'을 클릭했는데 target으로 그 안에 있는 'div'가 들어와서 당황했다.

버블링이 일어나는 요소에서는 target과 currentTarget이 참조하는 게 다르다는 것을 처음 알았다.

내부 target을 집어내고 싶은 경우는 별로 없을 테니 웬만하면 그냥 currentTarget을 쓰는 게 좋을 것 같다.

https://velog.io/@sa833591/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BA%A1%EC%B2%98-%EB%93%B1

 

styled component에서 요소의 attribute로 집어넣는 것과 props로 내리는 것이 동시에 작동하는가?

형태가 동일해서 헷갈리는데 되는 것 같다... 어떻게 구분해서 전달하고 있는 건지, 아님 전부 attribute로도 넣고 props로도 주는 건지는 콘솔 찍고 실험해봐야 정확히 알겠다.

 

프로그래스 바

flex-basis와 flex-grow

https://studiomeal.com/archives/197

 

애니메이션 적용

키프레임을 만들어 놓고, 요소에서 animation 속성값으로 부여하기!

//키프레임 이름
@keyframes 키프레임이름 {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

//키프레임 사용

#logo {
	animation-name : 키프레임이름;
	animation-duration : 3s;
}