틈

https://transfonter.org/ Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their transfonter.org 해당 사이트에서 폰트 경량화를 진행했다. 서브셋에서 제외할 글자 목록 ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ ㅏㅐㅑ..

react에서 kakao지도를 추가할 때 1. header에 script 코드를 동적으로 넣어준다.(useEffect사용) useEffect(() => { const script = document.createElement("script"); script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=bfd444b07ffd852d15ab9bfa726c6b6a"; document.head.appendChild(script); }, []); 2. 동적으로 추가할 경우 주의사항 ( 문서 확인하기 ) script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=bfd444b07ffd852d15ab9bfa726c6b6a&autoload=fals..

카카오맵 API를 react에서 작업할 때 typescript를 template으로 사용하고 있다면, index.html에 API를 추가해도 kakao 객체의 존재 여부를 typescript에서 인식하지 못한다. -- 아래는 해당 에러이다. 이 경우에 typescript에게 kakao 라는 객체가 window에 존재하고 있다고 인식시켜줘야 하는데, 그럴 때 사용하는 typescript 문법이 declare이다. import React, { useEffect } from "react"; import "./App.css"; declare global { interface Window { kakao: any; } } function App() { useEffect(() => { var container = d..

페이징 처리나, 수제 슬라이드를 작업할 때 next 버튼이 마지막 index에 도달했다. index를 0으로 돌려보자. 그래. 조건문이지! 음화화~ const index = index >= x.length ? 0 : index+1 하고 있을 때 내 뒤통수를 때리는 고수님의 방법 const index = index+1 % x.length 자! 그럼 prev다! index 0 이하가 될 때, 맨 뒷번호를 가져야해! 이건 다른 방법이 없지! 암! const index = index-1 < 0 ? x.length-1 : index-1 아~ 그건 말이죵! const index = (index-1 + x.length) % x.length; 참 쉽죠?

9 이하의 숫자 앞에 0이 추가가 되어야 하는 경우가 종종 있다. 이런 경우 이전에는 3항 연산자를 이용한 조건식으로 작업을 하곤 했다. x < 10 ? `0${x}` : `${x}` 이거보다 좋은 방법은 없을 거라고 굳게 믿었는데... const minutes = `0${parseInt(time / 60, 10)}`; const seconds = `0${parseInt(time % 60)}`; return `${minutes}:${seconds.slice(-2)}`; 앞에 0을 무조건 추가하고 변수에 저장한 뒤, slice를 이용해서 뒷자리부터 2개만 잘라준다... (숫자형일 경우에는 적용이 안되므로 꼭 string으로 변경해주세용~) 이제라도 알아서 다행인가.. 2년만에 알게 된 아름다운 tip..

자식 컴포넌트의 ref 값을 부모 컴포넌트에서 사용하기 위해 고안한 훅인듯 하다. [부모 컴포넌트] function App() { const audioRef = useRef(); const onPlay = () => { audioRef.current.play(); }; return ( ); } [자식 컴포넌트] import React, { useRef,useImperativeHandle, forwardRef } from 'react'; function ProgressArea(props, ref) { const audio = useRef(); useImperativeHandle(ref, () => ({ play: () => { audio.current.play(); }, })); return ( ); } ..