NestJS로 오픈 API 데이터를 프론트엔드로 전달하기

백엔드에서 오픈 API 데이터를 정제하고 이를 프론트엔드에 전달하는 방법을 알아보자. 많은 개발자들이 방대한 오픈 API 데이터를 다루면서, 이를 어떻게 효과적으로 처리할지 고민하곤 한다. 이번 포스팅에서는 백엔드에서 데이터를 정제하는 이유와 방법을 구체적으로 설명하고, 이를 통해 프론트엔드에 보다 효율적으로 데이터를 전달하는 방법을 살펴보겠다.

서론

오픈 API는 외부 서비스와의 통신을 통해 다양한 데이터를 가져올 수 있는 강력한 도구이다. 하지만 방대한 데이터를 효과적으로 관리하고 클라이언트에 전달하는 것은 큰 도전 과제다. 특히, 모든 정보를 데이터베이스에 저장하기 어렵고, 필요한 정보만 정제하여 클라이언트에 제공하는 것이 중요하다. 이번 포스팅에서는 백엔드에서 데이터를 정제하는 이유와 그 방법을 구체적으로 알아보겠다.

주제

백엔드에서 오픈 API 데이터 정제의 필요성

1. 보안 강화: 민감한 정보가 클라이언트로 노출되지 않도록 한다.
2. 성능 향상: 네트워크 트래픽을 줄이고, 클라이언트의 데이터 처리 부담을 줄인다.
3. 일관성 유지: 여러 클라이언트에서 일관된 데이터 형식을 보장한다.
4. 유지 보수성: 데이터 모델 변경 시, 백엔드에서 한 번에 변경할 수 있어 유지 보수가 용이하다.

예제

1. 백엔드에서 오픈 API 데이터를 정제하는 방법

백엔드에서 데이터를 정제하여 필요한 정보만 프론트엔드에 전달하는 예제를 살펴보자. NestJS를 사용하여 구현된 예제를 통해 백엔드에서 데이터를 어떻게 정제하는지 알아보겠다.

// 좋아요한 장소 모델
@Entity()
export class LikedPlace {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  userId: number;

  @Column()
  placeId: number;
}

// 서비스
@Injectable()
export class PlacesService {
  constructor(
    @InjectRepository(LikedPlace)
    private likedPlaceRepository: Repository<LikedPlace>,
  ) {}

  async getLikedPlaces(userId: number) {
    const likedPlaces = await this.likedPlaceRepository.find({ where: { userId } });

    const detailedPlaces = await Promise.all(
      likedPlaces.map(async (place) => {
        const apiResponse = await fetch(`https://api.example.com/places/${place.placeId}`);
        const placeDetails = await apiResponse.json();
        return {
          ...place,
          ...placeDetails,
        };
      })
    );

    return detailedPlaces;
  }
}

// 컨트롤러
@Controller('places')
export class PlacesController {
  constructor(private readonly placesService: PlacesService) {}

  @Get('liked')
  async getLikedPlaces(@Query('userId') userId: string) {
    return this.placesService.getLikedPlaces(parseInt(userId));
  }
}

2. 프론트엔드에서 백엔드 API를 사용하는 방법

React Query를 사용하여 백엔드에서 제공하는 API를 호출하고, 데이터를 가져오는 방법을 살펴보자.

// src/hooks/useLikedPlaces.js
import { useQuery } from 'react-query';

const fetchLikedPlaces = async (userId) => {
  const response = await fetch(`/places/liked?userId=${userId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

export const useLikedPlaces = (userId) => {
  return useQuery(['likedPlaces', userId], () => fetchLikedPlaces(userId));
};

// src/components/LikedPlaces.js
import React from 'react';
import { useLikedPlaces } from '../hooks/useLikedPlaces';

const LikedPlaces = ({ userId }) => {
  const { data, error, isLoading } = useLikedPlaces(userId);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Liked Places</h1>
      <ul>
        {data.map((place) => (
          <li key={place.id}>
            {place.name} - {place.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default LikedPlaces;

느낀점과 결론

백엔드에서 오픈 API 데이터를 정제하는 것은 보안, 성능, 일관성, 유지 보수성 측면에서 매우 중요하다. 이번 포스팅에서 소개한 방법을 통해 방대한 데이터를 효율적으로 관리하고, 프론트엔드에 필요한 정보를 효과적으로 전달할 수 있을 것이다. 이러한 접근 방식을 통해 더욱 효율적인 개발 환경을 구축해 보자.

참고 자료:

• NestJS 공식 문서
• React Query 공식 문서