웹앱 사용자 경험을 개선하는 기술 한 스푼
웹앱 사용자 경험을 개선하는 기술 한 스푼
웹앱의 로딩 경험을 개선하기 위해 스피너, 스켈레톤, 전환 애니메이션, Tanstack-Query를 도입한 사례를 소개했습니다. 화면 특성과 지연 시간에 따라 로딩 방식을 나누고 공통 컴포넌트로 구현 비용을 줄인 점이 핵심입니다.
#UI/UX#스켈레톤 UI
5700
프론트엔드 기술 블로그 최신 글
필터 0
React 전역 상태 관리, 무슨 라이브러리 써야 할까? \:\ Redux, Zustand 특징과 장단점 비교
React 전역 상태 관리가 필요한 이유와 Context API의 한계를 먼저 설명했습니다. 이어서 Redux와 Zustand의 특징, 장단점을 비교해 선택 기준을 정리했습니다.
#React#Redux
4800
부서 내 효율적 협업을 위한 Playground 개발
부서 내 효율적 협업을 위한 Playground 개발
부서 내 효율적 협업을 위해 Next.js 기반 Playground를 개발한 경험을 공유했습니다. 동료들과의 소통과 협업을 돕는 도구 구축 사례를 다뤘습니다.
#Next.js#cloud
1300
13년 된 네이버 캘린더 안드로이드 앱,멀티 플랫폼 기반 모듈화 적용
13년 된 네이버 캘린더 안드로이드 앱,멀티 플랫폼 기반 모듈화 적용
13년 된 네이버 캘린더 안드로이드 앱에 멀티 플랫폼 기반 모듈화를 적용한 경험을 공유했습니다. 오래된 레거시 앱의 트러블슈팅, 빌드 개선, 운영 전략을 다뤘습니다.
#Android#module
4800
React Compiler - 우리는 memo를 잊을 수 있을까요?
React Compiler로 React 코드 최적화를 자동화하는 흐름을 소개했습니다. 개발자의 memo 관리 부담을 줄이는 방향을 설명했습니다.
#React#compiler
4400
사용자의 실수, 디자이너가 어떻게 해결할까?
사용자 실수를 줄이기 위한 위지윅 제품 설계와 적용 확산 과정을 다뤘습니다. 개발자 중심에서 PO 중심으로 전환한 이유와 설득 과정을 소개했습니다.
#UI/UX
2700
문화에 대한 문제까지 ux로 해결할 수 있을까?
문화처럼 추상적인 문제를 UX로 다룰 수 있을지 고민한 글입니다. 디자이너가 문제를 계속 구체화하며 팀 문화를 지키는 과정을 다룹니다.
#UI/UX#문화
1900
CLI로 환경변수 관리하기
환경 변수 관리가 파편화되고 .env 생성이 번거로워지는 문제를 정리했습니다. 쉘 스크립트 한계를 넘어 Node.js CLI로 자동 생성 흐름을 만든 과정을 소개했습니다.
#AWS#AWS Secrets Manager
2700
CLI로 환경변수 관리하기
AWS Secrets Manager 환경 변수를 수동으로 옮기는 불편을 Node.js CLI로 개선했습니다. npx 명령으로 인증부터 .env 생성까지 자동화한 과정을 공유합니다.
#AWS#AWS Secrets Manager
200
디자인 시스템 #2 : SwiftUI를 활용한 BottomSheet 제작기-1
SwiftUI의 `sheet`와 `presentationDetent`를 활용해 BottomSheet를 구현한 경험을 정리했습니다. 동적 높이와 확장형 시트, 커스텀 배경을 위한 인터페이스 설계 방향을 소개했습니다.
#SwiftUI#iOS
4500
CocoaPods 없이 React Native 개발하기
운영 중인 iOS 앱에 React Native를 도입할 때 CocoaPods 병행으로 생기는 의존성 문제를 정리했습니다. XCFramework로 미리 빌드해 Swift Package 형태로 포함하는 Prebuild 방식과 빌드 절차를 소개했습니다.
#react native#iOS
5300
JSDoc 200% 써먹기 \:\ JavaScript API 문서화 기수
JSDoc으로 JavaScript 코드의 타입 힌트와 함수 설명을 풍부하게 남기는 방법을 다뤘습니다.프론트엔드에서 협업과 유지보수를 돕는 태그 활용법과 주의점도 정리했습니다.
#JavaScript#TypeScript
3400
Front-end 개발자가 회고하는 기획전 개편
Next.js 기획전 개편에서 HTML 모듈 사이에 기존 상품 카드를 삽입하는 방법을 다뤘습니다. createRoot와 provider 중복 사용의 성능 영향을 측정해 설계 타당성을 검증했습니다.
#Next.js#React
2900
에이닷 UI 테스트 자동화 이야기: 우리의 도전, 선택, 그리고 미래
에이닷이 모바일 UI 테스트 자동화 도입을 검토한 과정을 공유했습니다. 수동 QA의 한계를 줄이기 위해 Espresso와 XCTest를 선택하고 Zephyr 연동 방향까지 정리했습니다.
#모바일#UI/UX
2900