REACT

반응형으로 만들기 위해 화면 사이즈가 변경될 때마다 width값이 필요했고 resize 이벤트리스너를 이용했다. window.addEventListener('resize', ...) 1. 초기값(사이즈 변경 전)을 세팅해준다. const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight, }); 2. useEffect에서 마운트 시 resize 이벤트 리스너를 넣어주고 언마운트 시 이벤트 리스너를 제거해준다. 여기서 제거해주지 않으면 메모리 소모가 많아지고 리렌더 시 이벤트 리스너 중복으로 인한 버그가 생길 수 있다. useEffect(() => { window.addEventListener("resize",..

원티드 프리온보딩 프런트엔드에 지원하며 과제로 캐러셀을 만들어봤다. 결과는 불합격했다. 변명을 하자면 남은 시간이 이틀이었고 네비 바를 꼼꼼하게 만들다가 시간이 부족했다. 솔직히 내 실력이 충분했다면 충분히 완성할 수 있지 않았을까? 그래서 캐러셀을 다시 정리해보기로 했다. 조건 라이브러리 없이 만들기 버튼 클릭 시 넘어가기 무한 캐러셀로 마지막 이미지일 경우 다시 처음으로 돌아가기(첫 이미지일 경우 마지막 이미지로) 5초 뒤에 자동으로 이미지 넘기기 한 번에 이미지가 3개씩 보이도록 무한으로 이미지를 넘기기 위한 방식은 다음과 같다. 나는 총 9장의 이미지를 사용하고 양 옆의 이미지가 조금씩 보여야 하므로 앞쪽에 8,9번 이미지를 추가해주고 뒤쪽에 1,2번 이미지를 추가해준다. 여기 1번 이미지에서 왼..

1. firebase-tools 설치 npm install -g firebase-tools 2. 로그인 firebase login 3. firebase 초기 설정 firebase init - Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys 선택 - Use an existing project (현재 프로젝트를 사용) - build (public directory로) - Configure as a single-page app? ->y 4. build yarn build 또는 npm run build 5. deploy firebase deploy 끝! 배포 후 수정 시 yarn build fir..

const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); useCallback은 memoized callback을 리턴한다. memoized는 뭘까? 위키백과에 따르면 In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. 컴퓨팅에서 memoization 또는 memo..

장점 - children, propTypes, contextTypes, defaultProps, displayName이 기본적으로 있다. 단점 - children이 필요하지 않는 경우에도 들어가 있으므로 타입이 명확하지 않다! type FC = FunctionComponent; interface FunctionComponent { (props: PropsWithChildren, context?: any): ReactElement | null; propTypes?: WeakValidationMap | undefined; contextTypes?: ValidationMap | undefined; defaultProps?: Partial | undefined; displayName?: string | unde..