브런치 FE 심폐소생술 (feat. 신입 개발자의 우당탕탕 현업 적응기) / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
브런치 FE는 ES3·jQuery와 전역 객체 중심의 오래된 코드, 복잡한 Grunt 빌드, 테스트와 문서 부족으로 운영 이슈의 원인을 찾고 수정하기 어려웠습니다. 팀은 Grunt를 Webpack으로 전환하고 ES6 모듈과 기능 단위 디렉터리 구조를 도입했으며, 페이지 상태·비즈니스 로직·렌더링을 분리하는 컨벤션으로 코드를 점진적으로 정리했습니다. 이후 Cypress E2E와 Jest 유닛·스냅샷 테스트, 모니터링 알림, ESLint 규칙을 보강하고 레거시와 신규 코드에 서로 다른 린트 기준을 적용했습니다. 그 결과 사이드 이펙트에 대한 대응 기반을 마련하고 새 코드의 품질과 유지보수성을 높였으며, 레거시는 테스트를 곁들여 단계적으로 개선해야 한다는 교훈을 얻었습니다.
- 빌드 시스템을 바꿀 때는 모든 페이지의 영향을 확인하고, Jest 스냅샷 테스트 같은 보호 장치를 마련하세요.
- 레거시 전체를 한 번에 고치기보다 새 코드에 먼저 모듈 구조와 엄격한 린트 규칙을 적용하고 점진적으로 옮기세요.
- ESLint 규칙을 기존 코드에 일괄 적용하면 동등 비교 변경처럼 코드의 의도를 훼손할 수 있으므로 레거시와 신규 코드의 규칙을 나누세요.
- 페이지 상태·비즈니스 로직·렌더링을 분리하면 테스트 대상을 명확히 하고 코드 간 의존성을 파악하기 쉬워집니다.
- 테스트뿐 아니라 오류 필터링, 알림 조건, 대응 절차까지 갖춰야 모니터링이 실제 운영에 도움이 됩니다.
소개
브런치 FE 신입개발자의 현업 적응기를 통해, FE 레거시 개선에 대한 경험을 공유 하고자 합니다. #레거시 #Test #리팩토링 카카오 FE플랫폼팀에서 브런치를 담당하고 있는 에드워드 입니다. 카카오 FE플랫폼팀에서 브런치를 담당하고 있는 루카스 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-76 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
3년차 개발자, 10년차 에디터 모던화 하기 in Android / if(kakaoAI)2024
컨퍼런스 if kakao
10년된 브런치 안드로이드 에디터를 3년차 개발자가 모던화 하기까지의 과정의 개발 경험기 입니다. 10년전에 만들어진 리치 텍스트 에디터를 Compose, MVI, 클린아키텍쳐를 적용하여 모던화 하는 프로젝트를 발제하고, POC 를 통해서 점진적으로 개선하는 과정을 공유합니다. #android #editor #compose #modernization #리팩토링 브런치개발파트에서 브런치와 티스토리 안드로이드 앱 개발을 담당하고 있는 Evan입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-52 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 if kakao
카카오페이에서 만보기 서비스를 개발하면서 겪었던 이야기들을 소개해 드리려고 합니다. 본 세션에서는 만보기 서비스의 소개와 함께 주니어 개발자가 만보기 서비스를 개발하기 위해 어떤 과정을 거쳤는지를 공유하고자 합니다 #iOS #CoreMotion 항상 성장을 하고픈 iOS 개발자 cado입니다 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-90 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발
컨퍼런스 if kakao
웹 성능은 주로 로드 성능에 집중되었지만 웹의 역할이 커지면서 사용자 상호작용에 대한 성능도 중요해졌습니다. 웹이 로드 된 이후 사용자와 상호작용에 관련된 성능을 측정하고 개선하는 방법을 알아봅니다. #성능 #Responsiveness #Lighthouse #UserFlow #웹성능 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-75 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
Developers Recap @if(kakao)2021 - full ver.
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스의 둘째 날에는 카카오와 9개 공동체 개발자들이 더 나은 세상을 만들기 위한 다양한 기술적 노력과 혁신적 성과을 공유합니다. 본 영상에서는 개발자를 위한 기조연설과 기술 발표 세션, 토크쇼/인터뷰/대담 등 다양한 콘텐츠와 개발자 대상 이벤트 등 총 90여개의 세션과 프로그램을 소개할 예정입니다. 카카오와 공동체 개발자들이 지난 1년간 흘렸던 땀과 노력, 그리고 이뤄낸 기술적 성과들을 한 눈에 확인해주세요! - https://if.kakao.com - 카카오 테크: https://tech.kakao.com/ - 관련 글: https://tech.kakao.com/2021/11/01/ifkakao2021-developers-recap/