TDD로 앞서가는 프론트엔드: 디자인, API 없이도 개발을 시작하는 방법 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
디자인·마크업·API 작업이 끝난 뒤 프론트엔드 개발을 시작하는 워터폴 구조에서는 선행 작업의 지연이 프론트엔드 일정까지 밀어내는 병목이 생겼다. 이를 줄이기 위해 Vue 컴포넌트의 기능을 테스트 선택자로 검증하고, API·뷰모델·뷰를 분리해 화면과 API가 준비되기 전에도 기능을 먼저 구현하는 TDD 프로세스를 적용했다. 카카오맵 매장관리 PC 프로젝트에서는 기능 단위로 요구사항과 일정을 나누고 테스트를 모킹해 선행 개발을 진행했으며, 발표에서 공유한 결과로는 추가 소요 기간을 1.5개월로 제한해 전체 개발 기간을 3.5개월 단축했다. 테스트를 개발 프로세스에 도입할 때는 팀의 상황에 맞춰 검증 범위와 공통화 수준을 조정해야 한다는 점도 확인했다.
- 기획서의 요구사항을 유저 스토리나 기능 단위로 나누면 테스트 케이스와 일정 산정의 기준으로 함께 활용할 수 있다.
- 컴포넌트 테스트는 화면의 픽셀이나 스타일보다 선택자로 요소를 찾고, 입력값과 인터랙션에 따른 기능 결과를 검증하는 데 집중한다.
- API 응답 구조를 뷰에 직접 연결하지 말고 API·뷰모델·뷰 레이어를 분리하면 서버 응답이 달라져도 뷰모델 변환으로 영향을 제한할 수 있다.
- 테스트에서는 API나 외부 상태 같은 부수 효과를 모킹해 통제하고, 여러 컴포넌트가 결합된 테스트에서는 검증 범위를 명확히 정한다.
- 선행 개발은 디자인·마크업·API가 늦어지는 팀에 적합하지만, 기능 단위 계획과 테스트 도입에 대한 팀의 합의 및 추가 비용 검토가 필요하다.
소개
1년간 진행된 카카오맵 매장관리 프로젝트에서 TDD를 활용하여, 디자인, 마크업, API 없이도 프론트엔드 개발을 사전에 진행했던 경험을 바탕으로 새로운 프로세스를 제안합니다. 이를 통해 프론트엔드 개발을 보다 효율적으로 진행할 수 있는 방법론을 소개하고자 합니다. #front-end #TDD #Vue.js 카카오의 지도서비스 및 매장관리 서비스 프론트엔드 업무를 담당하고 있는 Cayde입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-34 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 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
ㄷㄷㄷ: Domain Driven Design과 적용 사례공유 / if(kakao)2022
컨퍼런스 if kakao
Legacy Server의 포팅을 위해 Domain Driven Design을 적용하여 MSA 화 한 사례를 공유합니다. #MSA #DDD 카카오 엔터테인먼트에서 백엔드 개발자로 일하고 있는 셜록입니다. git blame을 열면 혹시나 제가 짠 코드일까 두근두근하면서, 레거시 서버로 고통받았던 나날과 함께 backlog를 열심히 청소하는 중입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-37 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드
컨퍼런스 if kakao
API 테스트 주도 개발의 시작 / if(kakao)2022
컨퍼런스 if kakao
카카오에서는 애플리케이션 품질 향상을 위하여, API 테스트 자동화 및 성능 테스트를 보다 쉽게 지원하는 TestLAB을 개발하고 있습니다. API Test 자동화에 대해 설명하고, TestLAB이 어떻게 API Test 자동화를 지원하는지 소개합니다. 그리고 API Test 자동화를 넘어서 API 테스트 주도 개발을 지원하는 플랫폼으로 가는 로드맵을 공유합니다. #Test #RestAPI #TDD #CI/CD #API테스트 #테스트 #Test Automation 카카오 테스트플랫폼셀에서 개발을 하고 있는 호날두입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-24 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
소프트웨어 테스트 TDD
컨퍼런스 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 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업