틈

Next.js-Typescript 기반에서 반응형 작업을 하고 있는데, 퍼블리셔로서 가장 어려운 것이window.innerWidth 값을 컴포넌트마다 설정해줘야 하는 것이다.처음에는 한땀한땀 해보고, 태그에 따로 [data-width] 도 넣어봤지만,mount 속도가 느린 화면에서는 무용지물... useEffect로 해당 값들이 받아와지지 않았다.도대체... mount가 끝나는 지점은 어떻게 잡아야 하지!!!!!의문이 생길 때쯤 신박한 방법을 찾았다. https://velog.io/@sasha1107/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B0%98%EC%9D%91%ED%98%95-%ED%99%94%EB%A9%B4-resize-%EC%9D%B4%EB%B2%A4%ED%8A%B8 리액트 ..

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..

자식 컴포넌트의 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 ( ); } ..

yarn create react-app 폴더명 이전에는 터미널에서 npx create-react-app을 사용했는데, 어느 순간 방식이 바꼈다. yarn create react-app {폴더명} --template typescript 타입스크립트 template 설정

react-dropzone : 파일을 drop-down으로 추가할 수 있음 yarn add react-dropzone yarn add @types/react-dropzone(타입스크립트 사용시 추가 설치) babel for react - es5이하 버전으로 빌드 yarn add -D @babel/cli @babel/preset-react uuid - 아이디를 유니크하게 만들어줌 yarn add uuid react-icons - 각종 font-icon을 모아놓은 라이브러리 yarn add react-icons lodash - 우선은 debounce(이벤트의 무한 실행을 setTimeout 방식으로 끊어줌) yarn add lodash _.debounce