Velopers
모든 블로그
토스

토스

도메인toss.tech
주요 카테고리 프론트엔드 · AI

활동 요약

대표 인기 포스트캐시를 적용하기 까지의 험난한 길 (TPS 1만 안정적으로 서비스하기)499 조회
최근 30일
7개
평균 조회
98
누적 조회
24,617
전체 글
252개
마지막 발행
2026. 11. 10.
블로그 방문

토스 기술 블로그 글 (63)

프론트엔드

자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기

토스증권 PC의 그리드 레이아웃을 이진 트리 자료구조로 직접 구현한 사례를 소개했습니다. 복잡한 요구사항을 데이터 구조와 컴포넌트 분리로 해결하고 저장·복구까지 구현했습니다.

#React#자료구조#이진 트리
36700

프론트엔드

무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule) | EP.10 캠프파이어 특집 하편

시청자 질문을 바탕으로 테스트 코드, ESLint Rule, useEffect dependency 배열에 대한 프론트엔드 실무 인사이트를 공유했습니다. 토스 개발자들의 코드 리뷰와 내부 패키지 활용 사례도 함께 소개했습니다.

#test#ESLint#JavaScript
7700

프론트엔드

무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리) | EP.10 캠프파이어 특집 상

프론트엔드 코드 구조와 추상화, 함수형 프로그래밍에 대한 실무 질문을 다룬 특집이었습니다. 협업과 변경 가능성을 고려한 설계 기준을 토스 개발자들이 공유했습니다.

#컴포넌트#함수형 프로그래밍#유효성 검사
4200

프론트엔드

[미디클] 라디오 vs 체크박스 뭐가 좋을까? EP.1

모바일 선택 화면에서 라디오 버튼 대신 다른 UI를 써도 되는지 UT로 검증했습니다.사용자는 모양보다 질문 맥락에 따라 선택했고, 친절한 안내가 더 중요했습니다.

#UI/UX#모바일#design
5700

프론트엔드

시니어 사용자가 어려워하는 UX 5가지

시니어 사용자가 금융 앱에서 겪는 공통 오인지 패턴을 UT로 분석해 UX 가이드라인으로 정리했습니다. 버튼, 예시 이미지, 모션, 라이팅, 화면 구조를 시니어 관점에서 점검해야 한다고 제안했습니다.

#UI/UX#유저 리서치#사용성 테스트
7200

프론트엔드

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

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

#성능#React#UI/UX
3400

프론트엔드

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

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

#성능#최적화#React
4100

프론트엔드

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

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

#TypeScript#React#Next.js
3200

프론트엔드

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

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

#React#오픈소스#상태관리
5400

프론트엔드

Next.js 그만 쓰세요! 면접관이 진짜 원하는 것!? | 모닥불 EP.8

토스 면접관이 채용에서 보는 기준과 실질적인 팁을 공유했습니다. 기술 사용 경험보다 왜 그 기술을 선택했는지 설명하는 점을 강조했습니다.

#Next.js#채용#GitHub
4000

프론트엔드

사용자의 실수, 디자이너가 어떻게 해결할까?

사용자 실수를 줄이기 위한 위지윅 제품 설계와 적용 확산 과정을 다뤘습니다. 개발자 중심에서 PO 중심으로 전환한 이유와 설득 과정을 소개했습니다.

#UI/UX
2700

프론트엔드

문화에 대한 문제까지 ux로 해결할 수 있을까?

문화처럼 추상적인 문제를 UX로 다룰 수 있을지 고민한 글입니다. 디자이너가 문제를 계속 구체화하며 팀 문화를 지키는 과정을 다룹니다.

#UI/UX#문화
2000

프론트엔드

CocoaPods 없이 React Native 개발하기

운영 중인 iOS 앱에 React Native를 도입할 때 CocoaPods 병행으로 생기는 의존성 문제를 정리했습니다. XCFramework로 미리 빌드해 Swift Package 형태로 포함하는 Prebuild 방식과 빌드 절차를 소개했습니다.

#react native#iOS#Swift Package Manager
5300

프론트엔드

메뉴 구조가 고민될 때 해볼 수 있는 UX리서치

혜택탭의 메뉴 구조를 개선하기 위해 카드소팅 UX리서치를 진행했습니다. 유저가 실제로 나누는 기준을 확인해 카테고리 개편 방향을 찾았습니다.

#UX/UX#검색
2300

프론트엔드

ts-pattern은 더 멋진 if문이 아니다

ts-pattern은 복잡한 조건 분기를 타입 안전하게 정리해 주지만, 성능은 기본 제어문보다 떨어질 수 있다고 설명했습니다. 단순한 분기에는 if/else, switch, IIFE 같은 방식이 더 적합할 수 있다고 정리했습니다.

#TypeScript#ts-pattern#패턴 매칭
6700

프론트엔드

모닥불 | EP.6 프론트엔드 개발에서 Next.js, 꼭 써야 할까?

프론트엔드에서 프레임워크와 라이브러리의 차이, 그리고 실제 업무에서의 활용 기준을 다뤘습니다. Next.js를 포함한 여러 프레임워크를 언제 써야 할지에 대한 관점을 소개했습니다.

#Next.js#React#프레임워크
4900

프론트엔드

비효율이 있는 곳엔 플랫폼 디자이너가 있다

은행 문자 속 ‘자동이체’ 표현으로 생기던 오해와 문의를 줄이기 위해 안내 문구와 화면 구성을 개선했습니다. 그 결과 월평균 문의가 3,173건에서 446건으로 크게 감소했습니다.

#UI/UX#디자인 시스템#customer support
1700

프론트엔드

업무용 툴, 내 동료가 정말 만족했나요?

테이블센터의 검색과 탐색 경험을 10개월간 지표 기반으로 개선한 사례를 소개했습니다. 검색 속도와 만족도를 크게 높이고, 빠른 UT로 기능 방향을 검증했습니다.

#UI/UX#검색#분석
2100