TroubleShooting (18) 썸네일형 리스트형 [Next.js] 프로젝트의 CLS(Cumulative Layout Shift) 개선하기 간단한 자기소개 페이지를 작성하고 배포 후 lighthouse에서 성능 체크를 해봤습니다. CLS(Cumulative Layout Shift) 지표가 나쁜 걸 확인할 수 있었습니다. CLS 는 페이지 로딩 중 발생하는 예기치 않은 레이아웃 이동을 측정하는 지표로써, 갑자기 변경되는 레이아웃을 말합니다.Google에서는 좋은 사용자 경험을 위해 CLS 점수를 0.1 이하로 유지할 것을 권장합니다. 예상치 못한 레이아웃 전환은 텍스트가 갑자기 이동하여 읽는 도중에 위치를 놓치는 것부터 잘못된 링크나 버튼을 클릭하게 하는 것까지 다양한 방식으로 사용자 경험을 방해할 수 있습니다. 결재 버튼 위치가 갑자기 나타나서 원치 않는 구입을 하는 예시가 아래 링크에 있습니다. https://web.dev/artic.. [vitest] beforeEach와 beforeAll의 차이점 - 실수하기 쉬운 환경변수 테스트 예제 1. beforeAll 실행 시점: 해당 describe 블록 내의 모든 테스트가 실행되기 전에 딱 한 번만 실행용도모든 테스트에서 공통으로 사용할 리소스를 한 번만 설정할 때 데이터베이스 연결과 같이 비용이 많이 드는 설정변경되지 않는 상수나 설정값 초기화describe('Database Tests', () => { let connection; beforeAll(async () => { // DB 연결은 한 번만 수행 connection = await Database.connect(); }); it('test 1', () => { /* ... */ }); it('test 2', () => { /* ... */ });}); 2. beforeAll 실행 시점: 각각의 테스트 케이스가 실.. [tailwind 4] Tailwind CSS에서 배경 이미지와 그라디언트 효과 동시 적용하기 색상만 그라디언트 효과를 주는 방법은 공식문서에 있는 것처럼 시도하면 됬었지만..https://tailwindcss.com/docs/background-image background-image - BackgroundsUtilities for controlling an element's background image.tailwindcss.com 이미지를 바닥에 깔고 그 위에 그라디언트를 주는 게 생각보다 시간이 걸렸다 1. CSS background 속성의 기본 동작을 활용하여2. 그라디언트를 먼저 선언하고, 그 다음에 이미지 URL을 작성합니다 3. 쉼표(,)로 구분하여 여러 배경을 나열합니다 4. 먼저 선언된 그라디언트가 위에 표시됩니다 CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm) 모바일 화면에서 max-w-screen-sm ( max-width: 640px ) 등의 고정 너비를 줄 경우, div가 부모 요소의 전체 너비(width: 100%)를 차지하게 되고,이로 인해 마치 가운데 정렬된 것처럼 보이는 시각적 효과가 생깁니다. 그로 인해서 해당 사이즈를 초과하는 테블릿이나 PC 화면에서는 컨텐츠가 가운데 정렬이 안된 것 처럼 보이는 현상이 생기게 됩니다.이때는 명시적인 중앙 정렬이 필요하게 됩니다. 해당 사이즈 이상의 화면에서는 별도로 미디어 쿼리를 주고 좌우 마진을 auto를 주면 좌우 정렬이 됩니다. @media (min-width: 768px) { margin: 0 auto ;}혹은 테일윈드에서는 md:mx-auto 추가 // ... existi.. [CSS] Grid의 Subgrid 속성 이해하기 - 별점 레이아웃 예제 그리드 안의 그리드에서 다음과 같은 상황이 생겼다 이렇게 별표 평점 날짜를 위치 시키고 싶은데... 별표 아래 평점이 있고 날짜가 2번째 열에 있어버리는 상황.... 이럴 때 subgrid 속성을 사용하면 됩니다.부모 그리드의 열(column) 정의를 자식 요소에 상속하는 속성입니다. tailwind 일반 css 속성grid-cols-subgrid // grid-template-columns: subgrid; 주요 특징:1.부모 그리드의 열 트랙을 그대로 사용할 수 있습니다2. 부모와 동일한 그리드 라인을 공유합니다3. 중첩된 그리드 레이아웃을 더 쉽게 만들 수 있습니다 .. [Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 ) 왜 이러는 지 한참을 삽질하다 이렇게 직접 tsx안에 적어주니 통과를 합니다...???? 이 때 깨달았습니다.@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고.... 아예 랜더링에서 막히고 있습니다... 랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다. 1. vite-plugin-svgr 설치npm install vite-plugin-svgr --save-dev 2. vitest.config.ts 에 vite-plugin-svg 추가// vitest.config.tsimport { defineConfig } from 'vitest/config'import react from .. [Next.js] svg 파일 복붙 사용할 때 주의점 Invalid DOM property `stroke-width`. Did you mean `strokeWidth`?Invalid DOM property `stroke-linecap`. Did you mean `strokeLinecap`?Invalid DOM property `stroke-linejoin`. Did you mean `strokeLinejoin`? jsx, tsx 에서는 캐멀케이스만 된다는 사실을 금새 잊어버렸다....ㅠ부끄럽습니다😌 뷰쟁이의 슬픔.... 잊어버리지 마라고 스스로 공개처형을 하겠습니다.. "vite-tsconfig-paths" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps] 이 오류는 vite-tsconfig-paths 패키지가 ESM(ECMAScript Module) 형식으로 작성되어 있으며, CommonJS 형식의 require로 로드할 수 없다는 것을 나타냅니다. 해결방법 1. ESM(ECMAScript Module) 로 구성되어 있는지 확인import 문을 쓰고 있으므로 ✔ 2. Node.js 버전이 ESM을 지원하는지 Node.js 12 이상이므로 ✔ 3. package.json 파일에 "type": "module" 로 ESM 설정이 되어있는지여기서 빠져 있었다😡 앞으로 테스트 도구를 사용할 때는 기본 package.json 설정에 꼭 "type": "module", 을 추가해야겠다...😂vitest ui 보기 성공 ㅠ 이전 1 2 3 다음
