| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
- 바닐라 JS로 그림판 만들기
- CSS
- typescript
- HTML 파일구조
- 생활코딩
- clone coding
- negative margin
- 프론트엔드
- canvas image
- 바닐라 JS로 크롬 앱 만들기
- HTML
- next.js
- 코코아톡 클론코딩
- JAVA Script
- tailwindcss
- canvas js
- JS
- queryprovider
- jest
- 노마드 코더
- 웹 브라우저 렌더링
- 웹 브라우저 구조
- react
- canvas
- javascript
- 노마드코더
- axios-mock-adapte
- tanstack-query
- 코딩일기
- 코딩독학
- Today
- Total
목록typescript (2)
Coding Archive
[Next.js & Tailwind CSS] Tailwind CSS - 동적 값 적용 문제 해결기
Tailwind CSS에서 동적 크기 클래스 문제와 해결 방법 프로젝트를 진행하던 중 Tailwind CSS를 사용할 때 동적 클래스 적용이 제대로 되지 않는 문제가 발생했습니다. UserImage 컴포넌트에서 image 크기를 h-[${size}]와 같은 형태로 자바스크립트 템플릿 리터럴을 사용하여, Tailwind가 이를 인식하지 못했기 때문입니다. 이번 글에서는 이런 문제의 이유와 해결 방법을 자세히 살펴보겠습니다. 문제 상황 : UserImage 컴포넌트가 렌더링되지 않는 이유Tailwind CSS는 정적으로 컴파일된 CSS 프레임워크입니다. 즉, 빌드 과정에서 사용된 모든 CSS 클래스를 스캔하고, 최적화된 CSS 파일을 생성합니다. h-[${size}], w-[${size}]와 같이 자바스크립..
[next.js & jest] Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법
Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법 이번에는 Next.js와 TypeScript 프로젝트에서 Jest를 설치하고 구성하는 방법을 단계별로 설명합니다. Jest는 자바스크립트 테스트 프레임워크로, 테스트 코드 작성과 테스트 실행을 빠르고 쉽게 할 수 있도록 도와줍니다. 1. Jest 설치Step 1: Jest 패키지 설치먼저, Jest와 TypeScript 환경에서 Jest를 사용할 수 있도록 필요한 패키지를 설치해야 합니다.yarn add jest ts-jest jest-environment-jsdom @types/jest @testing-library/react @testing-library/jest-dom @testing-library/do..