1. useMemo() 이 함수는 React Hook 중 하나로서 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용된다. function App() { const [count, setCount] = useState(0) const expFunc = (count)=> { waitSync(3000); return count * 90; } const resCount = expFunc(count) return ( Count: {resCount} setCount(e.target.value)} placeholder="Set Count" /> ) } 위 코드에 expFunc은 3분후 실행되는 비싼 함수이다. 이 함수는 count를 입력받아 3분을 기다린 후 90을 곱하여 리턴한다. 또한 useState ..

NFT란? 위키백과 대체 불가능한 토큰 ( NFT )은 블록체인에 저장된 데이터 단위로 고유하면서 상호 교환 할 수 없는 토큰을 뜻한다 NFT는 사진, 비디오, 오디오 및 기타 유형의 디지털 파일을 나타내는데 사용할 수 있다. 사본은 인정되지 않는다. 이러한 디지털 항목의 사본은 누구나 얻을 수 있지만 NFT는 블록 체인에서 추적 되어 소유자에게 저작권 과 소유권 증명을 해야한다. NFT 구현 NFT를 구현하기 위해 어떤 인터페이스를 제공하는지 알아보겠습니다. event Transfer(address indexed _from, address indexed _to, uint256 indexed _tokenId); event Approval(address indexed _owner, address index..

기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews ..

webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 한다. 즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다. 물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다. React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여준다. http://ko.reactjs.org/docs/code-splitting.html 코드 분할 ..

connect 함수 대신 hooks 사용 상태 조회는 useSelector, 액션 생성은 useDispatch useSelector() // 반환값 = useSelector(함수, === 비교 함수) const result: any = useSelector(selector: Function, equalityFn?: Function) // 적용 const counter = useSelector(state => state.counter) // state.counter를 반환 const todo = useSelector(state => state.todos[props.id]) // state.todos중 특정 id를 같는요소 반환 useDispatch() const dispatch = useDispatch()..

프로젝트 개발시 화면 이동시에 데이터를 영구저장이 필요할 때가 있습니다. 이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다. localstorage란? ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작. ・모바일에서도 사용 가능 쿠키와 차이점 ・유효 기간이 없고 영구적으로 이용 가능 ・5MB까지 사용 가능 (쿠키는 4KB까지) ・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신) localstorage 기본 구성 ・키(key)와 값(value)을 하나의 세트로 저장. ・도메인과 브라우저별로 저장. ・..