프론트엔드 아티클

필터 0

선택된 필터 없음

프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! 모닥불 | EP.8

· 2024년 12월 19일

프론트엔드

프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! 모닥불 | EP.8

토스 개발자들이 프론트엔드 성능 최적화의 본질과 실무 노하우를 공유했습니다. 초기 로딩과 런타임, React 리렌더링 최적화 사례를 다뤘습니다.

디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법

디자인 토큰을 Figma에서 정의하고 GitHub Actions와 token-transformer로 자동 변환하는 과정을 소개했습니다. 또한 Panda CSS에 맞게 토큰을 재구성해 디자인 시스템에 연결한 흐름을 설명했습니다.

#디자인 시스템#design tokens

50005분

· 2024년 12월 16일

프론트엔드

2024 프론트엔드 뉴스 한 방에 몰아 보기

2024년 프론트엔드 생태계에서 주목할 만한 뉴스와 도구를 분야별로 정리했습니다. React, Next.js, 런타임, 패키지 매니저의 주요 변화와 실무 적용 포인트를 함께 살펴봤습니다.

다나와 PC견적 Tuist 도입기

다나와 PC견적 iOS 앱에 Tuist를 도입한 배경과 Project.swift 기반 설정 구성을 소개했습니다. Xcode 프로젝트 충돌을 줄이고 모듈화 기반을 마련하려는 방향을 설명했습니다.

@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?

기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.

첫 탐색만큼 중요한 재탐색 경험 개선

고객의 재탐색 행동 데이터를 바탕으로 검색 결과 페이지의 날짜 변경 흐름을 단순화했습니다. 진입점을 분리하고 모듈을 바로 열리게 해 탐색 편의성을 높였습니다.

프론트엔드팀의 디자인 시스템 재구축기

여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.

스플래시 화면을 활용한 홈화면 백화현상 개선하기

스플래시 화면으로 홈 화면 로딩 중 빈 화면 노출을 줄이고 백화현상을 개선했습니다. 또한 온보딩 플로우를 단순화해 첫 진입 경험을 더 자연스럽게 만들었습니다.

앱과 웹의 연결고리 : 여기어때 통합 WebView 구축기

여기어때 앱에서 웹뷰를 통합한 과정과 연동 방식을 정리한 글입니다. 파편화된 브릿지 규격을 하나로 묶어 유지보수와 협업 효율을 높인 사례를 소개했습니다.

복잡한 웹 페이지도 개발자 없이 만드는 웹 빌더 “에디터” 개발기 (2)

에디터로 긴급 프로모션 페이지를 빠르게 만들고 반복 수정까지 운영한 개선 사례를 소개했습니다.이미지 업로드와 알림 기능을 다듬으며, 에디터의 활용 범위를 가설 검증 도구로 넓히려 했습니다.

@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?

복잡한 퍼널의 상태 관리와 뒤로가기 문제를 해결하기 위해 `@use-funnel`을 새로 만들었습니다. 사내 요구사항을 모아 코어와 라우터별 구현으로 나누고 오픈소스로 공개했습니다.

해외숙소 홈 개편기

해외숙소 홈을 웹에서 네이티브로 개편하며 성능과 사용성을 개선했습니다. 또한 State 관리와 탭 전환 응답 처리 문제를 분리·정리해 유지보수성을 높였습니다.

#iOS#RxSwift

25005분