← 홈

◼️

⌘K
🤖
Claude Code AI 도구
🤗
Hugging Face AI 도구
🦜
LangChain AI 도구
🧠
Keras AI 도구
🦙
Ollama AI 도구
🐍
Python 프로그래밍 언어
🟨
JavaScript 프로그래밍 언어
🔷
TypeScript 프로그래밍 언어
⚛️
React 프로그래밍 언어
🐹
Go 프로그래밍 언어
🦀
Rust 프로그래밍 언어
📊
MATLAB 프로그래밍 언어
🗄️
SQL 프로그래밍 언어
⚙️
C/C++ 프로그래밍 언어
Java 프로그래밍 언어
🟣
C# 프로그래밍 언어
🍎
Swift 프로그래밍 언어
🟠
Kotlin 프로그래밍 언어
Next.js 프로그래밍 언어
💚
Vue.js 프로그래밍 언어
🔥
Svelte 프로그래밍 언어
🎨
Tailwind CSS 프로그래밍 언어
💚
Node.js 프로그래밍 언어
🌐
HTML 프로그래밍 언어
🎨
CSS/SCSS 프로그래밍 언어
🐘
PHP 프로그래밍 언어
💎
Ruby 프로그래밍 언어
🔴
Scala 프로그래밍 언어
📊
R 프로그래밍 언어
🎯
Dart 프로그래밍 언어
💧
Elixir 프로그래밍 언어
🌙
Lua 프로그래밍 언어
🐪
Perl 프로그래밍 언어
🅰️
Angular 프로그래밍 언어
🚂
Express.js 프로그래밍 언어
🐱
NestJS 프로그래밍 언어
🛤️
Ruby on Rails 프로그래밍 언어
◼️
GraphQL 프로그래밍 언어
🟪
Haskell 프로그래밍 언어
💚
Nuxt.js 프로그래밍 언어
🔷
SolidJS 프로그래밍 언어
htmx 프로그래밍 언어
💻
VS Code 개발 도구
🧠
PyCharm 개발 도구
📓
Jupyter 개발 도구
🧠
IntelliJ IDEA 개발 도구
💚
Neovim 개발 도구
🔮
Emacs 개발 도구
🔀
Git DevOps & CLI
🐳
Docker DevOps & CLI
☸️
Kubernetes DevOps & CLI
☁️
AWS CLI DevOps & CLI
🔄
GitHub Actions DevOps & CLI
🐧
Linux 명령어 DevOps & CLI
💻
Bash 스크립팅 DevOps & CLI
🌐
Nginx DevOps & CLI
📝
Vim DevOps & CLI
🔨
Makefile DevOps & CLI
🧪
Pytest DevOps & CLI
🪟
Windows DevOps & CLI
📦
패키지 매니저 DevOps & CLI
🍎
macOS DevOps & CLI
🏗️
Terraform DevOps & CLI
🔧
Ansible DevOps & CLI
Helm DevOps & CLI
🔨
Jenkins DevOps & CLI
🔥
Prometheus DevOps & CLI
📊
Grafana DevOps & CLI
💻
Zsh DevOps & CLI
🐟
Fish Shell DevOps & CLI
💙
PowerShell DevOps & CLI
🔄
Argo CD DevOps & CLI
🔀
Traefik DevOps & CLI
☁️
Azure CLI DevOps & CLI
☁️
Google Cloud CLI DevOps & CLI
📟
tmux DevOps & CLI
🔧
jq DevOps & CLI
✂️
sed DevOps & CLI
📊
awk DevOps & CLI
🌊
Apache Airflow DevOps & CLI
🔢
NumPy 데이터베이스 & 데이터
🐼
Pandas 데이터베이스 & 데이터
🔥
PyTorch 데이터베이스 & 데이터
🧠
TensorFlow 데이터베이스 & 데이터
📈
Matplotlib 데이터베이스 & 데이터
🐘
PostgreSQL 데이터베이스 & 데이터
🐬
MySQL 데이터베이스 & 데이터
🍃
MongoDB 데이터베이스 & 데이터
🔴
Redis 데이터베이스 & 데이터
🔍
Elasticsearch 데이터베이스 & 데이터
🤖
Scikit-learn 데이터베이스 & 데이터
👁️
OpenCV 데이터베이스 & 데이터
Apache Spark 데이터베이스 & 데이터
🪶
SQLite 데이터베이스 & 데이터
Supabase 데이터베이스 & 데이터
🔵
Neo4j 데이터베이스 & 데이터
📨
Apache Kafka 데이터베이스 & 데이터
🐰
RabbitMQ 데이터베이스 & 데이터
🔤
Regex 유틸리티
📝
Markdown 유틸리티
📄
LaTeX 유틸리티
🔐
SSH & GPG 유틸리티
🌐
curl & HTTP 유틸리티
📜
reStructuredText 유틸리티
🚀
Postman 유틸리티
🎬
FFmpeg 유틸리티
🖼️
ImageMagick 유틸리티
🔍
ripgrep 유틸리티
🔍
fzf 유틸리티
📗
Microsoft Excel 오피스 애플리케이션
📘
Microsoft Word 오피스 애플리케이션
📙
Microsoft PowerPoint 오피스 애플리케이션
📝
한컴 한글 한컴오피스
📽️
한컴 한쇼 한컴오피스
📊
한컴 한셀 한컴오피스
📄
Google 문서 Google Workspace
📊
Google 스프레드시트 Google Workspace
📽️
Google 프레젠테이션 Google Workspace
🔌
Cadence Virtuoso EDA & 하드웨어
⚙️
Synopsys EDA EDA & 하드웨어
💎
Verilog & VHDL EDA & 하드웨어
LTSpice EDA & 하드웨어
🔧
KiCad EDA & 하드웨어
📝
Notion 생산성 도구
💎
Obsidian 생산성 도구
💬
Slack 생산성 도구
🎮
Discord 생산성 도구
🎨
Figma 디자인 도구
📘
Confluence Atlassian
📋
Jira Atlassian
🃏
Jest 테스팅
Vitest 테스팅
🎭
Playwright 테스팅
🌲
Cypress 테스팅
🌐
Selenium 테스팅
💙
Flutter 모바일 개발
📱
React Native 모바일 개발
🍎
SwiftUI 모바일 개발
📱
Expo 모바일 개발
🐍
Django 웹 프레임워크
FastAPI 웹 프레임워크
🌶️
Flask 웹 프레임워크
🍃
Spring Boot 웹 프레임워크
🍸
Gin 웹 프레임워크
Vite 빌드 도구
📦
Webpack 빌드 도구
esbuild 빌드 도구
🐘
Gradle 빌드 도구
🪶
Maven 빌드 도구
🔧
CMake 빌드 도구
🎮
Unity 게임 개발
🤖
Godot 게임 개발
🔌
Arduino 임베디드 & IoT
🔍
Nmap 보안
🐕
Datadog 모니터링
📖
Swagger/OpenAPI 문서화
검색 결과가 없습니다
EN KO

