백엔드 개발 일지

백엔드 개발에서 REST API는 오랜 시간 동안 널리 사용되어 왔습니다. 그러나 다양한 클라이언트 애플리케이션의 요구를 충족하기 위해 GraphQL이 대안으로 떠오르고 있습니다. 이번 포스트에서는 GraphQL을 사용하여 REST API를 대체하는 방법에 대해 단계별로 알아보겠습니다.

GraphQL 개요

GraphQL은 페이스북에서 개발한 쿼리 언어로, 클라이언트가 필요한 데이터만 요청할 수 있도록 설계되었습니다. REST API와 비교하여 다음과 같은 장점이 있습니다.

유연한 데이터 요청: 클라이언트는 필요한 필드만 요청하여 불필요한 데이터를 줄일 수 있습니다.
단일 엔드포인트: 모든 요청은 하나의 엔드포인트로 처리되므로, 여러 URL을 관리할 필요가 없습니다.

개발 환경 설정

이 튜토리얼에서는 Node.js와 Express를 사용하여 GraphQL 서버를 구축합니다. 또한, graphql과 express-graphql 패키지를 사용합니다.

Node.js 및 패키지 설치

mkdir graphql-api
cd graphql-api
npm init -y
npm install express graphql express-graphql

서버 설정

index.js

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 스키마 정의
const schema = buildSchema(
    type Query {
        hello: String
        user(id: Int!): User
    }

    type User {
        id: Int
        name: String
        age: Int
    }
);

// 데이터
const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
];

// 리졸버 정의
const root = {
    hello: () => 'Hello, World!',
    user: ({ id }) => users.find(user => user.id === id),
};

// Express 서버 설정
const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true, // GraphiQL UI 사용
}));

app.listen(4000, () => {
    console.log('서버가 http://localhost:4000/graphql 에서 실행 중입니다.');
});

서버 실행

node index.js

이제 http://localhost:4000/graphql 주소를 통해 GraphiQL UI에 접근할 수 있습니다. 여기서 직접 쿼리를 실행해 볼 수 있습니다.

GraphQL 쿼리 작성하기

서버가 실행되면 GraphiQL에서 아래와 같은 쿼리를 실행하여 데이터를 요청해 볼 수 있습니다.

{
    hello
    user(id: 1) {
        name
        age
    }
}

위 쿼리를 실행하면 다음과 같은 응답을 받을 수 있습니다.

{
    "data": {
        "hello": "Hello, World!",
        "user": {
            "name": "Alice",
            "age": 25
        }
    }
}

데이터 변형하기

GraphQL은 데이터를 가져오는 것뿐만 아니라, 데이터를 생성, 수정 및 삭제하는 데도 활용됩니다. 아래와 같은 Mutation을 추가해 봅시다.

스키마 수정

const schema = buildSchema(
    type Query {
        hello: String
        user(id: Int!): User
    }

    type Mutation {
        createUser(name: String!, age: Int!): User
    }

    type User {
        id: Int
        name: String
        age: Int
    }
);

리졸버 수정

let nextId = 3; // 다음 유저 ID

const root = {
    hello: () => 'Hello, World!',
    user: ({ id }) => users.find(user => user.id === id),
    createUser: ({ name, age }) => {
        const newUser = { id: nextId++, name, age };
        users.push(newUser);
        return newUser;
    },
};

Mutation 쿼리 실행

서버를 다시 실행한 후 아래와 같은 쿼리를 사용하여 새로운 유저를 생성해 볼 수 있습니다.

mutation {
    createUser(name: "Charlie", age: 28) {
        id
        name
    }
}

이 쿼리를 실행하면 다음과 같은 응답을 받을 수 있습니다.

{
    "data": {
        "createUser": {
            "id": 3,
            "name": "Charlie"
        }
    }
}

마무리

이번 포스트에서는 GraphQL을 사용하여 REST API를 대체하는 방법을 살펴보았습니다. GraphQL의 유연성과 강력한 데이터 요청 기능을 활용하면 클라이언트 애플리케이션의 요구를 보다 효율적으로 충족할 수 있습니다. 이 튜토리얼을 통해 GraphQL의 기본적인 사용법을 익혔으니, 이제 실제 프로젝트에 적용해 보시기 바랍니다. GraphQL의 매력을 느끼고 더욱 발전시켜나가세요!

GraphQL을 이용한 REST API 대체 구축하기 – 단계별 튜토리얼

GraphQL 개요

개발 환경 설정

GraphQL 쿼리 작성하기

데이터 변형하기

마무리