Dorong Dorong 💻😴

오늘 HTTP 메서드에 대한 질문을 받았습니다. 답변을 드리려고 하다보니 제가 GET, POST, DELETE, PUT, PATCH 같은 기본적인 메서드 외에는 잘 모른다는걸 알게됐어요🥲 특히 HEAD나 OPTIONS 같은 메서드들은 존재의 유무는 알았으나, 실제로 어떻게 활용되는지 명확하게 인지하지도 못했습니다.

그래서 신입 시절의 기억도 되살리고, 부족했던 부분도 채워보고자 HTTP 메서드와 그 사용법에 대해 정리해보려고 해요.

특히 React와 Next.js를 사용하시는 분들을 위해 실제 개발 환경에서 어떻게 활용되는지 구체적인 예시와 함께 설명해드리겠습니다.

HTTP 메서드 Next.js 는 Pages Router방식이 더 익숙하신 분들을 위해 API Routes handler 문법(pages/api/ 디렉토리 사용)인 Next.js 12 이전의 방식으로 작성했습니다.

App Router 방식만을 알고 계신 분들은, export async function GET() 처럼 HTTP 메서드를 함수 이름으로 사용하는 새로운 convention 방식 등을 포함한 여러 차이점이 있지만 문서를 확인하며 진행하신다면 문제없이 이해하실 수 있을 거라 생각합니다.

HTTP 메서드란?

HTTP 메서드는 클라이언트와 서버 간의 통신에서 어떤 동작을 수행할지 지정하는 방법입니다. REST API에서 매우 중요한 역할을 하며, 각 메서드는 특정한 목적을 가지고 있습니다. 이를 제대로 이해하고 사용하는 것이 웹 개발의 기초가 되죠.

주요 HTTP 메서드 살펴보기

1. GET 메서드

GET은 리소스를 조회하는 데 사용되는 가장 기본적인 메서드입니다.

React에서의 사용 예시:

// React 컴포넌트에서 데이터 조회
const UserProfile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('/api/users/1');
        const data = await response.json();
        setUser(data);
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    };

    fetchUser();
  }, []);

  return (
    <div>
      {user && <h1>{user.name}</h1>}
    </div>
  );
};

Next.js API Route에서의 처리:

// pages/api/users/[id].ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'GET') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  const { id } = req.query;
  // DB 조회 로직
  const user = await prisma.user.findUnique({
    where: { id: Number(id) }
  });

  res.status(200).json(user);
}

2. POST 메서드

POST는 새로운 리소스를 생성하는 데 사용됩니다.

React에서의 사용 예시:

// 새 사용자 등록 폼
const RegisterForm = () => {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: formData.get('name'),
          email: formData.get('email'),
        }),
      });

      if (!response.ok) throw new Error('Registration failed');
      
      const data = await response.json();
      // 성공 처리
    } catch (error) {
      // 에러 처리
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" required />
      <input name="email" type="email" required />
      <button type="submit">등록</button>
    </form>
  );
};

3. PUT과 PATCH 메서드

// pages/api/users/[id].ts
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { id } = req.query;

  if (req.method === 'PUT') {
    // 전체 데이터 교체
    const userData = req.body;
    await prisma.user.update({
      where: { id: Number(id) },
      data: userData,
    });
    return res.status(200).json({ message: 'User updated' });
  }

  if (req.method === 'PATCH') {
    // 부분 데이터 수정
    const updates = req.body;
    await prisma.user.update({
      where: { id: Number(id) },
      data: updates,
    });
    return res.status(200).json({ message: 'User partially updated' });
  }
}

4. DELETE 메서드

React에서의 사용 예시:

const DeleteUserButton = ({ userId }) => {
  const handleDelete = async () => {
    try {
      const response = await fetch(`/api/users/${userId}`, {
        method: 'DELETE',
      });

      if (!response.ok) throw new Error('Delete failed');
      // 성공 처리
    } catch (error) {
      // 에러 처리
    }
  };

  return (
    <button onClick={handleDelete}>
      사용자 삭제
    </button>
  );
};

React와 Next.js에서는 이러한 메서드들을 사용하여 서버와 효과적으로 통신하고, RESTful API를 구현할 수 있습니다.

자주 사용되지 않지만 알아두면 유용한 HTTP 메서드들

1. HEAD 메서드

HEAD 메서드는 GET과 동일한 요청을 보내지만, 응답으로 헤더만 받고 본문은 받지 않습니다.

주요 사용 사례:

• 큰 파일을 다운로드하기 전에 파일 크기 확인
• 리소스가 변경되었는지 검사(Last-Modified 확인)
• 리소스 존재 여부 확인

// Next.js에서 HEAD 메서드 처리 예시
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'HEAD') {
    // 파일 정보만 확인
    const fileStats = await getFileStats('large-file.pdf');
    
    res.setHeader('Content-Length', fileStats.size);
    res.setHeader('Last-Modified', fileStats.mtime.toUTCString());
    return res.status(200).end();
  }
}

