FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
디자인 시스템 구축 과정에서 Emotion CSS의 테마 의존성과 가독성 문제를 분석했습니다. Tailwind CSS와 Twin.Macro로 유틸리티, 반응형·다크 모드, 접근성 단위를 구성했습니다.
#tailwind css#Twin.Macro
000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오엔터테인먼트 신입 FE 개발자의 온보딩부터 페이지 파트 배정까지의 과정을 소개했습니다. 원격 협업 문화와 리뷰·협력자 중심 개발 방식을 공유합니다.
#JavaScript#HTML
000
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오엔터테인먼트 FE개발팀 신입이 10개월간의 온보딩과 실전 프로젝트 경험을 소개했습니다. 재택근무 속 게더타운, 스몰토크, 데모데이, 협업 문화로 성장한 과정을 공유했습니다.
#JavaScript#HTML
3200
웹 성능 최적화 - 렌더링 최적화
웹 성능 최적화 - 렌더링 최적화
브라우저 렌더링 경로와 Reflow·Repaint가 애니메이션 성능에 미치는 영향을 설명했습니다. 사운드 미터 비교를 통해 transform 기반 구현의 Layout 비용 감소를 확인했습니다.
#성능#렌더링
3600
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
CSS transition·animation, SVG, Animation API로 메뉴 전환 애니메이션을 구현했습니다. 복잡한 상호작용에는 Promise와 그룹 관리를 지원하는 Animation API를 제시합니다.
#CSS#SVG
000
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
햄버거 메뉴를 X 버튼으로 전환하는 예제로 웹 애니메이션 구현 방식 4가지를 비교했습니다.\n단순 전환부터 복잡한 인터랙션까지 CSS, SVG, Animation API의 특성을 설명합니다.
#CSS#SVG
5400
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
Tailwind CSS 사용기
Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다.\nPreflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.
#Tailwind CSS#React
000
Tailwind CSS 사용기
Tailwind CSS 사용기
Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.
#Tailwind CSS#React
4200
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰은 CSS-in-JS와 CSS Module의 특성을 비교하고 라우팅 성능을 측정했습니다. CSS Module을 기반으로 Tailwind를 병행하되 동적 영역은 CSS Module로 보완했습니다.
#CSS#CSS-in-JS
000
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
카카오웹툰 같은 복잡한 서비스에서 CSS-in-JS와 CSS Module의 특성을 비교했습니다. 개발 협업 방식과 런타임 파싱 비용을 고려한 성능 측정 방법을 소개합니다.
#CSS#CSS-in-JS
4100
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰은 GPU 가속과 lazy load로 복잡한 웹 인터랙션의 렌더링 비용을 줄였습니다. 스크롤 이벤트 대신 IntersectionObserver를 활용해 안정적인 프레임 성능을 확인했습니다.
#IntersectionObserver#lazy load
000
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.
#CSS#JavaScript
000
웹에서 다크모드 지원하기
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.
#CSS#JavaScript
1100
8퍼센트 플랫폼개발 인턴 후기-3
8퍼센트 플랫폼개발 인턴 후기-3
스프린트 행복도 데이터를 정량·정성 분석해 팀에 공유했습니다. Vue.js로 이벤트 케러셀·배너를 관리하는 관리자 페이지를 구현했습니다.
#Vue.js#Django
2400