반응형 TIL129 타입스크립트에서 new kakao 객체 사용하기 우선 index.html에 카카오지도 script를 잘 박아넣었다는 것을 전제로 한다. 실행코드모다 먼저 선언되도록 하라 해서 에 넣어주었다. 그리고 가이드대로 new kakao를 사용하면 빨간줄이 뜬다. 이 글에서 알려준 방법인데 window inteface를 확장하는 방법이다. src 안에 @types폴더를 만들고 global.d.ts에 다음과 같이 Window interface를 확장해주었다. 그리고 kakao map을 사용하는 컴포넌트에서 다음과 같이 적어주니 잘 실행된다. 2022. 11. 19. kakaomap : Cannot read properties of null(reading 'currentStyle') 카카오지도 에러 : Cannot read properties of null(reading 'currentStyle') 카카오지도 공식문서에는 다음과 같이 가이드를 주고 있다. 이를 리액트로 변환시켜 다음과 같이 작성하였다. document로 id를 찾아 참조하지 않고 ref를 사용하였다. import { useRef } from 'react'; import styles from './mappage.module.scss'; const MapPage = () => { const mapRef = useRef(null); const container = mapRef.current; const options = { center: new window.kakao.maps.LatLng(37.17058840207, 12.. 2022. 11. 19. TIL 객체로 이루어진 배열중에 특정 key값만 의존성 부여하기 대충 다음과 같은 화면을 만들었다.(상품들은 더미데이터) 남은돈 계산 로직을 처음에는 아래와 같은 useEffect를 간단히 생각했는데, const Home: NextPage = () => { const [purchases, setPurchases] = useState([ { product: "과자", price: "2000", }, { product: "사탕", price: "300", }, ]); useEffect(() => { // 잔액계산 로직 // purchase의 가격들을 다 더하고 totalPrice에 넣는다 // 그 후에 salary에서 뺀다. }, [purchases]); return ( ... ... ); }; 이렇게 되면 상품명만 바뀌었을때 금액은 변함이 없어서 잔액계산을 할 필요가 .. 2022. 7. 30. LightHouse 점수보고 충격, 어떻게 해야하지 LightHouse LightHouse라는 걸 알게 되었다. LightHouse는 사이트 성능 측정 도구정도로 생각하면 된다. 크롬 개발자도구의 lighthouse탭에 있다. 각종 지표들 회사 랜딩페이지를 검사해보았는데 그리 나쁘진 않은 것 같다. 유저가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정한 것인데 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다. 우리 회사의 FCP는 0.7초이다. 다행히 선방치는것 같다. 그런데 FCP빼고는 다 쓰레기다. 예를들어 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한 값인데, 그러니깐 TTI가 4.7s라는 것은 '사용자가 우리 홈페이지와 상호작용하려면 로드되.. 2022. 5. 13. 이전 1 2 3 4 5 ··· 33 다음 반응형