// React에서 HEAD 요청 예시
const checkFileDetails = async () => {
  try {
    const response = await fetch('/api/files/large-file.pdf', {
      method: 'HEAD'
    });
    
    const fileSize = response.headers.get('Content-Length');
    const lastModified = response.headers.get('Last-Modified');
    
    console.log(`File size: ${fileSize} bytes`);
    console.log(`Last modified: ${lastModified}`);
  } catch (error) {
    console.error('Error checking file:', error);
  }
};

1. OPTIONS 메서드와 CORS

OPTIONS는 서버가 지원하는 메서드와 기능을 확인하는 데 사용됩니다. 

주로 CORS의 Preflight 요청에서 핵심적인 역할을 합니다.

주요 사용 사례:

• CORS 사전 검사
• 서버 지원 기능 확인
• API 엔드포인트 메타데이터 조회

Next.js에서 CORS 설정 예시:

// pages/api/users/[id].ts
import Cors from 'cors';

// CORS 미들웨어 초기화
const cors = Cors({
  methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  origin: ['https://allowed-origin.com'],
  credentials: true,
});

// 미들웨어 실행 함수
const runMiddleware = (req: NextApiRequest, res: NextApiResponse, fn: Function) => {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // CORS 미들웨어 실행
  await runMiddleware(req, res, cors);

  // OPTIONS 요청 처리
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  // 다른 메서드 처리...
}

브라우저의 Preflight 요청 예시:

// React에서 CORS 관련 OPTIONS 요청이 발생하는 상황
const fetchWithCustomHeaders = async () => {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'GET',
      headers: {
        'Custom-Header': 'value',  // 커스텀 헤더 추가시 자동으로 preflight 요청 발생
      },
      credentials: 'include',  // 인증 정보 포함
    });
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
};

CORS와 Preflight 요청의 이해

브라우저는 특정 조건에서 실제 요청 전에 OPTIONS 메서드를 사용한 Preflight 요청을 자동으로 보냅니다.

Preflight 요청이 발생하는 경우:

1. 커스텀 헤더를 포함할 때 (예: Authorization)
2. 단순하지 않은 Content-Type을 사용할 때
3. 단순하지 않은 메서드를 사용할 때 (GET, HEAD, POST 외)

// Preflight 요청 예시 (브라우저 개발자 도구에서 보이는 형태)
OPTIONS /api/data HTTP/1.1
Host: api.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization, content-type
Origin: https://your-app.com

// 서버 응답 예시
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://your-app.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: authorization, content-type
Access-Control-Max-Age: 86400

3. CONNECT 메서드

CONNECT는 프록시 서버를 통해 SSL/TLS 터널을 구성할 때 사용됩니다.

주요 사용 사례:

• HTTPS 프록시 연결 설정
• 웹소켓 연결 업그레이드
• 프록시 서버를 통한 암호화된 통신

// Node.js에서 CONNECT 요청 처리 예시
const net = require('net');
const server = require('http').createServer();

server.on('connect', (req, clientSocket, head) => {
  // 프록시 연결 설정
  const { port, hostname } = new URL(`http://${req.url}`);
  const serverSocket = net.connect(port || 80, hostname, () => {
    clientSocket.write('HTTP/1.1 200 Connection Established\r\n\r\n');
    serverSocket.write(head);
    serverSocket.pipe(clientSocket);
    clientSocket.pipe(serverSocket);
  });
});

4. TRACE 메서드

TRACE는 요청 메시지가 프록시나 방화벽을 통과하면서 어떻게 변경되는지 추적하는 데 사용됩니다.

주요 사용 사례:

• 디버깅
• 요청 메시지 변조 감지
• 프록시 체인 추적

// Next.js에서 TRACE 메서드 처리 예시
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'TRACE') {
    // 요청 헤더와 경로 정보를 그대로 반환
    const responseBody = {
      method: req.method,
      url: req.url,
      headers: req.headers,
      path: req.url
    };
    
    res.setHeader('Content-Type', 'message/http');
    return res.status(200).json(responseBody);
  }
}

// 보안상의 이유로 대부분의 서버는 TRACE 메서드를 비활성화합니다

보안 고려사항

// Next.js에서 메서드 제한 구현 예시
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // 허용되지 않는 메서드 차단
  const allowedMethods = ['GET', 'POST', 'OPTIONS'];
  if (!allowedMethods.includes(req.method)) {
    return res.status(405).json({ 
      error: 'Method Not Allowed',
      allowedMethods 
    });
  }

  // TRACE 메서드는 명시적으로 차단
  if (req.method === 'TRACE') {
    return res.status(403).json({ 
      error: 'TRACE method is disabled for security reasons' 
    });
  }
}

이러한 HTTP 메서드들은 특수한 상황에서 유용할 수 있지만, 보안을 고려해 신중하게 사용해야 합니다.