기초

스키마 정의

객체 타입
type User {
  id: ID!
  name: String!
  email: String
  age: Int
  posts: [Post!]!
}
스칼라 타입
Int      # Integer
Float    # Floating point
String   # UTF-8 string
Boolean  # true/false
ID       # Unique identifier
Non-null
name: String!  # Cannot be null
리스트
tags: [String]    # Nullable list of nullable strings
tags: [String!]!  # Non-null list of non-null strings
열거형
enum Status {
  ACTIVE
  INACTIVE
  PENDING
}
인터페이스
interface Node {
  id: ID!
}

type User implements Node {
  id: ID!
  name: String!
}
유니온
union SearchResult = User | Post | Comment
입력 타입
input CreateUserInput {
  name: String!
  email: String!
}

연산

쿼리

기본 쿼리
query {
  users {
    id
    name
  }
}
인자 사용
query {
  user(id: "1") {
    id
    name
    email
  }
}
이름있는 쿼리
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
  }
}
별칭
query {
  firstUser: user(id: "1") {
    name
  }
  secondUser: user(id: "2") {
    name
  }
}
중첩 필드
query {
  user(id: "1") {
    name
    posts {
      title
      comments {
        text
      }
    }
  }
}

뮤테이션

기본 뮤테이션
mutation {
  createUser(name: "John", email: "john@example.com") {
    id
    name
  }
}
변수 사용
mutation CreateUser($input: CreateUserInput!) {
  createUser(input: $input) {
    id
    name
  }
}

