Tailwind CSS 4.0 주요 변경점 정리 : CSS 우선 설정 (굿바이 config.ts)

Tailwind CSS 4.0 정식 출시2025년 1월 Tailwind CSS 4.0이 정식 출시되었습니다. 이번 업데이트에서는 성능과 편의성 개선 뿐만아니라, 설정 방식이 크게 변경되었습니다. 따라서, 이번 포스팅에서는 4.0 버전의 변경사항을 간략히 정리하고, 설정 방식이 어떻게 변경되었는지 그것이 시사하는바는 무엇인지 정리해보려고 합니다.주요 변경점CSS 우선 구성 (CSS First Configuration): tailwind.config.js에서 벗어나 CSS 파일 내에서 직접 설정을 관리합니다.간소화된 설치Rust 기반 Lightning CSS 엔진 도입을 통한 빌드 성능 개선새로운 유틸리티 클래스 추가CSS 우선 구성(CSS First Configuration)Tailwind CSS 4.0에..

• format_list_bulleted 위키
• · 2025. 5. 29.

Supabase 타입스크립트 완벽 가이드 : 타입 생성부터 활용까지

배경Firebase 대체제로 주목받고 있는 Supabase는 PostgSQL에 기반한 오픈소스 프로젝트입니다. 개발자는 Supabase를 사용하여 보다 빠르게 인증, DB 등을 구현할 수 있습니다. Supabase는 데이터베이스 스키마에서 타입스크립트 타입을 추출할 수 있는 강력한 기능을 제공하며, 이는 개발자가 타입을 일일히 작성해야하는 수고로움을 줄여 매우 유용합니다. 이 글에서는 Supabase로 프로젝트를 진행하며 학습한 Supabase의 타입 생성 방법과 실제 활용법을 정리하고 공유합니다.타입 생성하는 2가지 방법대쉬보드에서 다운로드받기Supabase 프로젝트 대시보드에 접속한 후, 좌측 메뉴에서 API Docs > TABLES AND VIEW > Introduction 선택Generate an..

• format_list_bulleted 위키
• · 2025. 5. 14.

react-grid-layout 사용법(with. TypeScript)

react-grid-layout이란?react-grid-layout은 React 애플리케이션에서 드래그 앤 드롭 및 크기 조절이 가능한 그리드 레이아웃을 손쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 사용자가 직접 아이템의 위치나 크기를 변경할 수 있는 동적인 대시보드나 인터페이스를 만들 때 매우 유용합니다.공식 문서와 예제가 잘 마련되어 있음에도 불구하고, 클래스형 컴포넌트 기반의 예시가 주를 이루고 타입스크립트 환경에서의 활용 예시가 부족하여 최신 React 프로젝트에 적용하는 데 어려움을 느끼는 경우가 있습니다. 이에 본 글에서는 react-grid-layout을 타입스크립트와 함께 사용하며 얻은 실용적인 노하우를 공유하고자 합니다.공식문서에는 구체적인 props 설명, 메모이제이션, 예제 ..

• format_list_bulleted 위키
• · 2025. 5. 8.

사용자 에이전트 스타일시트와 크로스 브라우징 이슈

배경: 크로스 브라우징 이슈웹 개발을하다 보면 Chrome, Firefox, Safari, Edge 등 브라우저마다 화면이 다르게 보이는 경험을 하게됩니다.이를 크로스 브라우징 이슈라고 하며, 이는 웹 개발자가 일관된 사용자 경험을 제공하는 데 큰 장애물이 됩니다.원인 : 사용자 에이전트 스타일시트 (User Agent Stylesheet)이 문제의 원인은 각 웹 브라우저가 가진 고유한 기본 스타일, 즉 사용자 에이전트 스타일시트 때문입니다. 예를 들어, 태그는 브라우저마다 다른 기본 상하 여백(margin)을 가질 수 있고, 태그의 글자 크기나 굵기, 버튼()의 기본 모양 등도 제 각각입니다.브라우저의 개발자 도구(F12 또는 마우스 우클릭 > 검사)를 열어 특정 요소에 적용된 스타일의 출처를 확인..

• format_list_bulleted 위키
• · 2025. 5. 1.

Next.js에서 HTTPS로 로컬 개발 서버 열기

배경CORS 관련 이슈나, 성능, 보안 등의 이유로 로컬 개발 서버에서도 HTTPS가 필요할 수 있습니다. 다음과 같이 Next.js에서 HTTPS로 로컬 개발 서버를 열 수 있습니다. 준비물Next.js 최신버전 npm i next@latest 명령어를 통해 Next.js 최신 버전을 준비해주세요. 아직 프로젝트를 시작하지 않았았다면 npx create-next-app@latest 명령어를 통해 시작할 수 있습니다.실행하기npx next dev --experimental-https동작 원리프로젝트에 certificates 폴더가 생기고 자체 서명된 SSL 인증서가 추가됩니다. 해당 인증서는 mkcert 프로그램을 이용하여 발급됩니다. 이는 보안상 타인과 공유 되면 안되므로 .gitignore 파일에 ..

• format_list_bulleted 위키
• · 2025. 3. 7.

Vite에서 Tailwind CSS 설정하기

1. Tailwind CSS 설치하기Tailwind CSS 패키지와 Vite 플러그인 패키지를 설치합니다.npm install tailwindcss @tailwindcss/vite2. Vite 설정에 테일윈드 플러그인 추가하기//vite.config.tsimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})3. 테일윈드 CSS 불러오기전역 스타일 시트에 테일윈드 스타일 스타일을 불러오고, 이를 애플리케이션에 적용합니다. 스타일시트의 파일명은 달라도 상관없습니다. (global.css 등)//index.cs..

• format_list_bulleted 위키
• · 2025. 3. 3.