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 and download ty..

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

React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

AI 어시스턴스 앱을 개발하면서 채팅 UI를 구현하면서, 사용자와 어시스턴트 간의 대화 메시지를 보여주는 Message 컴포넌트를 만들었다. 메시지 목록은 부모 컴포넌트인 Chat 컴포넌트가 배열 상태(messages)로 관리하며, 이 배열을 순회하며 각 Message 컴포넌트를 렌더링한다.//Chat.jsximport { useState } from "React";import { Mesasge } from "./Message.jsx"export fucntion Chat(){ const [messages, setMessages] = useState([]); ... return ( ... {messages.map((message) => ( ..

• format_list_bulleted 회고
• · 2025. 5. 4.

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

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

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

노션 템플릿으로 1억 버는 비법 8가지

평소처럼 유튜브를 보던 중, 흥미로운 영상을 발견했다. 효과적으로 자료를 정리할 수 있는 PARA 노트 정리법과 관련한 내용이였다. 이 노트 정리법의 원리를 적용한 노션 템플릿도 무료로 제공해주었다.나는 기존에 내가 만든 템플릿으로 태스크를 관리하고 있었는데, 내 것보다 좋다고 느꼈고, 곧바로 적용해 사용해보았다. 정말 강력한 툴을 손에 넣은 느낌이었다. 홀린듯이 이어서 다른 영상도 찾아보게되었고, 태스크 관리 기능이 강화된 노션 템플릿을 10만원 정도에 팔고 있음을 발견할 수 있었다. 노션 템플릿이 무려 10만원이나 하다니… 그런데 만약 이것이 내 인생의 생산성을 획기적으로 높여준다면, 이는 합리적인 투자아닐까? 나는 구매하고 싶은 충동이 들었다.결제를 앞두고 혹시나 구글링을 해보았다. 더 저렴한 것이..

• format_list_bulleted 분석
• · 2025. 4. 30.

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유한다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

• format_list_bulleted 회고
• · 2025. 4. 24.