본문 바로가기

구글 Lighthouse를 이용한 성능개선기 개인 프로젝트 중 성능점수가 낮게 나온 앱이 있어 공부 겸 개선해 보기로 하였습니다. 만든 사이트는 the movieDB API를 이용해 영화정보, 이미지들을 받아 만든 영화 소개 리액트 모바일 웹입니다. 먼저 성능점수 측정 방법은 개발자 도구 켜고 - Lighthouse탭 - 검사 조건에 맞게 선택하고 - Analyze page load 버튼 클릭 약간 기다리면 아래와 같이 성능점수와 metrics항목에 각각의 성능지표가 나오는데 제 사이트는 빌드전 개발환경에서 39점, 빌드배포후 깃페이지에서 측정시 47점이었습니다.......... 성능개선의 잠재력이 아주 큰 아이지요 허허 metrics 세부항목을 클릭하면 친절한 안내페이지도 있고, opportunities섹션에 이렇게 수정해라 도움말이 나오는데 하..
[React] github pages 배포시 router오류 라우터를 이용한 리액트 서브페이지 작업을 마치고 로컬에서 정상 작동을 확인했으나 gitpage에 올렸더니 작동되지 않았던 문제의 해결과정을 적어보려 합니다. 이래저래 바꿔보다보니 제가 만났던 문제는 아래 세가지 정도 였네요. 1. README.md 파일 노출 2. 저장소 기본경로로 인한 라우팅 경로 오류 3. BrowserRouter 오류 1. README.md 파일 노출 아예 내 프로젝트가 뜨지않고 깃헙에 올린 MD파일만 나오는 경우. 이건 뭐 라우터랑 상관없는 어이없는 실수인데 검색하다 많이 나오길래 써봅니다. 왜 안돼지 하고 브랜치랑 폴더 막 바꿔가며 빌드 하던 와중 생긴 오류로 빌드경로를 잘못 선택해서 발생한 문제 입니다. (로컬에서 빌드했다면 저장소에 올리기만 해도 반영된다) 제 경우는 mast..
[react] Warning: must be set to an object or null 오류 state에 객체가 아닌 배열을 넣어서 나타나는 에러 state에는 'state = [a, b, c]' 이런 배열이 아니라 'state = {data: [a,b,c]}' 이런식으로 객체가 들어가야 한다