# Variables:
{
  "input": {
    "name": "John",
    "email": "john@example.com"
  }
}
업데이트 뮤테이션
mutation UpdateUser($id: ID!, $name: String!) {
  updateUser(id: $id, name: $name) {
    id
    name
  }
}
삭제 뮤테이션
mutation DeleteUser($id: ID!) {
  deleteUser(id: $id) {
    success
    message
  }
}

구독

구독 정의
type Subscription {
  messageCreated: Message
  userOnline(userId: ID!): User
}
구독하기
subscription {
  messageCreated {
    id
    content
    sender {
      name
    }
  }
}

고급

프래그먼트

프래그먼트 정의
fragment UserFields on User {
  id
  name
  email
}
프래그먼트 사용
query {
  user(id: "1") {
    ...UserFields
    posts {
      title
    }
  }
}

fragment UserFields on User {
  id
  name
  email
}
인라인 프래그먼트
query {
  search(text: "hello") {
    ... on User {
      name
    }
    ... on Post {
      title
    }
  }
}

디렉티브

@include
query GetUser($withPosts: Boolean!) {
  user(id: "1") {
    name
    posts @include(if: $withPosts) {
      title
    }
  }
}
@skip
query GetUser($skipEmail: Boolean!) {
  user(id: "1") {
    name
    email @skip(if: $skipEmail)
  }
}
@deprecated
type User {
  id: ID!
  fullName: String @deprecated(reason: "Use name instead")
  name: String!
}

서버 (Node.js)

Apollo Server

설정
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!'
  }
};

const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server);
console.log(`Server ready at ${url}`);
리졸버
const resolvers = {
  Query: {
    user: (parent, args, context) => {
      return context.db.findUser(args.id);
    },
    users: (parent, args, context) => {
      return context.db.findUsers();
    }
  },
  Mutation: {
    createUser: (parent, args, context) => {
      return context.db.createUser(args.input);
    }
  },
  User: {
    posts: (parent, args, context) => {
      return context.db.findPostsByUser(parent.id);
    }
  }
};
컨텍스트
const server = new ApolloServer({ typeDefs, resolvers });

await startStandaloneServer(server, {
  context: async ({ req }) => ({
    db: database,
    user: await getUser(req.headers.authorization)
  })
});

클라이언트

Apollo Client

설정
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});
쿼리
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

const { data } = await client.query({ query: GET_USERS });
뮤테이션
const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
    }
  }
`;

await client.mutate({
  mutation: CREATE_USER,
  variables: { input: { name: "John" } }
});

React 훅

useQuery
import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

function User({ id }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id }
  });

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

  return <p>{data.user.name}</p>;
}
useMutation
import { useMutation, gql } from '@apollo/client';

const CREATE_USER = gql`...`;

function CreateUser() {
  const [createUser, { loading, error }] = useMutation(CREATE_USER);

  const handleSubmit = async () => {
    await createUser({ variables: { input: { name } } });
  };
}
useSubscription
import { useSubscription, gql } from '@apollo/client';

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageCreated {
    messageCreated {
      id
      content
    }
  }
`;

function Messages() {
  const { data } = useSubscription(MESSAGE_SUBSCRIPTION);
  return <p>New: {data?.messageCreated.content}</p>;
}

모범 사례