광고 웹 SDK 개편기 with Preact / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
오랜 기간 기능이 누적된 광고 웹 SDK는 코드 파악과 변경이 어려웠고, 내부용·외부용 프로젝트의 중복과 부족한 테스트도 문제였다. 이를 해결하기 위해 TypeScript 기반으로 두 프로젝트를 통합하고, SOLID 원칙에 따라 도메인 모델과 계층을 분리했으며 렌더링 기능은 파이프라인과 교체 가능한 렌더러로 구성했다. DOM을 절차적으로 다루는 복잡성과 React 도입 시 번들 크기 문제를 고려해 Preact를 적용하고, Jest와 Jenkins로 유닛 테스트 커버리지를 관리하는 한편 Storybook으로 브라우저 렌더링을 확인했다. 개편 후 모듈의 평균 순환 복잡도는 약 33에서 약 11로 낮아졌고, 발표자는 유연한 구조와 여러 테스트 방식을 함께 설계하는 것이 SDK 개편의 핵심이라고 설명했다.
- 도메인 용어를 기준으로 객체와 모듈을 나누면 업무 맥락을 코드에 반영하고 변경 범위를 좁히는 데 도움이 된다.
- 외부 응답 데이터와 내부 모델 사이에 변환 계층을 두어 서버 변경이 SDK 전반으로 번지지 않게 한다.
- 테스트하기 어려운 의존성은 목에만 기대기보다 인터페이스와 의존성 주입으로 분리한다.
- 유닛 테스트는 기능 단위의 검증에, Storybook은 컴포넌트 조합과 실제 브라우저 렌더링 확인에 활용할 수 있다.
소개
광고 웹 SDK(AdFit Web SDK)는 AdFit 플랫폼을 이용하여 광고를 게재하고 수익을 창출하기 위해 웹사이트 등에서 사용하는 라이브러리입니다. 기존 프로젝트의 문제점을 분석하고 개선하고자 개편을 진행하였고 그 과정에서 얻은 소중한 경험들을 공유하려 합니다. 그리고 React의 이웃사촌, Preact를 소개하고 광고 SDK에 어떻게 도입하고 활용했는지도 이야기하고자 합니다. #리팩토링 #Preact 카카오 FE플랫폼팀의 비즈FE파트에서 광고 SDK를 개발하고 있는 제이크 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-78 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
선물하기 프론트엔드 성능 개선기 / if(kakaoAI)2024
컨퍼런스 if kakao
선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다. #front-end #angular #웹 성능 선물하기 서비스에서 프론트엔드 개발을 하고 있는 Fleek입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-35 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
그래프 기반 악성 유저군 탐지: 온라인 광고 도메인에서의 적용 / if(kakaoAI)2024
컨퍼런스 if kakao
온라인 광고 도메인에서 해당 방식을 적용하는 것에 관해 다룹니다. 매체(앱, 웹) 간의 공통 방문 그래프를 활용해 온라인 광고 생태계에서 악성 유저군을 자동으로 탐지 및 필터링하는 기술을 소개합니다. #광고추천 #ad #fraud_detection #abusing #network_algorithm #graph-based_ML 광고추천팀의 John입니다. 광고주의 이익을 지키기 위해 이상탐지 기술로 카카오 내외부 광고 매체의 악성 트래픽을 탐지하고 방지합니다. 광고추천의 Issac입니다. 온라인 광고의 어뷰징 방지를 통해 광고주의 이익을 지키는 방법에 대해 연구&적용하고 있습니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-13 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
알고리즘 · 자료구조 딥러닝 · 머신러닝
컨퍼런스 if kakao
마이크로프론트엔드. 실무에 쓸만할까? / if(kakao)2022
컨퍼런스 if kakao
요즘 FE 기술 트렌드로 많이 언급되는 '마이크로 프론트엔드'. 말은 많은데, 실무에 어떻게 적용할 수 있을까요? 그리고 내 프로젝트에 적용해도 되는 걸까요? 그리고 적용하면 어떤 이득이 있을까요? 개발자와 사용자 모두 win-win 할 수 있는 마이크로 프론트엔드 아키텍처. 카카오워크 FE 개발팀은 실무에 어떻게 적용하고 있는지를 공유해 드립니다. #MSA #UX 카카오워크의 관리자 서비스를 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-82 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업