[javascript] Parcel에서 GraphQL API를 호출하는 방법은?
Parcel은 간단한 설정만으로 모듈 번들링을 제공하는 웹 애플리케이션 번들러입니다. GraphQL은 데이터를 효율적으로 요청하고 응답받을 수 있도록 하는 쿼리 언어입니다. Parcel과 GraphQL을 함께 사용하여 웹 애플리케이션에서 GraphQL API를 호출하는 방법을 알아보겠습니다.
1. 패키지 설치
Parcel과 GraphQL을 사용하기 위해 아래 명령어를 실행하여 필요한 패키지를 설치합니다.
npm install parcel graphql
2. HTML 파일 생성
Parcel을 사용하기 위해 간단한 HTML 파일을 생성합니다. index.html 파일을 생성하고 아래의 내용을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel with GraphQL</title>
</head>
<body>
<div id="output"></div>
<script src="./index.js"></script>
</body>
</html>
3. JavaScript 파일 생성
index.js 파일을 생성하고 아래의 내용을 추가합니다.
import { graphql } from 'graphql';
const query = `
query {
hello
}
`;
const schema = `
type Query {
hello: String
}
`;
const rootValue = {
hello: () => 'Hello, GraphQL!'
};
graphql(schema, query, rootValue).then(result => {
document.getElementById('output').innerHTML = result.data.hello;
});
위 코드에서는 GraphQL 쿼리를 작성하고, 스키마를 정의하고, 루트 값을 설정한 후, graphql 함수를 호출하여 API를 호출하고 응답을 처리합니다.
4. 애플리케이션 빌드
아래 명령어를 실행하여 Parcel을 사용하여 애플리케이션을 빌드합니다.
npx parcel build index.html
5. 결과 확인
빌드가 완료되면 dist 폴더에 번들링된 파일이 생성됩니다. 이 파일을 웹 서버에 배포하고, 웹 브라우저에서 확인하면 GraphQL API에서 받아온 데이터가 정상적으로 출력될 것입니다.
이렇게 Parcel을 사용하여 GraphQL API를 호출하는 방법을 알아보았습니다. Parcel의 간편한 설정과 GraphQL의 효율적인 데이터 요청 기능이 함께 사용되어 개발 편의성을 높일 수 있습니다.