CSS
생각없이 썼던 나 자신을 반성하며...트러블 슈팅 기록을 올린다.
translateX()
Is a length or percentage representing the abscissa (horizontal, x-component) of the translating vector [tx, 0]. In Cartesian coordinate system it represents shift along x-axis. A percentage value refers to the width of the reference box defined by the transform-box property.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX
떡하니 너비에 비례한다고 써있는데, 원하는대로 작동하지 않아서 한참을 헤맴..ㅋㅋㅋ
MDN먼저 볼걸..ㅠㅠ 아무튼 translate는 수평이면 너비, 수직이면 높이에 비례한다!
애니메이션 작동원리
애니메이션은 할당되었을때 바로 작동한다. 그 이후는 작동하지않음(infinite등 제외...)
뭘 클릭할때마다 애니메이션을 발생시키고 싶으면, 클래스에 애니메이션을 할당하여 클릭할때마다 등록하던가...
아니면 상태를 하나두고 useEffect에 넣어서 관리하는 법도 있따...
이상 해결!
배포 오류(폴더 대소문자 구분)
깃이 대소문자 구문을 못해서 업로드된 깃 파일에는 소문자폴더가 들어가있는데, 대문자 폴더에서 모듈을 찾으려해서 오류 발생.
git config core.ignorecase false명령어로 대소문자
구분을 하게 해주고 혹시 모르니
git rm -r --cached .로 캐시까지 지워준뒤 푸쉬하면 해결
리액트 훅 규칙
- 리액트 함수 내부에서 선언해야함.(최상위 레벨)
- 조건문으로 호출하지 않아야함.(훅이 호출되는 순서가 동일해야함) => 항상 동일한 순서로 Hook이 호출되는 걸 보장해야함.
useState나useEffect가 실행되어도 훅의 상태가 올바르게 유지할 수 있도록 도와준다.
규칙이니까 따른다!
오늘강의...
오늘 강의를 과제하느라 정리하지 못했다. 내일까지 강의가 이어지던데 내일 한 번에 정리해보도록 하겠다! 이번에 너무 놀았던걸 반성하자...😥
