본문 바로가기
카테고리 없음

프론트 TDD 링크드인

by 안뇽! 2024. 12. 26.
반응형

출처

 

LinkedIn Jiyeon Kim 페이지: 프론트엔드는 의존성이 강하다. 프론트엔드는 기획, 서버, 디자인에 모

프론트엔드는 의존성이 강하다. 프론트엔드는 기획, 서버, 디자인에 모두 의존적이다. 각 단계의 작업이 끝나지 않으면 프론트엔드 개발을 시작하기 쉽지않고, 앞단의 변경사항에 대응해야할

kr.linkedin.com

 

프론트엔드는 의존성이 강하다.

프론트엔드는 기획, 서버, 디자인에 모두 의존적이다. 각 단계의 작업이 끝나지 않으면 프론트엔드 개발을 시작하기 쉽지않고, 앞단의 변경사항에 대응해야할 뿐더러 일정의 영향을 있는 그대로 받게된다.

특히 기획이 완료되고 난 이후 서버와 디자인 작업을 기다리는 프론트엔드는 환경 세팅이나 유틸 작업정도밖에 할 일이 없고, 나 또한 그런 시간을 보내며 그 이상의 고민을 하지않았다. 그것이 당연하다는 듯 관성적인 태도를 취했다.

그리고 어제 카카오 테크밋에서 선호님의 세션을 통해 이 문제를 해결하기 위한 시도를 알게되었다.

TDD를 이용해 디자인 없이, API 개발 없이 프론트엔드 개발을 시작하는 것이다. 이미 기획이 완료된 시점이고, 어떤 기능들이 필요한지 우리는 알고 있다는 것을 기억하자.

단위 테스트는 두가지에 집중했다.
1. 테스트 선택자를 이용해 props만 받는 컴포넌트 렌더링 여부
2. FE만의 viewModel 레이어를 구현해 view를 잘 나타내는지 여부

1번을 통해 디자인이 나오면 마크업 작업만 올리면 되고, 2번을 통해 API가 나오면 API model 레이어를 생성해서 viewModel에 붙여주기만 하면된다. 선호님은 이 방법을 통해 정략적인 성과 지표를 도출해냈다고 하셨다.

모든 상황에서 이 방법이 유효하지 않을 수 있지만 이번 세션을 통해 나의 관성적인 태도를 반성할 수 있는 계기가 되었고, graphQL에 대한 흥미도 생겼다.

여하튼 자신이 처한 상황에 굴복하지말고 끊임없이 해결책을 고민하는 것이 개발자인 것을 잊지말아야 한다.

반응형