프리온보딩 프론트엔드 4회차

뒤늦은 정리...

 

React 다운 코드

React가 뭔가? 바로 UI Renderer이다. 물론 React가 상태 관리도 해주고 다른 여러 역할들도 할 수 있다. 하지만 기본적인 역할을 생각하며 코드를 작성할 때 비즈니스 로직과 UI 로직을 분리한 것처럼 "React 없이 작성할 로직부터 고민해 보자"라는 목표를 가져보도록 하자.

 

Core > Adapter > React

일을 하다 보면 도구를 사용하는 것이 중요하다고 생각이 될 수 있다. 하지만 도구 그 자체를 중요시하기보다 상황에 맞게 도구를 잘 사용할 수 있는 숙련도가 중요하다. 도구뿐만이 아니라 코드를 작성할 때에도 생각해 본다면, 먼저 사용자가 어떻게 사용호작용할지 코드로 작성하는 일부터 시작해야 한다. 즉, "해결해야 하는 문제의 도메인을 모델링 하는 작업부터 시작이다".

 

프론트는 웹뿐만이 아닌 모바일, 게임 등의 분야에서도 비슷한 업무를 진행하기 때문에 동일한 문제에 대해서 고민하고 있다. 크게 보는 경우 백까지도 비슷한 고민을 하고 있다고 볼 수 있다. 모바일에서 예를 들자면, 자주 사용되는 패턴인 MVVM 패턴에서의 ViewModel과 도메인 레이어를 말할 수 있다.

 

React를 사용해 개발하는 과정은 뷰 다음 로직 순서로 볼 수 있다. 하지만 그 반대로 한다면 어떨까?(아직 반대로 한다는 말을 이해를 못함) 반대로 작업하게 되면 비즈니스 로직에 대한 SSOT(진실한 정보의 원천)를 달성할 수 있고, 새로운 팀원의 합류 시 혼란 없이 빠른 온보딩이 가능해지고(=코드의 가독성이 올라간다), 테스트를 작성하기 쉬워진다는 장점이 있다.

 

Core를 UI에서 분리하고 Adaptor로 연결해라. 이 말은 비즈니스 로직을 작성할 경우 하나의 UI가 아닌 다양한 UI에서 사용될 수 있도록 설계하고 개발하라는 말이다. 쉽게 말하면 어떤 환경에서 로직을 가져다가 사용해도 문제가 없도록 코드를 작성하라는 의미이다.

+a)

• 문서(기획서)를 목적으로 일하지 말고, 도구로만 사용해라. 사람이 작성하는 문서이므로 항상 완벽할 수 없다. 그렇기에 너무 맹목적으로 문서에 빠지지 말고 적당히 사용하는 것이 중요하다.
• 테스트가 어렵다면? 테스트를 하려고 하는 부분이 UI와 연결되어 있는지 확인해 봐라. UI는 변하기 쉬운 대상이므로 테스트하기 쉽지 않다.
• 코드를 작성할 때 라이브러리가 제공해주는 것처럼 상상하고 작성하라. 아무 생각 없이 코드를 작성하지 말고 라이브러리에서 제공해 주는 것처럼 짜려고 노력하다 보면 좋은 코드를 작성할 수 있다.

추상화 벽 추가하기

작은 단위의 프로젝트라면 커스텀을 훅만 사용하는 것이 크게 문제가 없겠지만, 큰 프로젝트라면 인터페이스를 통해 추상화벽을 만들어 관리하면 추후 유지보수에도 더 많은 도움이 될 수 있다. React를 UI 구축을 위한 라이브러리라는 것을 염두에 두고 개발하는 것이 중요하다.(많이 이해하지 못했지만 복습을 통해 조금씩이라도 이해를 늘려가면 좋은 부분이다)

 

성장이란 의식적인 노력과 피드백이 만들어 낸다.

 

기타

레거시, SSOT, 일급 엔티티/유스케이스/뷰모델, 컴포넌트 밖 ;let 선언, FEConf, 도메인, 넛지, zendesk

학습 2024.12.16

느낀점 프론트엔드도 충분히 고민할 부분이 많이 있고, 아직 배울 부분이 너무 많다. 또한 언젠가 나도 강사님처럼 나의 지식을 다른 사람들에게 공유할 수 있는 날이 오면 좋겠다.