kasumil의 코딩 공작소

회사 소개 사이트가 완성된지는 꽤 오래되었는데, 해당 사이트 최적화 이슈가 터졌다. 모바일은 너무 느리다고... 원인을 찾아보니 첫번째. 영상의 크기가 너무 컸다. 두번째. 영상의 로딩시 임시로 띄울 화면이 없었다.(poster 속성 미기재) 세번째. 이미지들이 너무 컸기에 문제가 있었다. 네번째. js와 css 호출하는 데 있어 blocking때문에 그러했다. 1번의 경우 영상이 50mb 이상의 파일을 2개이상이나 호출하고 있었다. 2. poster 속성의 이미지를 미기재 할 경우 load단계에서 동영상 다운로드 문제로 대역폭이 좁아져 자연스럽게 blocking이 된다. ㄴ poster를 기재하면, 일단 load단계에서 poster이미지를 호출하고, 브라우저 load작업이 끝나면, 그때부터 동영상을 호..

사이트 내 동영상이 여러개 있는 상황. 그와중에 모달이 떠야하는데, 모달 내 이미지가 굉장히 늦게 로드되는 문제였다. 띡띡띡 끊김.... 원인은 모든 페이지가 로드된 후 modal이 켜짐 되니, 그때부터 이미지를 다운 받는데 video가 다운 받는 중에 이미지 다운로드도 진행되는 것. 원인은 video 태그 내 autoplay가 문제였다. 태그가 생성되고 바로 재생되다보니, 시스템 자원이 그곳으로 몰려버리게 되는 것. 그래서 autoplay 속성을 제거하고, js에서 해당 파일을 재생하게 만들어버렸다. 모달 출력을 먼저하게 하고, 동영상을 재생하는 부분을 구현하게 하였다. 그랬더니 모달이미지가 늦게 뜨지 않고, 모달이미지가 먼저 출력된 후 동영상 다운로드가 실시되었다. document.getElement..

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..