토스ㅣSLASH 22 - Effective Component 지속 가능한 성장과 컴포넌트
SLASH 토스 · YouTube
AI 핵심 요약
결제 대시보드의 복잡한 UI를 자주 바뀌는 제품 요구에 맞춰 수정하기 어려웠던 경험을 바탕으로, 변경에 유연한 컴포넌트 설계 기준을 제시한다. React에서 데이터와 상호작용을 헤드리스 훅으로 분리하고, 드롭다운의 트리거·메뉴·아이템처럼 한 가지 역할을 하는 컴포넌트를 조합해 셀렉트와 멀티셀렉트를 구성한다. 또한 도메인에 종속된 컴포넌트와 범용 컴포넌트를 나누고, 표준에 가까운 이름과 props로 인터페이스를 설계할 것을 권한다. 컴포넌트를 나누기 전 인터페이스와 분리 목적을 먼저 고민하면 변경 대응과 재사용에 도움이 된다는 것이 핵심 교훈이다.
- 데이터 계산과 상호작용 로직을 UI에서 분리하면, 표현 방식이 달라져도 같은 기능을 재사용할 수 있다.
- 복잡한 UI는 상태·트리거·메뉴·아이템처럼 역할별 컴포넌트로 나누고 조합한다.
- 컴포넌트 이름과 props는 도메인 맥락을 덜어내고 표준에 가까운 표현을 사용하면 의도를 파악하기 쉽다.
- 분리하기 전에 복잡도를 낮추려는 것인지 재사용하려는 것인지 목적을 먼저 확인한다.
소개
우리는 왜 컴포넌트를 나누어 개발해야 할까요? 토스가 정의하는 컴포넌트의 역할과 분리 기준을 공유합니다. 한재엽 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3HwAZHj 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기
컨퍼런스 SLASH
디지털화로 더 편리해진 금융, 과연 모두에게 편리해졌을까요? 모두가 평등하게, 쉽고 편리한 금융 경험을 할 수 있도록 ‘접근성’을 높인 토스의 노력을 소개합니다. 최동근 / 토스 Andriod Developer 발표 자료 👉🏻 https://bit.ly/42xGdvd 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #디자인시스템 #접근성 #androiddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩...
모바일 앱 개발 UI/UX
컨퍼런스 SLASH
토스ㅣSLASH 22 - 지속 성장 가능한 코드를 만들어가는 방법
컨퍼런스 SLASH
우리가 만드는 코드가 처음부터 완벽할 수는 없습니다. 하지만 서비스가 폭발적으로 성장하려고 할 때 발목을 잡아선 안 되죠. 하루 이틀 운영되고 끝인 게 아닌, 오래 살아 있을 수 있는 좋은 소프트웨어는 어떤 모습일까요? 김재민 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3QkUCWs 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
개발 · 프로그래밍 기타
컨퍼런스 SLASH
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
컨퍼런스 SLASH
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드
컨퍼런스 SLASH
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
컨퍼런스 SLASH
API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 로드맵 2개에 담김
컨퍼런스 SLASH
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 SLASH