전체 글
-
Nodejs 다운로드 및 설치IT 2024. 7. 2. 20:09
1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크가 있지만 안정성을 위해 v20을 설치하겠다. PowerShell이 자동으로 설치되며 tool 설치됨. 시간이 좀 걸릴 수 있음. 2. 설치 확인명령 프롬프트를 열고 다음 명령어 입력# node 버전 확인node -v# npm 버전 확인npm -v
-
[핀더펜] Vitest 적용하기개발 프로젝트: 핀더펜 2024. 6. 4. 01:10
React Testing Library란?개발자가 단위 테스트, 통합 테스트 및 구성 요소 테스트를 작성할 수 있도록 하는 테스트 프레임워크 BDD(행동 중심 개발) 및 TDD( 테스트 중심 개발 ) 를 포함한 다양한 테스트 스타일을 지원하므로 개발자가 최상의 접근 방식을 선택 가능핵심 기능확장성모듈식 아키텍처를 통해 개발자는 맞춤형 플러그인 및 확장 기능을 사용하여 기능을 확장 가능 테스트 도구 요구 사항에 맞게 Vitest를 맞춤화하여 매우 유연하고 사용자 정의 가능한 단위 테스트 프레임워크로 만들 수 있음언어 지원 광범위한 프로그래밍 언어를 지원단일 테스트 프레임워크 내에서 다양한 언어로 작성된 코드를 테스트 가능 Jest에서 더 쉽게 마이그레이션할 수 있도록 Jest 호환 API로 설계 IDE ..
-
[핀더펜] 이미지 스프라이트 적용개발 프로젝트: 핀더펜 2024. 6. 3. 15:39
이미지 스프라이트란?나의 이미지 파일에 페이지에서 사용할 여러가지 이미지들을 넣어 좌표와 범위를 통해 특정 이미지를 불러오는 기법한번의 이미지 로딩을 통해 여러가지 이미지를 불러올 수 있음 적용 방법1. spritebot 설치2. 이미지 선택, sprite sheet 생성 스프라이트 시트를 저장한 결과 svg 파일이 태그로 감싸져 있는 것을 확인할 수 있었다. ... Spritebot에서 제공한 사용 방법은와 같은 방법이었지만 나의 경우 xlink에서 오류가 나는 문제가 발생했다. 그래서 xlink를 제거하고 아래의 방법으로 사용했다. 아이콘..
-
[핀더펜] 성능 최적화 마지막개발 프로젝트: 핀더펜 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는 왜 올랐지