토스ㅣSLASH 24 - 잃어버린 생산성을 찾아서, React Native로 알아보는 디버깅
SLASH 토스 · YouTube
AI 핵심 요약
토스는 React Native에서 Flipper를 사용할 때 잦은 연결 끊김과 무거운 실행 환경이 개발 생산성을 떨어뜨리는 문제를 겪었다. React Native의 CDP 기반 디버깅 구조와 웹소켓 프록시를 활용해 Chrome DevTools 기반의 자체 도구를 만들고, 부족했던 네트워크 인스펙터를 직접 보완했다. Android에서는 OkHttp 클라이언트 인터셉터를, iOS에서는 URLProtocol과 URLSession 위임자를 이용해 네트워크 요청·응답을 가로채고 CDP 메시지로 전달했으며, 응답 본문 미리보기는 커스텀 메시지와 개발 서버의 메모리 저장으로 구현했다. 그 결과 웹과 유사한 디버깅 경험을 React Native에서도 제공할 수 있었고, 개발자 경험이 제품 개발 생산성에 중요하다는 점을 확인했다.
- React Native의 CDP 메시지 흐름을 이해하면 런타임과 개발자 도구 사이의 디버깅 동작을 추적할 수 있다.
- Android에서는 OkHttp 인터셉터를, iOS에서는 URLProtocol과 URLSessionDataDelegate를 활용해 네트워크 요청·응답을 가로챌 수 있다.
- 응답 본문 미리보기처럼 CDP가 기본 제공하지 않는 기능은 커스텀 메시지와 개발 서버의 메모리 저장을 조합해 구현할 수 있다.
- 디버깅 도구를 선택할 때는 익숙한 UI뿐 아니라 연결 안정성과 네트워크 인스펙터 지원 여부도 살펴야 한다.
소개
웹과 유사한 개발 경험을 제공하는 React Native, 디버깅 경험은 과연 어떨까요? 토스에서 자체 디버깅 도구를 만들어 생산성을 끌어올리게 된 과정을 소개합니다. 이근혁 / 토스 Frontend Platform Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #reactnative 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는...
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기
컨퍼런스 SLASH
토스의 사용자와 개발자 경험을 모두 개선해준 ‘React Native’, 도입 과정은 어땠을까요? React Native를 도입하는 과정에서 토스가 마주한 기술적인 도전과 그 해결 과정을 소개합니다. 박서진 / 토스 Frontend Chapter Lead 발표 자료 👉🏻 https://bit.ly/3CePOfI 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #reactnative #사용자경험 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에...
모바일 앱 개발
컨퍼런스 SLASH
평균 경력 10년의 TPO와 서버 개발자들은 토스에서 어떤 성취를 이뤘고, 또 어떤 고민을 하고 있을까요? 토스 제품의 기반이 되는 Product Foundation을 만드는 이들의 이야기, SLASH23 특별 세션에서 만나 보세요. 김보람, 임희진/ 토스 Technical Product Owner 김현준, 박재현 / 토스 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #slash *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 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 23 - 프로파일러로 시스템 성능 향상시키기
컨퍼런스 SLASH
서비스 운영 과정 속 여러 장애들, 어떻게 그 원인을 빠르고 정확하게 파악할 수 있을까요? 상황에 맞는 다양한 ‘프로파일러’로 문제 원인을 파악하고 또 해결한 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/42ypWpE 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #profiler #서비스성능 #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작...
백엔드 데브옵스 · 인프라 로드맵 2개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
컨퍼런스 SLASH
매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
프론트엔드
컨퍼런스 SLASH