GraphQL 서버 구축 기초: Express와 함께 시작하는 방법
웹 개발의 혁신이 끊임없이 이어지는 가운데, GraphQL은 데이터를 효율적으로 관리하고 클라이언트와의 통신을 개선하는 데 큰 역할을 하고 있어요. API를 설계하고 구현하는 데 있어 GraphQL은 REST API의 한계를 극복할 수 있는 훌륭한 대안으로 주목받고 있어요. 이번 글에서는 GraphQL 서버를 Express와 함께 구축하는 방법에 대해 자세히 알아보도록 할게요.
GraphQL이란 무엇인가요?
GraphQL은 페이스북이 만든 오픈 소스 쿼리 언어로, 클라이언트가 필요한 데이터 구조를 직접 정의할 수 있게 해줘요. 데이터 요청을 하나의 요청으로 통합할 수 있어 서버와의 통신 비용을 줄이는 데 큰 도움이 돼요.
GraphQL의 장점
- 효율적인 데이터 로딩: 필요한 데이터만 요청할 수 있어, 오버패칭이나 언더패칭 문제를 해결할 수 있어요.
- API 버전 관리의 필요 없음: 클라이언트가 필요한 필드를 선택하기 때문에 서버의 변경이 자유로워요.
- 자세한 타입 정의: 스키마를 통해 명확한 타입을 정의할 수 있어, 데이터 구조가 안정적이고 예측 가능해요.
Express와 GraphQL 통합하기
이제 Express 서버를 구축하고 GraphQL을 사용하는 방법에 대해 알아볼게요.
기본 Express 서버 설정
먼저, Express 서버를 설정하는 기본적인 과정을 살펴보도록 해요. 아래의 단계를 따라하면 쉽게 Express 서버를 구축할 수 있어요.
- Node.js와 NPM을 설치하세요.
- 프로젝트 디렉토리를 만들고 이동한 뒤, 아래 명령어로 패키지를 초기화하세요.
bash mkdir my-graphql-server cd my-graphql-server npm init -y- Express와 GraphQL 관련 라이브러리를 설치하세요.
bash npm install express express-graphql graphql
Express 서버 구현
이제 server.js 파일을 만들어 Express 서버를 구현해볼까요.
// GraphQL 스키마 정의 const schema = buildSchema(
type Query {
hello: String
}
);
// 루트 리졸버 const root = { hello: () => { return '안녕하세요, GraphQL!'; }, };
const app = express();
// GraphQL 엔드포인트 설정 app.use('/graphql', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true, }));
app.listen(4000, () => { console.log('서버가 4000번 포트에서 실행 중입니다.'); });
서버 실행하기
이제 터미널에서 서버를 실행해볼까요.
bash
node server.js
브라우저를 열고 http://localhost:4000/graphql에 접속하면 GraphiQL UI를 통해 쿼리를 실행할 수 있어요. 아래와 같은 쿼리를 입력해보세요.
graphql
{
hello
}
이 쿼리를 실행하면 "안녕하세요, GraphQL!"이라는 응답을 받을 수 있어요.
GraphQL 스키마 확장하기
이제 기본적인 쿼리를 설정했으니, 더 복잡한 데이터 모델을 사용해볼까요.
객체 타입 추가
예를 들어, 사용자 정보를 갖는 User 타입을 추가해볼게요.
``javascript
const schema = buildSchema( type User { id: ID name: String age: Int }
type Query { user(id: ID): User } `);
이제 사용자 정보를 반환하는 리졸버를 추가해봐요.
const root = { user: ({ id }) => { return users.find(user => user.id === id); }, };
쿼리 실행
이제 클라이언트에서 아래와 같은 쿼리를 실행할 수 있어요.
graphql
{
user(id: "1") {
name
age
}
}
이 쿼리에 대한 응답은 다음과 같아요.
json
{
"data": {
"user": {
"name": "홍길동",
"age": 30
}
}
}
요약
| 항목 | 설명 |
|---|---|
| GraphQL | 효율적인 API 데이터 쿼리 언어 |
| Express | Node.js 기반의 웹 애플리케이션 프레임워크 |
| 스키마 | 데이터의 구조를 정의하는 GraphQL 요소 |
| 리졸버 | 쿼리를 처리하여 데이터를 반환하는 함수 |
| 쿼리 | 클라이언트가 서버에 요청하는 데이터 형식 |
결론
이번 포스트를 통해 GraphQL 서버를 Express와 함께 구축하는 방법에 대해 알아보았어요. GraphQL은 효율적인 데이터 관리를 보여주는 강력한 도구예요. 이를 통해 API의 가능성을 확장할 수 있죠.
이제 여러분도 GraphQL을 사용해 보세요! 실제로 프로젝트에 적용해 본다면, 많은 이점을 경험할 수 있을 거예요. 여러분의 데이터 요청 방식이 어떻게 변화하는지 기대해봅시다!
자주 묻는 질문 Q&A
Q1: GraphQL이란 무엇인가요?
A1: GraphQL은 페이스북이 만든 오픈 소스 쿼리 언어로, 클라이언트가 필요한 데이터 구조를 직접 정의할 수 있게 해줍니다.
Q2: Express와 GraphQL을 통합하는 방법은 무엇인가요?
A2: Express 서버를 설정한 후, `express-graphql` 및 `graphql` 패키지를 설치하고 GraphQL 스키마와 리졸버를 정의하여 통합합니다.
Q3: GraphQL 쿼리를 실행하는 방법은 무엇인가요?
A3: GraphiQL UI에서 쿼리를 입력하고 실행하면 서버가 정의한 리졸버에 따라 데이터를 반환합니다.