FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
디자인 시스템 구축 과정에서 Emotion CSS의 테마 의존성과 가독성 문제를 분석했습니다. Tailwind CSS와 Twin.Macro로 유틸리티, 반응형·다크 모드, 접근성 단위를 구성했습니다.
#tailwind css#Twin.Macro
100
프론트엔드 기술 블로그 최신 글
필터 0
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
카카오페이지 웹 개편에서 Emotion CSS의 한계를 줄이기 위해 Tailwind CSS와 Twin.Macro를 도입했습니다. 디자인 시스템 네이밍을 쉽게 반영하고, 커스텀 플러그인으로 부족한 유틸리티를 보완했습니다.
#Tailwind CSS#Emotion CSS
5800
React Native 앱의 배포 트랙 관리하기
React Native의 CodePush와 Deployment Key로 플랫폼·테스트 트랙별 JS 번들 배포를 관리했습니다. S3 adhoc 배포와 Release Tag 규칙을 결합해 내부 테스트와 QA 흐름을 자동화했습니다.
#React Native#CodePush
000
웹뷰 액티비티간 데이터 동기화하기
웹뷰 액티비티가 여러 개인 화면에서 데이터 동기화 이슈를 다룬 글입니다. 화면 간 변경 사항을 반영하는 해결 방법을 설명했습니다.
#Android#웹뷰
1900
[Design] 해피 모먼트를 전해주는 인터랙션 디자인
[Design] 해피 모먼트를 전해주는 인터랙션 디자인
플레이키보드에서 Lottie 기반 인터랙션 디자인을 적용한 사례를 소개했습니다. 출석 체크, 공감 버튼, 이스터에그에 모션을 더해 즐거움과 사용성을 함께 고려했습니다.
#UI/UX#인터랙션 디자인
13600
Kurly Design Principle
컬리 프로덕트 디자인 원칙 5가지를 소개하며 일관된 판단 기준을 제시했습니다. 사용자 공감과 논리를 바탕으로 단순하고 신뢰감 있는 경험을 지향했습니다.
#UI/UX#design
2800
자바스크립트로 만든 유한 상태 기계 XState
XState로 FSM의 상태, 이벤트, 전이와 컨텍스트를 분리하는 방법을 장바구니 예제로 설명했습니다. React 훅, 가드, 액션, 비동기 서비스로 복잡한 UI 흐름을 선언적으로 관리합니다.
#JavaScript#XState
100
자바스크립트로 만든 유한 상태 기계 XState
자바스크립트로 만든 유한 상태 기계 XState
XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.
#XState#FSM
4300
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
Next.js v9 기반 레거시 프로젝트를 v12로 마이그레이션하고, SWC와 import 최적화로 성능을 개선했습니다. 또한 Moment.js를 Day.js로 교체하며 번들 크기를 줄이고 리팩터링 안정성을 높였습니다.
#Next.js#React
2500
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오엔터테인먼트 신입 FE 개발자의 온보딩부터 페이지 파트 배정까지의 과정을 소개했습니다. 원격 협업 문화와 리뷰·협력자 중심 개발 방식을 공유합니다.
#JavaScript#HTML
000
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오 공채 입사 후 10개월 FE개발팀에서의 여정
카카오엔터테인먼트 FE개발팀 신입이 10개월간의 온보딩과 실전 프로젝트 경험을 소개했습니다. 재택근무 속 게더타운, 스몰토크, 데모데이, 협업 문화로 성장한 과정을 공유했습니다.
#JavaScript#HTML
3300
Mocking으로 프론트엔드 DX를 높여보자
API 미구현 시 하드코딩 Mocking으로 생기는 교체 비용과 개발 병목을 짚었습니다. MSW의 Service Worker 기반 요청 가로채기로 API 의존성을 낮추는 방법을 소개합니다.
#MSW#Service Worker
200
satisfies: 안전한 업캐스팅을 통해 더 안전한 코드작성을 도와주는 새로운 키워드(TypeScript 4.9)
TypeScript 4.9의 `satisfies` 키워드를 소개하며, 왜 필요한지와 어떤 문제를 해결하는지 설명했습니다. 안전한 업캐스팅과 더 안전한 코드 작성을 돕는 점이 핵심입니다.
#TypeScript
1500
React 이벤트와 브라우저 이벤트
Swiper와 React 이벤트 위임 방식의 차이로 버튼 클릭 전파가 막히지 않는 원인을 분석했습니다. 상위 React 래퍼에 클릭 핸들러를 두어 합성 이벤트 흐름으로 통일했습니다.
#React#Swiper
000