글을 작성하게 된 계기
프론트엔드 두 명, 백엔드 두 명이 함께 웹앱 프로젝트를 진행 중이었다. 나는 백엔드의 역할로 참여하고 있었다.
하지만 어딘가 구멍이 뚫려있는 느낌.
항상 매끄럽게 진행되지 못했고 배워야할 것이 많았다.
프론트엔드 친구 중 A가 나에게 토로하듯 이야기했던 말.
"아직 백엔드가 무슨 일을 하는지 모르겠어."
게시글 상세 조회 부분을 구현하며 힘들어하고 좌절하던 A의 모습.
백엔드 친구 B가 게시글 상세 조회 부분을 구현하지 않던 모습.
나 혼자만의 비공식적 코드 리뷰를 하던 중 우리의 큰 구멍을 발견했다.
게시판 목록 페이지에서 axios를 통해 모든 게시글의 정보를 react의 전역 변수에 저장한 후, 글 상세 조회 페이지로 넘어갈 때 해당 메모리를 사용해 글 정보를 출력하던 A의 코드.
이 코드를 읽는 순간 친구들의 모든 말과 행동들이 퍼즐처럼 들어맞았고, 우리의 큰 구멍을 해결하고자 생각을 정리했다.
💡 프론트엔드와 백엔드의 역할을 제대로 정의해야겠구나.
프론트엔드 A 친구가 힘들어했던 시간들, 어찌저찌 구현에 성공했던 노고를 떠올리니 차마 그 친구의 모든 코드를 부정할 수가 없었다.
따라서 나는 이렇게 이야기했다.
정리
우리가 프로젝트를 시작하면서 프론트 팀과 백 팀의 역할을 제대로 정의하지 않아, 현재 우리가 통신하는 방식이 부적절하다고 생각된다.
프로트엔드만의 프로젝트라면 A의 구현 방식이 맞겠지만, 지금 우리는 데이터베이스라는 고성능 저장 공간이 있고 해당 공간을 관리하는 백엔드 팀이 있다. 이러한 고효율의 공간과 인력을 활용하지 않고 react에서의 메모리를 사용하는 것은 큰 비용 낭비이며 메모리 낭비이다.
프론트엔드인 너희가 해야하는 일은 사용자에게 우리의 서비스를 시각화하는 일이다. 그리고 백엔드인 우리가 해야하는 일이 너희가 필요로 하는 데이터를 제공해주는 것이다. 데이터를 관리하고 너희가 데이터를 사용할 수 있게 하는 것이 우리의 역할이다. 이 경우에 사용되는 것이 내가 이전에 소개했던 axios이며, 클라이언트와 서버 간의 통신 방식이다.
알기 쉽게 설명하자면, A가 구현했던 react의 전역 변수 역할을 우리의 데이터베이스가 한다고 생각하면 된다. DB를 우리 모두의 전역 변수라고 생각하자.
너희는 사용자에게 보여지는 것에 집중하고 데이터가 필요할 때마다 우리에게 요청하면 된다. 그 이후의 일은 신경쓰지 않아도 된다. 우리가 알아서 처리해 너희에게 넘겨줄 것이다. 우리를 마구 부려먹어라.
즉, A가 react의 전역 변수를 이용해 구현했던 글 상세 조회 기능을 데이터베이스를 이용해 구현하자면, 해당 페이지에서 axios를 통해 우리에게 해당 글의 제목, 글쓴이, 내용 등 필요한 데이터를 요청하면 된다.
결론
위 내용을 공유하고 나니 프론트엔드와 백엔드 간의 통신이 훨씬 수월해졌고, 친구 A도 부담을 덜게 되었다.
프로젝트를 처음 시작할 때 그 누구도 프론트엔드와 백엔드의 역할을 정의해준 적이 없었다. 백엔드는 페이지를 구현하기 위해 자연스레 프론트엔드 분야도 함께 학습하지만, 프론트엔드는 프론트엔드만으로 웹을 구현하는 경우가 일반적이다. 위 내용은 내가 스스로 spring을 통해 게시판 CRUD를 구현해보며 터득한 내용으로, 완전한 설명이라고 단정지을 순 없지만 우리의 팀 프로젝트 방향을 잡는 데에 크게 기여했다고 생각한다.
