[쇼핑몰 프로젝트 4일차] FE-BE 협업에 대한 고민 2 - test api 사용
고민한 부분
이전에도 FE-BE간 협업을 하며 어떻게 해야 매끄럽게 일을 진행할 수 있을지 많은 고민을 했다.
그 결과 일단 만들어보고 본다는 결론을 내렸었는데, 이건 극초반이어서 가능한 일이었다.
제품 상세 페이지를 만들어야 했는데, 여기서 난관에 봉착했다.
사이트를 처음 만들어봐서 이런 순서로 생각할 필요가 없을수도 있지만, 내가 생각한 제품 상세 페이지 기작은 다음과 같다.
제품 상세 페이지 기작
- 메인 페이지의 카테고리나 상품 목록에서 상품 클릭
- 클릭 시 해당 상품 id 참조한 라우터로 연결
- 해당 상품에 맞는 상세 페이지가 뜸
장바구니 추가버튼을 누르면 이 상품이 장바구니에 추가됨(백에 장바구니 데이터를 추가해줘야됨) or결제하기버튼을 누르면 결제 페이지로 이동(마찬가지로 뭘 살건지 결제 데이터를 추가해줘야됨)
문제
여기서 다른 팀원이 맡은 카테고리와 상품 목록 페이지가 아직 구현이 완성이 안 되어서 상세 페이지 제작을 하다 막히게 되었다.
아무 데이터가 없으니 화면에 표시되는 것도 없고 버튼을 눌렀을 때에도 데이터들이 필요해서 더 이상 진도를 나갈 수가 없었기 때문이다.
해결
최대한 혼자서 뭔가 해볼 수 있는 방법을 생각해보다가, 여기선 백엔드 팀원들의 힘이 필수불가결하다고 생각해서 도움을 청하기로 했다.
상품 db에 테스트용 데이터를 임의로 하나 불러와서 거기에서 남은 기능들을 구현하고, 나중에 실제 데이터로 적용되게 바꾸고 경로를 수정하면 되지 않을까?
라는 생각이 들었기 때문이다.
백엔드에 상황을 설명하고 테스트 데이터를 불러올 수 있도록 api 추가를 요청했다.
백엔드 측에선 흔쾌히 테스트용 api를 만들어 전달해주었다.
그렇게 테스트 api를 이용해 남은 기능들을 구현할 수 있게 되었다.
느낀점
일단 만들어보고 본다 단계를 넘었을 때의 난관이었고, 중간 페이지를 작업할 때 데이터가 없어서 쩔쩔매는 상황은 누구나 맞닥뜨릴 수 있는 것 같다.
이 때 테스트 데이터를 요청해서 작업하는건 옳은 판단이었다고 생각한다.
테스트 데이터로 바로 앞뒤 페이지와 연결을 해서 페이지간 이동을 하며 데이터나 사이트가 작동하는 모습을 테스트하는 것도 쉬웠고, 이미 유저 데이터를 만들어서 전달해봤기 때문에 다른 데이터들도 형식만 맞추어 비슷한 방식으로 짜면 되었기 때문이다.
다만 내가 간과한 부분은, 내가 한 번 해본 것에 익숙해진 것처럼 다른 팀원들도 마찬가지라는 것이다.
나는 백엔드 팀원들이 너무 바빠보여서 부탁하기까지 눈치가 보였는데, 막상 요청해보니 이미 만들어진 api에서 샘플 데이터를 떼어주는 것뿐이었기에 대략 10분만에 테스트 데이터를 받을 수 있었다.
만일 프로젝트 극초반에 이 방법을 쓰려했다면 난감했을 것이다. “아직 데이터 구조도 안짰는데 달라고요?” 라는 반응이 나왔을 것이다.
나도 마찬가지로 극초반에 “요 페이지 데이터 좀 넘겨주시겠어요?” 라는 말을 들었다면 “아직 요소도 다 추가 안했는데요!?” 라고 곤란해했을 것이다.
FE와 BE가 서로 뭘 하고 있는지, 어디까지 무리가 없는 선에서 요청할 수 있는지 정확히 파악하고 적당한 시기에 서로에게 도움을 요청하는 것이 중요하다는 것을 깨달았다.
꿀팁?
개발 과정중에 BE팀에서 데이터가 CRUD가 발생할 때마다 데이터를 확인할 수 있도록 콘솔로 데이터 모양을 찍어주고 있다.
나는 이번 프론트엔드 업무에서 요소와 데이터를 연결해서 객체를 만들어 넘겨주는 부분도 하고 있는데, 이 때 기능별로 다 비슷비슷해보이는 데이터들이지만 미묘하게 모양이 다른 것이 헷갈렸다.
그리고 코드를 일일이 찾아보기엔 슬슬 폴더 수도 많아지고 코드 내에서 찾기가 번거롭게 느껴졌다.
그래서 따로 메모장 같은 프로그램에 각 페이지별로 필요한 데이터 스키마와 내 페이지에서 참조할 요소 class, id 등을 정리해서 기록해뒀다.
그러면 일일이 찾아다닐 필요 없이 그 메모만 보고 작성하면 돼서 코드를 짜는 속도가 빨라졌다.
처음엔 이걸 다 미리 정하고 시작하면 빠르게 할 수 있지 않나? 생각했지만 만들다보면 세세한 내용은 금방금방 바뀌기도 하고, 변수명 또한 더 적절한 명칭으로 자주 바뀌어서 아직까지 이 정도 규모면 그냥 내가 따로 적어서 보는게 더 빨라서 이번 프로젝트 동안엔 이렇게 작업할 것 같다.
Leave a comment