도영스 공간

위처럼 스크롤을 하단으로 내리면, 헤더의 색이 흰색으로 변하고 다시 상단에 닿았을 땐 투명으로 변하는 것을 훅으로 구현해보았다! Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적이다. 스크롤 이벤트에 쓰이는 documentElement.scrollTop과 documentElement.offsetHeight는 reflow를 일으켜서 성능상 좋지 않다. 스크롤 이벤트는 탈락! 내가 사용한 것은 바로 Intersection Observer API이다. Intersection Observer API 는 루트 요소와 타겟 요소의 교차점을 관찰한다. 그리고 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있다. scroll 이벤트와 다르게 교차 시 비동기적으로 실행..

next js 를 13버전으로 업그이드 한 이후 이런 에러가 콘솔창에 떴다 ! 해결방법 module.exports = { experimental: { forceSwcTransforms: true, }, compiler: { styledComponents: true, }, }; //next.config.ts 파일에 아래의 값을 넣어주면 에러가 나지 않는다 !! compiler: { styledComponents: true, },

오랜만에 TIL .. 🧗‍♀️ 다시 초심으로 돌아가서 열심히 기록해야지 ! ☃️ 더보기와 접기 기능은 의외로 간단했다! import styled from 'styled-components'; //styled 컴포넌트 임포트 // 1. text wrap을 하나 생성해줍니다. const textRef = useRef(null); //실제 text의 높이를 계산하기 위한 ref const [isMoreView, setIsMoreView] = useState(false); // 더보기 버튼의 여부 const [isShowText, setIsShowText] = useState(false); // 내용이 더 보여지고, 접기 버튼의 여부 //만약 높이가 100px이상이라면, 더보기 버튼 보여주기 useEffect(..

오랜만에 적어보는 TIL ...🧘🏻‍♀️ 구글 api key 설정하는 글들은 많으니 생략하겠습니다. 맨처음에는 리액트 환경에서 구글 map 자바스크립트 api 튜토리얼을 보고, 어떻게 해서든 구현하고 싶었다. 하지만, 내가 구현해야되는 기능은 n초마다 나의 위치 정보를 서버에 갱신해주고 내 주위 3km 반경에 있는 사람들의 좌표를 구글 맵에서 마커로 찍어주는 것이었다. 라이브러리를 깔지 않고 ,, 시도한 결과 n초마다 내 위치를 갱신할때마다 나의 위치를 찍어주는 마커가 계속 생성되는 것이었다..ㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ일요일 하루종일 고민하며 코드를 써내려갔지만, ㅠㅠ 나의 위치 정보를 제대로 반영하면, 지도가 깜빡거리는 문제가 발생했다 ㅎ.. 결국 자바스크립트 튜토리얼로는 해결할 수 없겠다..