프론트앤드 API 요청 과 Postman을 통한 백앤드 통신

Hansu·2025년 7월 3일

1. Frontend에서 API 요청 하는 방법

fetch와 axois GET,POST 방식으로 요청할 수 있다.

fetch

웹 브라우저에서 네트워크 요청을 하고 데이터를 가져오기 위한 자바스크립트 API입니다.
fetch() 는 JavaScript의 내장 함수로, HTTP 요청을 통해 서버와 데이터를 주고받을 수 있는 기능을 제공합니다.
Promise 기반으로 동작하며 ES6 이상에서 사용됩니다.
설치 필요 없이 바로 사용 가능합니다.

  fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));

axios

axios 는 외부 라이브러리입니다. (설치 필요: npm install axios)
Promise 기반이며, Node.js와 브라우저 둘 다에서 사용 가능.
fetch 보다 더 풍부한 기능 제공.

   import axios from 'axios';

   axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('에러 발생:', error));

HTTP Request

메서드	목적 / 설명	주된 용도 / 예시
GET	데이터 조회	목록 불러오기, 검색 결과
POST	데이터 생성, 서버에 전송	회원가입, 로그인, 글 작성
PUT	리소스 전체 수정 (또는 생성)	사용자 정보 전체 업데이트
PATCH	리소스 일부 수정	이메일/비밀번호만 수정 등
DELETE	리소스 삭제	게시물 삭제, 계정 삭제 등
HEAD	응답 헤더만 요청 (본문 없이)	리소스 존재 확인, 캐시 검증 등
OPTIONS	서버가 지원하는 메서드 확인	CORS 사전 요청(Preflight)
TRACE	요청 경로 추적용 디버깅	요청 루프백 확인 (보안상 제한됨)
CONNECT	터널링 연결 요청	프록시 서버로 HTTPS 연결

속성 별 정리

속성 (옵션)	설명	사용 예시	주요 포맷 / MIME Type
none	Body를 사용하지 않음 (기본 선택)	GET, DELETE 요청 등	없음
form-data	키-값 쌍으로 전송. 파일도 함께 첨부 가능.	파일 업로드, 멀티파트 폼 요청	`multipart/form-data` (자동 설정)
x-www-form-urlencoded	키-값 쌍을 `url-encoded` 방식으로 전송 (HTML form과 동일)	로그인, 간단한 텍스트 데이터 전송	`application/x-www-form-urlencoded`
raw	사용자 정의 데이터 입력. 포맷을 수동으로 지정	JSON, XML, Text API 요청	아래 참고
binary	하나의 이진 파일 자체를 전송	이미지, PDF 등 직접 전송	직접 MIME type 지정 가능
GraphQL	GraphQL 쿼리와 변수 입력 전용 필드 제공	GraphQL API 호출	`application/json` (자동 설정)

raw 속성 정리

포맷	설명
Text	일반 텍스트를 그대로 전송합니다. 가공된 구조 없이 순수 문자열 데이터를 보낼 때 사용합니다. 예: `"hello world"`
JSON	JavaScript Object Notation 형식의 데이터를 전송합니다. 대부분의 RESTful API가 기본으로 사용합니다. 예: `{ "name": "Alice" }`
JavaScript	JavaScript 코드 형식으로 데이터를 전송합니다. 실제 HTTP 요청에서는 거의 사용되지 않습니다. 디버깅이나 테스트용에 가깝습니다.
HTML	HTML 태그와 구조로 구성된 문자열 데이터를 전송합니다. 서버가 HTML 형식을 파싱하거나 저장해야 할 경우 사용합니다. 예: `<h1>Hello</h1>`
XML	XML(eXtensible Markup Language) 구조로 데이터를 전송합니다. SOAP API나 일부 레거시 시스템에서 주로 사용합니다. 예: `<user><name>Alice</name></user>`

보내는 방식에 따라서 백엔드서 받는 방법이 달라진다.

데이터 전송 형식(Content-Type)에 따라 파싱 방법이 달라진다.
HTTP 메서드(GET, POST 등)에 따라 데이터 위치가 달라진다.

flask 파이썬코드에 /sendMessage 엔드포인트 만들고, 프론트엔드에서 메세지 입력을 하고 전송하기버튼을 누르면 파이썬코드가 실행 되는 터미널창에 메세지가 print 되게끔 해보기

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def home():
    return 'Home!'

@app.route('/hello')
def hello():
    return 'Hello World!'

@app.route('/sendMessage', methods=['POST', 'GET'])
def sendMessage():
    if request.method == 'POST':
        try:
            # JSON 데이터 받기
            data = request.get_json()
            message = data.get('message', '')
            
            # 터미널에 메시지 출력
            print("=" * 50)
            print("📨 메시지 전송이 눌렸습니다!")
            print(f"📝 전송된 메시지: {message}")
            print(f"⏰ 전송 시간: {request.headers.get('Date', 'N/A')}")
            print("=" * 50)
            
            # 성공 응답
            return jsonify({
                'status': 'success',
                'message': f'메시지 "{message}"가 성공적으로 전송되었습니다!'
            })
            
        except Exception as e:
            print(f"❌ 오류 발생: {str(e)}")
            return jsonify({
                'status': 'error',
                'message': '메시지 처리 중 오류가 발생했습니다'
            }), 400
    
    elif request.method == 'GET':
        return jsonify({'status': 'ready', 'message': '메시지 전송 준비됨'})
    
    # 기본 응답 (모든 HTTP 메서드를 커버)
    return jsonify({'status': 'error', 'message': '지원하지 않는 메서드입니다'}), 405

if __name__ == '__main__':
    app.run(debug=True, port=5001)