[웹 프론트엔드 개발] 프론트엔드와 DTO

- DTO는 일반적으로 백엔드에서 데이터를 전송하는 객체를 의미한다.

- 서비스 로직에 DTO를 전송하여 비즈니스 로직을 처리하게 된다.

- 만약 DTO 생성 시에 처리해야하는 로직이 있다면 이를 내부 메서드에서 구현하여 처리한다.

- 하지만 좀 더 복잡한 로직이 수반된다면 이는 서비스 로직으로 옮겨간다.

 

(DTO 예시)

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

class User {
  id: number;
  name: string;
  email: string;

  constructor(dto: UserDTO) {
    this.id = dto.id;
    this.name = dto.name;
    this.email = dto.email;
  }
}

 

- Next.js는 프론트엔드 프레임워크로 알려져 있다.

- Next.js의 pages-router, app-router는 모두 페이지를 기반으로 폴더가 구분되어 있다.

- 이는 페이지 기반의 모듈화를 수행하기 용이한 구조이다.

- 백엔드 개발의 모듈화 개념을 프론트엔드에서 Next.js의 페이지 폴더 구조에 녹이면 좀 더 효율적인 개발이 가능해질 것이다.

- 그 일환으로 DTO를 사용하여 프론트엔드에서 정의하는 데이터를 constructor(생성자 함수)로 만들어서 함수에 제공하거나, 컴포넌트의 props에 DTO를 제공한다.

 

(코드 예시)

function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// 사용 예시
const user = new User({ id: 1, name: 'John Doe', email: 'john.doe@example.com' });
<UserProfile user={user} />

- 이는 코드 중복을 제거할 수 있을 것이다.