항공 프론트엔드 구축기 (3/10): prefix를 붙이자 tailwind-merge가 조용히 깨졌다
항공 프론트엔드 구축기 (3/10): prefix를 붙이자 tailwind-merge가 조용히 깨졌다
프론트엔드 구축 과정에서 Tailwind CSS prefix 적용으로 tailwind-merge가 깨진 사례를 다뤘습니다. 설정 변경이 클래스 병합 유틸리티에 미치는 영향을 짚었습니다.
#tailwind-merge#prefix
2800
프론트엔드 기술 블로그 최신 글
필터 0
항공 프론트엔드 구축기 (2/10): Vue2 디자인 시스템을 React로 옮기기
항공 프론트엔드 구축기 (2/10): Vue2 디자인 시스템을 React로 옮기기
Vue2 디자인 시스템을 React로 옮기는 항공 프론트엔드 구축기를 다룬 글입니다. 프론트엔드 기술 전환과 디자인 시스템 이관 맥락을 소개합니다.
#Vue.js#React
3700
항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로
항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로
항공 서비스를 새로 만들며 웹, 모바일웹, 웹뷰를 하나의 코드로 묶는 프론트엔드 구축 경험을 다룬 글입니다. 다양한 실행 환경을 함께 대응하는 구조를 소개하는 내용입니다.
#web#mobile
9800
FE News 26년 8월 소식을 전해드립니다.
FE News 26년 8월 소식을 전해드립니다.
26년 8월 FE 뉴스에서 CSS 설문, 렌더링 전략, 요청 지연 시각화, Vite+ 베타, Ant 런타임 소식을 소개했습니다. 프런트엔드 기술 흐름과 새로운 도구를 한눈에 살펴볼 수 있는 소식입니다.
#CSS#SSR
10100
타입스크립트(TypeScript) 파헤치기
타입스크립트의 핵심 개념과 컴파일러 동작, 구조적 타이핑, 타입 추론을 설명했습니다. 또한 런타임 한계와 TSConfig 옵션, 실무 적용 시 주의점을 정리했습니다.
#TypeScript#JavaScript
7300
토스의 디바이스 팜 만들기
팀마다 각자 관리하던 실기기 환경을 사내 디바이스 팜 네뷸라로 통합한 과정을 소개했습니다. Appium 대신 자체 드라이버와 실시간 미러링 구조로 속도와 운영성을 높였습니다.
#node.js#API
15300
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
SVG 필터가 브라우저 렌더링 과정에서 어떻게 작동하는지, `fe*` 프리미티브와 `in`/`result`로 파이프라인을 구성하는 방식을 설명했습니다. 단순 보정은 CSS filter로, 복합 합성과 커스텀 효과는 SVG 필터로 나누어 선택하는 기준도 정리했습니다.
#SVG#CSS
16500
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
브라우저에서 이미지 보정을 구현할 때 SVG 필터를 활용하는 방법을 소개했습니다. 선언적 적용과 파이프라인 구성, React 연동의 장점을 중심으로 정리했습니다.
#SVG#React
2800
로컬 DB를 화면의 기준으로 삼는다는 것: hearth를 직접 만든 이유
로컬 DB를 화면의 기준으로 삼는 오프라인 퍼스트 구조와 사내 라이브러리 hearth의 설계 과정을 소개했습니다. 자체 서버와 재사용 조건에 맞춰 LWW, 낙관적 쓰기 보호, 동기화 재설계를 적용했고 다음 단계로 delta sync를 준비했습니다.
#offline-first#IndexedDB
19100
ag-Grid로 화면과 동일한 Excel 만들기
ag-Grid Excel Export에서 화면과 동일한 스타일과 값을 맞추는 과정을 정리했습니다. valueFormatter, excelStyles, header 규칙을 통해 엑셀 스타일 반영 문제를 해결했습니다.
#ag-Grid#Excel
43500
모바일 UI, 웹과는 다르다
모바일 UI는 웹과 달라 입력 방식, 화면 높이, 스크롤, 접근성까지 함께 고려해야 했습니다. Safe Area, dvh, rem, Bottom Sheet 등 모바일에 맞는 구조와 상태 설계가 중요했습니다.
#mobile#UI/UX
47500
조합형 Form 컴포넌트 설계
React Hook Form과 MUI 기반 폼 컴포넌트의 확장 한계를 설명했습니다. 역할 분리와 Composition Pattern으로 복합 입력 UI와 유지보수성을 개선한 사례입니다.
#React#React Hook Form
29400
MUI 기반 디자인시스템 VUI
MUI 기반 디자인 시스템 VUI의 구축 배경과 토큰-테마-컴포넌트 연결 구조를 소개했습니다. 브랜드와 모드 변형을 설정으로 흡수하고, 남은 과제도 정리했습니다.
#MUI#디자인 시스템
6600
프레임워크에 구애받지 않는 통합 백오피스 구축하기
React, Vue, JSP가 섞인 백오피스에서 공통 화면을 웹 컴포넌트로 통합한 사례를 소개했습니다. 부모 시스템의 인증과 자원을 공유하면서도 CDN 독립 배포와 스타일 격리를 구현했습니다.
#Vue.js#React
29200