basic (173) 썸네일형 리스트형 IntersectionObserver let callback = (entries, observer) => { entries.forEach(entry => { // Each entry describes an intersection change for one observed // target element: // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time }); }; entries배열이 한개만 있다면 [entry] 이렇게 전개연산을 하던가 entries[0] 이런식으로 사용해도 될듯하다. https://developer.. React Hooks useEffect 제대로 알고 쓰기 1 2 3 4 5 useEffect( () => console.log("mount"), [] ); useEffect( () => console.log("data1 update"), [ data1 ] ); useEffect( () => console.log("any update") ); useEffect( () => () => console.log("data1 update or unmount"), [ data1 ] ); useEffect( () => () => console.log("unmount"), [] ); 1. virtual dom에 마운트되고서 2. 배열 안의 값이 변경 되었을때 업데이트 3. 다시 랜더링 될때 마다 4. 배열 안의 값이 변경되었거나 언마운트 될 때 cleanup함수 실행 5. 언.. Failed to load config "react-app" to extend from. eslint적용시 config모듈을 설치하지 않아서 발생하는것 같다. eslint-config-react-app 또는 eslint-config-airbnb를 입맛에 맞게 설치하면 된다. 설치 후에는 extends에 react-app을 추가해주면 된다. font 색상 그라데이션 넣기 background: -webkit-linear-gradient(90deg,pink,orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent; Shadow Dom 캡슐화 기능을 제공하는 DOM이다. 독립된 DOM으로 해당 컴포넌트에만 종속된다. 따라서 document.querySelector 등으로 DOM탐색이 불가하다. 마찬가지로 Shadow DOM에 선언된 CSS 또한 해당 컴포넌트 안에서만 유효하므로 단순한 css선택자 사용과 네이밍 충돌을 걱정하지 않아도 된다. 반면 이와 비슷한 리액트의 styled-component의 경우 해당 컴포넌트에만 적용한다는 점은 같지만 내부 작동원리가 해당컴포넌트마다 유일한 클래스를 부여하여 스타일을 적용하는 방식으로 결국 styled-component는 전역에 스타일이 적용된다는 점에서 차이가 있다. https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_.. NPM 모듈 개발환경으로 설치하기 --svae-dev 또는 -D 옵션 추가 크기 키우기, 이동하기 transform transform: scale(1.2) // 배수 1.2배 transform: translate(100px) // 단위 px https://developer.mozilla.org/ko/docs/Web/CSS/transform font태그 font: bold 14px/20px italic Times, serif; 순서 지켜야됨 / 앞의 14px은 font-size를 의미하고 / 뒤의 20px은 line-height 값을 의미한다. 이전 1 2 3 4 5 6 7 ··· 22 다음