선언적인 코드 작성하기

문서

선언적인 코드 작성하기

박서진 토스 · 토스 기술 블로그

AI 핵심 요약

토스 프론트엔드 챕터는 선언적인 코드를 추상화 레벨이 높아져 동작의 의도에 집중할 수 있는 코드로 설명합니다. 다만 추상화가 늘 좋은 것은 아니며, 회원가입 폼처럼 화면별 요구사항이 달라지면 공통 컴포넌트의 많은 props가 오히려 수정과 사용을 어렵게 만들 수 있습니다. 그래서 제품과 비즈니스 요구사항의 변화 가능성을 고려해 수정하기 쉬운 적절한 추상화 수준을 선택해야 한다고 강조합니다. 반복되는 오버레이 제어, 노출 감지, 클릭 로깅은 각각 `useOverlay`, `ImpressionArea`, `LoggingClick`으로 감싸 제어 흐름과 구현 세부사항을 숨깁니다.

추상화는 반복되는 제어 흐름을 감추고, 사용하는 사람이 의도한 동작에 집중하게 합니다.
공통 컴포넌트는 재사용 이점뿐 아니라 화면별 차이를 수용하는 비용도 함께 따져야 합니다.
변경 가능성이 큰 요구사항을 미리 예측해 적절한 추상화 수준과 인터페이스를 선택하세요.
오버레이, 노출 감지, 클릭 로깅처럼 반복되는 동작은 Hook이나 컴포넌트로 감싸면 사용 코드가 간결해집니다.

소개

선언적인 코드, 토스 프론트엔드 챕터는 어떻게 생각을 하고 있을까요?

비슷한 학습 자료

문서 최진영

100년 가는 프론트엔드 코드, SDK

문서 최진영

SDK를 개발하며 마주한 다양한 상황과 기술적 어려움, 그리고 이를 해결하기 위해 우리가 설정한 핵심 가치와 달성해온 과정을 공유합니다.

웹 개발 프론트엔드

문서 박건영

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

문서 박건영

왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.

프론트엔드 알고리즘 · 자료구조

문서 토스 프론트엔드 챕터

프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까? | EP.3 모닥불

문서 토스 프론트엔드 챕터

테스트 코드는 왜 써야 할까요? 테스트 코드가 가져오는 베네핏들에는 어떤 것이 있을까요?

소프트웨어 테스트

문서 토스 프론트엔드 챕터

토스에서 말하는 “가독성 좋은 코드” 란 무엇일까? | EP1. 모닥불

문서 토스 프론트엔드 챕터

모닥불 피워두고 같이 도란도란 이야기 나누는 것처럼, 토스 프론트엔드 개발자들은 '모닥불'이라는 시간을 통해 함께 기술적인 문제를 나누고 해결방안을 찾아가는데요. 최근 모닥불 중 가장 뜨거웠던 주제를 소개합니다.

프론트엔드

문서 최진영

프론트엔드 로깅 신경 안 쓰기

문서 최진영

프론트엔드 개발자라면 한 번쯤 고민해봤을 클라이언트 로깅 개선 과정을 공유합니다.

웹 개발 프론트엔드

문서 박서진

토스 프론트엔드 챕터를 소개합니다!

문서 박서진

토스에서 프론트엔드 개발자가 일하는 방법과 맡고 있는 역할에 대해 소개드립니다.

프론트엔드