특히 TRACE 메서드는 보안상의 이유로 대부분의 프로덕션 환경에서 비활성화되어 있습니다.

멱등성

HTTP 메서드에 대한 마지막 설명으로 중요한 개념인 멱등성에 대해 간단히 설명드리겠습니다.

멱등성(Idempotency)이란 동일한 요청을 한 번 보내는 것과 여러 번 보내는 것이 서버의 상태에 동일한 영향을 미치는 것을 의미합니다.

주요 HTTP 메서드의 멱등성은 다음과 같습니다:

멱등성을 가진 메서드:

1. GET: 리소스를 조회만 하므로 멱등
2. HEAD: GET과 동일하게 리소스 정보만 조회하므로 멱등
3. PUT: 리소스를 대체(덮어쓰기)하므로 멱등
4. DELETE: 리소스를 삭제하므로 멱등 (이미 삭제된 리소스를 다시 삭제해도 상태는 동일)
5. OPTIONS: 서버 리소스가 지원하는 메서드 정보를 조회하므로 멱등
6. TRACE: 요청 메시지를 그대로 반환하므로 멱등

멱등성이 없는 메서드:

1. POST: 새로운 리소스 생성 또는 데이터 처리를 요청하므로 멱등하지 않음
   • 예: 같은 주문을 여러 번 POST하면 여러 개의 주문이 생성됨
2. PATCH: 리소스의 부분 수정이므로 멱등하지 않을 수 있음
   • 예: 숫자를 1씩 증가시키는 PATCH 요청은 멱등하지 않음

멱등성이 중요한 이유:

1. 네트워크 오류 시 재시도 전략 수립 가능
2. 서버의 안정성과 예측 가능성 보장
3. 캐싱 전략 수립에 도움

API를 설계할 때는 각 메서드의 멱등성 특성을 고려하여 적절한 메서드를 선택하는 것이 중요합니다.

번외: REST API vs GraphQL 

HTTP 메서드를 공부하면서 빼놓을 수 없는 이야기가 하나 있는데요, 바로 GraphQL입니다. REST API만 사용하다가 처음 GraphQL을 접했을 때 상당히 신기했습니다. "아니, HTTP 메서드도 없이 어떻게 API를 만든다는 거지?" 하면서요. 😅

GraphQL이란?

GraphQL은 Facebook에서 개발한 API를 위한 쿼리 언어입니다. REST API와는 달리, GraphQL은 단일 엔드포인트에서 모든 데이터 요청을 처리하고, 클라이언트가 필요한 데이터를 정확히 지정할 수 있습니다.

REST API vs GraphQL 비교

// REST API 방식
// GET /api/users/1
// GET /api/users/1/posts
// GET /api/users/1/followers

// GraphQL 방식
const query = `
  query {
    user(id: 1) {
      name
      email
      posts {
        title
        content
      }
      followers {
        name
      }
    }
  }
`;

Next.js에서 GraphQL 사용 예시

// pages/api/graphql.ts
import { ApolloServer } from 'apollo-server-micro';
import { typeDefs } from './schema';
import { resolvers } from './resolvers';

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  await apolloServer.start();
  await apolloServer.createHandler({
    path: '/api/graphql',
  })(req, res);
}

React에서 GraphQL 사용 예시 (Apollo Client)

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

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

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

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
      <h2>Posts</h2>
      <ul>
        {data.user.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

REST API vs GraphQL: 각각의 장단점

// GraphQL과 REST API를 함께 사용하는 하이브리드 접근
// pages/api/hybrid/[...path].ts
export default async function handler(req, res) {
  // 파일 업로드는 REST API로 처리
  if (req.url.startsWith('/api/upload')) {
    return handleFileUpload(req, res);
  }

  // 복잡한 데이터 쿼리는 GraphQL로 처리
  if (req.url.startsWith('/api/graphql')) {
    return handleGraphQLRequest(req, res);
  }

  // 단순한 CRUD는 REST API로 처리
  return handleRESTRequest(req, res);
}

언제 무엇을 선택할까?

• REST API가 좋은 경우:
  • 단순한 CRUD 작업이 주를 이루는 경우
  • 캐싱이 중요한 경우
  • 파일 업로드/다운로드가 많은 경우
  • 팀이 REST에 더 익숙한 경우
• GraphQL이 좋은 경우:
  • 복잡한 데이터 관계를 다루는 경우
  • 모바일 앱에서 데이터 사용량 최적화가 필요한 경우
  • 실시간 업데이트가 필요한 경우
  • API 변경이 자주 발생하는 경우

실제로 기업들에서 두 방식을 함께 사용하는 하이브리드 접근을 택하고 있는걸로 알고 있습니다. GitHub이 대표적인 예시인데요, 요구 사항에 가장 잘 부합하고 가장 편안하게 사용할 수 있는 API를 사용하라 권고하고 있고, 파일 업로드 같은 기능은 REST API로, 복잡한 데이터 쿼리는 GraphQL로 처리하고 있습니다.