DTO

DTO (Data Transfer Obeject)는 데이터 전송 객체를 의미한다.

주로 애플리케이션의 여러 계층 간에 데이터를 전송할 때 사용한다.

DTO는 데이터를 단순히 캡슐화하는 객체로 비즈니스 로직이 없고, 주로 데이터의 구조를 정의하는 역할이다.

 

특징

1. 단순 데이터 구조
   • DTO는 단순히 데이터를 담고 있는 객체로, 비즈니스 로직이 없다.
2. 계층 간 데이터 전송
   • 주로 서비스 계층과 프레젠테이션 계층 간에 데이터를 전송할 때 사용
3. 직렬화 가능
   • DTO는 네트워크를 통해 전송하거나 파일로 저장할 때 직렬화 가능
4. 읽기 전용
   • DTO는 주로 읽기 전용으로 사용, 데이터를 변경하는 로직은 포함되지 않는다.

정의

interface UserDTO {
  id: number;
  name: string;
  email: string;
  age: number;
}

 

DTO 사용

예를 들어 API 호출을 통해 사용자 정보를 가져오고 이를 프론트엔드에서 사용하고 싶을 때, DTO를 정의해서 데이터를 전송할 수 있다.

// 서버에서 DTO를 사용하여 데이터 전송
const getUser = async (userId: number): Promise<UserDTO> => {
  const response = await fetch(`/api/users/${userId}`);
  const data: UserDTO = await response.json();
  return data;
};

// 프론트엔드에서 DTO를 사용하여 데이터 처리
const displayUser = async (userId: number) => {
  try {
    const user = await getUser(userId);
    console.log(`User Name: ${user.name}`);
    console.log(`User Email: ${user.email}`);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};

displayUser(1);

 

DTO의 장점

1. 명확한 데이터 구조
   • DTO를 사용하면 데이터 구조가 명확해지고, 코드의 가독성이 좋아진다.
2. 유효성 검사
   • 데이터를 전송할 때 DTO를 사용하여 유효성 검사를 쉽게 수행할 수 있다.
3. 변경 용이성
   • 데이터 구조가 변경되더라도 DTO를 통해 각 계층 간의 영향을 최소화할 수 있다.

 

마지막으로 내가 작성한 코드에 적용을 해보았다.

import instance from '@/lib/apis/axios';

interface UsersPostDataType {
  email: string;
  name: string;
  pw: string;
  age: number;
  gender: string;
}

interface UserDTO {
  id: number;
  email: string;
  name: string;
  age: number;
  gender: string;
}

const transformToUserDTO = (data: any): UserDTO => {
  //나중에 필요한 정보 보고 수정
  return {
    id: data.id,
    email: data.email,
    name: data.name,
    age: data.age,
    gender: data.gender,
  };
};

export const usersPost = async (
  usersPostData: UsersPostDataType
): Promise<UserDTO> => {
  try {
    const res = await instance.post('/users', usersPostData);
    const userDTO = transformToUserDTO(res.data);
    return userDTO;
  } catch (error) {
    throw new Error('유저 생성 에러: ' + (error as Error).message);
  }
};

 

아직 더 수정해야 할 코드지만 적용을 해봤다는 것에 의미가 있는 것 같다.