프론트엔드에서 도메인 객체는 무엇일까?

프론트엔드 개발에서 "도메인 객체"라는 용어는 백엔드 개발에서와는 약간 다른 의미를 갖습니다. 주로 프론트엔드에서는 사용자 인터페이스(UI)와 관련된 개념으로 사용됩니다.

프론트엔드에서의 도메인 객체는 일반적으로 사용자가 애플리케이션에서 작동하는 데 사용하는 데이터나 기능을 캡슐화하는 객체입니다. 이 객체들은 주로 UI 컴포넌트와 관련된 데이터를 처리하고 조작하는 데 사용됩니다.

예를 들어, 웹 애플리케이션에서 사용자의 로그인 정보나 프로필 정보를 처리하는 객체는 프론트엔드 도메인 객체로 볼 수 있습니다. 또한 사용자가 작성한 데이터를 서버에 전송하기 전에 유효성을 검사하거나 형식을 변환하는 데 사용되는 객체도 여기에 포함될 수 있습니다.

프론트엔드 개발에서의 도메인 객체는 주로 클라이언트 측 JavaScript로 작성되며, 주로 상태 관리 라이브러리나 프레임워크(예: React, Vue.js, Angular 등)와 함께 사용됩니다. 이러한 객체들은 사용자 인터페이스와 관련된 로직을 캡슐화하여 코드를 구조화하고 유지보수성을 높이는 데 도움이 됩니다.

• 도메인 객체 예시코드 (카트 데이터를 다룸)

• 도메인 객체는 리액트와 상관없는 비즈니스 로직 및 순수 함수로 구성

  • 날짜 계산

  // Cart.js
  
  class Cart {
    constructor(data) {
      this.items = data.items || [];
      this.total = data.total || 0;
    }
  
    addItem(item) {
      this.items.push(item);
      this.total += item.price;
    }
  
    removeItem(itemId) {
      const index = this.items.findIndex(item => item.id === itemId);
      if (index !== -1) {
        const removedItem = this.items.splice(index, 1)[0];
        this.total -= removedItem.price;
      }
    }
  
    getTotal() {
      return this.total;
    }
  
    getItems() {
      return this.items;
    }
    // 도메인 객체 생성
    static createCartDomainObject(data : CartItemDto[]){
  	  return new Cart(data)
    }
  }
  
  export default Cart;
  
  

<aside> 👉🏼

이 도메인 객체를 어떤 디렉토리에 넣을것인가??

</aside>

훅 (클라이언트 state + 도메인객체 + usecase 다룸)

• 실제 클라이언트에서 다루기 위한 state가 존재 도메인 객체의 getter로 매핑
• client state와 도메인객체의 메서드들로 ⇒ 유저의 useCase를 만듬.

// useCart

// 도메인 객체를 반환
const { data : domainObject } = useGetCartList({select : createCartDomainObject});

const [clientCartData, setClientCartData] = useState<CartItemDto[]>([]);

// 클라이언트 데이터로 매핑
useEffect(() => {
	setClientCartData(domainObject.getItem)
},[])

// update cart usecase
const updateCart(id : number){
	setClientCartData((prevCart) => domainObject.updateCart(prev, id))
}

// delete cart usecase
const deleteCart(id:number){
	// state + domain객체 메서드
}

return {
	cartData : clientCartData,
	updateCart,
	deleteCart
}

Fetcher : 실제 카트데이터를 가져옴 + react query or other

• 카트 데이터를 가져오는 fetcher이다.
• 이는 react-query가 될수있고 단지 axios가 될수 있고, SWR이 될수도 있고, fetch관련 라이브러리가 가능
  • useReactQueryFetcher
  • useAxiosFetcher
  • useSWRFetcher
• 에러처리는 어디서?? 여기서? or 상위로 throw

function useReactQueryFetcher(){
	
	return 
}