개발 프로젝트: 핀더펜
-
[핀더펜] 성능 최적화 마지막개발 프로젝트: 핀더펜 2024. 5. 14. 00:08
1. Avoids enomous network payloads페이지에서 요청한 모든 리소스의 총 크기를 보여주며, 1600KiB 밑으로 만드는 것을 목표로 해야한다.@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url(./assets/font/woff2-subset/Pretendard-Bold.subset.woff2) format('woff2');}@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold')..
-
[핀더펜] 성능 최적화개발 프로젝트: 핀더펜 2024. 5. 4. 00:18
성능 최적화 후 결과 입니다.pwa적용과 Performance, Accessibility 점수를 올린 점에 만족합니다. 그러나!!!!!! 지난 성능 최적화 이후 lighthouse를 실행하거나 새로침을 했을 때 화면이 blank white page로 나오는 문제가 발생했다... 그렇게 문제의 원인을 찾는 여정이 시작됐다. 예상 원인 1 - 코드 분할지난 성능 최적화 작업에서 주된 작업이 코드분할이었기 때문에 가장 먼저 원인으로 떠올랐다.그래서 코드 분할을 위한 lazy 코드를 모두 주석처리하고 기존의 방식대로 하나의 번들에 모든 컴포넌트 코드가 들어가도록 한 후 실행해봤다.그 결과 진전 없음으로 원인이 아닌 것으로 판명됐다. 예상 원인 2 - 라이브러리 rollup코드 분할과 함께 번들의 크기를 줄이기 ..
-
[핀더펜] 성능 최적화 - 접근성 검사개발 프로젝트: 핀더펜 2024. 4. 30. 02:07
헤더헤 배치했던 토글 버튼은 aria-label 속성을 가져야 함바탕색과 글자 색의 조도/명도 차이가 작으면 유저 경험이 떨어짐헤더 버튼의 id가 겹치는 문제가 있었음글자 크기 순서는 내림 차순으로 순서대로 나와야 함. 하지만 규칙을 지키지 않고 순서를 건너뛰어서 경고함.role의 철자가 틀리거나 추상적이거나, role이 누락되면 사용자에게 의미가 전달되지 않는다.1, 3은 스스로 잘못한 것이기 때문에 바로 수정을 진행했습니다. 그러나 2, 4번은 기획 단계에서 기획자와 디자이너의 의견을 종합해 정한 내용이기 때문에 수정하지 않았습니다.또한, 5번의 경우 mui의 calendar 라이브러리에서 생긴 문제이기 때문에 수정할 수 없었습니다. 그 결과드디어 초록색을 보았다.....
-
[핀더펜] 성능 최적화 - 성능검사(FCP)개발 프로젝트: 핀더펜 2024. 4. 30. 01:55
Eliminate render-blocking resources페이지의 첫 번째 페인트를 차단하는 모든 URL차단 리소스문서의 태그 안에 있음defer 속성 없음async 속성 없음disabled 속성 없음유저 기기에 맞는 media 속성이 없음해결 방법index.html의 폰드 stylesheet 제거index.css의 폰트 import로 대신결과성능 검사 점수 29 >> 31 소폭 상승Enable text compression이걸 해결하기 위해 서치를 해봄파일을 압축하는 방법은 2가지가 있음서버에서 압축빌드하는 과정에서 압축그래서 현재 서버를 통해 배포가 아니라 정적 페이지를 배포하기 때문에 vite를 이요해 압축하는 방법을 찾아봄방법이 나와 있었지만 평소 빌드했을 때 자동으로 압축을 해주지 않나 생..
-
[핀더펜] 성능 최적화 - 성능 검사1개발 프로젝트: 핀더펜 2024. 4. 27. 00:47
라우터 단위 코드분할 후 시간이 많이 줄었지만 아직 부족함 방법을 찾다가 프로젝트를 build해봤는데 모듈이 2405개나 됨. 그래고 메인 모듈의 크기가 1Gb정도 되는 것을 보고 충격...그래서 모듈을 줄이기로 함모듈 줄이기 결과 에서 모듈 수, 빌드 시간, 모듈 크기도 조금씩 줄긴 했지만 아직도 부족하다...Vite에서는 모듈 크기가 500KB 넘지 않는 걸 제안한다. 코드 분할과 빌드 옵션 정의가 필요해보인다. lighthouse 결과오!! 점수가 조금 올랐다. TBT가 크게 줄어들었다!!! 생각보다 유의미한 결과가 나온 것 같다.근데 LCP는 왜 올랐지
-
[핀더펜] 최적화 진행 - lighthouse란?개발 프로젝트: 핀더펜 2024. 4. 26. 17:11
이제는 미룰 수 없다..!! 대부분의 컴포넌트 제작을 완료했고 남은 부분은 아직 erd가 다 나오지 않았기 때문에 최적화를 진행해보겠습니다. 라이트하우스(lighthouse)웹페이지 품질 개선을 위해 오픈소스로 제공되는 자동 감사 도구 검사 항목 Performance (성능)First Containful Paint첫 DOM 렌더링까지 걸리는 시간iframe 내부 콘텐츠, 흰식의 외에는 모두 DOM 콘텐츠로 간주0 ~1.8초(빠름), 1.8 ~ 3초(보통), 3초 초과(느림)Speed Index페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도0 ~13.4초(빠름), 13.4 ~ 5.8초(보통), 5.8초 초과(느림)Total Blocking Time사용자 입력에 응답하지 못하도록 차단된 총 시간 측정FPC..
-
[VSCODE] react native, node.js 실행 / 실행 오류 해결개발 프로젝트: 핀더펜 2022. 2. 10. 01:30
지난 포스팅에서 clone한 프로젝트를 실행해보겠습니다. react native 실행 터미널 창을 열고 client 폴더에 접근해서 npm start로 react native를 실행합니다. 그런데.... 위와 같은 오류가 생겼습니다...ㅜ 그래서 구글에 찾아보니 npm 폴더의 위치를 찾아서 환경변수에 등록하라고 해서 그대로 해봤습니다. cmd에서 npm -g root 로 npm 폴더의 위치를 찾습니다. 그리고 환경변수 설정에서 path에 C:\Users\[사용자명]\AppData\npm을 추가해줍니다. 그런데도 동일한 오류가 발생했습니다.... 그래서 프로젝트 폴더를 확인해봤더니 expo-shared는 있는데 expo는 없더라구요... 그래서 expo를 추가해줬습니다. 그런데도 다음과 같은 오류 발생....