토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
SLASH 토스 · YouTube
AI 핵심 요약
기존 코드에 기능을 덧붙이는 과정에서 관련 로직이 흩어지고 함수가 여러 책임을 맡으면, 작은 변경도 유지보수와 디버깅을 어렵게 만든다. React와 JavaScript 사례를 통해 팝업 관련 코드를 한곳에 모아 응집도를 높이고, 이벤트 처리와 약관 확인 등 서로 다른 책임을 함수나 컴포넌트로 나누는 방법을 설명했다. 또한 핵심 의도는 드러내고 세부 구현은 감추는 추상화를 소개하며, 선언형·명령형 코드를 상황에 맞게 선택하고 추상화 수준을 일관되게 유지해야 한다고 강조했다. 클린 코드는 단순히 짧은 코드가 아니라 원하는 로직을 빠르게 찾게 해 유지보수 시간을 줄이는 코드이며, 이를 위해 기존 코드 수정과 팀의 공통 원칙 정립이 필요하다는 점을 전했다.
- 기능을 추가할 때 변경된 줄만 보지 말고, 전체 흐름에서 코드의 응집도와 책임이 어떻게 달라졌는지 확인하세요.
- 추상화할 때는 구현 세부만 감추고, 팝업의 제목·내용·사용자 액션처럼 동작을 이해하는 데 필요한 정보는 드러내세요.
- 선언형과 명령형은 우열 관계가 아니므로, 핵심 의도를 표현할 때와 세부 절차를 제어할 때를 구분해 사용하세요.
- 한 코드 블록 안에서 추상화 수준을 일관되게 맞추면 독자가 흐름을 더 쉽게 따라갈 수 있습니다.
- 기존 코드를 수정하는 일을 피하지 말고, 팀의 코드 리뷰 기준과 개선 원칙을 함께 논의해 문서화하세요.
소개
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
서비스가 지속적으로 최고의 사용자 경험을 제공하기 위해서는 개발자 경험(DX)이 뒷받침되어야 합니다. 토스에서 SSR을 도입하면서 겪었던 다양한 어려움과 이 를 수호하기 위한 해결법을 공유합니다. 박서진 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3ObL3Y9 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 데브옵스 · 인프라
컨퍼런스 SLASH
토스ㅣSLASH 22 - 지속 성장 가능한 코드를 만들어가는 방법
컨퍼런스 SLASH
우리가 만드는 코드가 처음부터 완벽할 수는 없습니다. 하지만 서비스가 폭발적으로 성장하려고 할 때 발목을 잡아선 안 되죠. 하루 이틀 운영되고 끝인 게 아닌, 오래 살아 있을 수 있는 좋은 소프트웨어는 어떤 모습일까요? 김재민 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3QkUCWs 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
개발 · 프로그래밍 기타
컨퍼런스 SLASH
토스ㅣSLASH 21 - JavaScript Bundle Diet
컨퍼런스 SLASH
웹사이트 기능이 많아짐에 따라 점점 커지는 JavaScript Bundle Size. 웹사이트 속도는 느려지고, 잠재 고객을 잃을 수도 있습니다. 라이브러리를 사용하는 그리고 제공하는 관점에서 Bundle Size가 커질 수 있는 상황과 해결 방법을 공유합니다. 이한 / 토스 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
웹 개발 프론트엔드