| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- BFF 아키텍처
- HttpOnly Cookie
- jest
- 생활코딩
- 바닐라 JS로 그림판 만들기
- HTML
- cookie 보안
- 코코아톡 클론코딩
- BFF아키텍처
- tailwindcss
- HttyOnly Cookie
- clone coding
- 노마드 코더
- canvas
- 코딩일기
- JAVA Script
- typescript
- canvas image
- 노마드코더
- 프론트엔드
- 바닐라 JS로 크롬 앱 만들기
- canvas js
- CSS
- next.js
- 코딩독학
- react
- cookie 라이브러리
- javascript
- 프록시 아키텍처
- JS
- 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..