삼일 AI 재무아카데미 실습 교재

WEB-FE-03 · HTTP·API로 백엔드 연결하기

API는 두 프로그램이 서로 호출할 수 있도록 정한 입력·출력 계약입니다. 웹 API는 주로 HTTP를 사용하지만 API와 HTTP가 같은 뜻은 아닙니다. 프론트엔드는 계약에 맞는 주소·메서드·데이터를 보내고 백엔드는 상태 코드와 응답 데이터를 돌려줍니다.

대시보드의 연도 필터처럼 이미 index.html에 들어 있는 자료만 바꾸는 동작에는 서버 요청이 필요하지 않습니다. 반면 검토 메모 저장은 브라우저 밖에 기록을 남겨야 하므로 API 요청이 필요합니다. 이 차이를 먼저 구분하면 구조를 과하게 만들지 않을 수 있습니다.

요청과 응답

메모 저장 API 예시
요청
POST /api/memos
Content-Type: application/json
{"content":"검토 메모"}
 
응답
201 Created
{"id":42,"content":"검토 메모"}

URL은 요청할 자원의 위치, 메서드는 할 일, 헤더는 데이터 형식이나 인증 같은 부가 정보, 본문은 전달할 데이터를 나타냅니다. JSON은 요청과 응답에 자주 쓰이는 데이터 형식일 뿐이며 모든 HTTP 요청이 JSON을 사용하는 것은 아닙니다.

HTTPS는 HTTP 내용을 암호화된 연결로 전달합니다. 주소가 HTTPS라고 해서 애플리케이션의 권한·입력 검증과 데이터 보호가 자동으로 해결되는 것은 아닙니다.

자주 쓰는 HTTP 메서드

메서드일반적인 목적예시
GET조회검토 대상 목록 읽기
POST새 작업 또는 자원 생성검토 실행·메모 저장
PUT자원 전체 교체설정 전체 갱신
PATCH자원 일부 변경검토 상태만 변경
DELETE삭제임시 메모 제거

실제 API 계약이 다르게 정의될 수 있으므로 이름만 보고 추측하지 않고 백엔드 경로와 문서를 확인합니다. 특히 조회 요청은 서버 상태를 바꾸지 않도록 하고, 같은 요청을 재시도했을 때 중복 영향이 생기는지도 확인합니다.

상태 코드 읽기

범위의미먼저 확인할 곳
2xx요청 처리 성공응답 데이터와 기대값
3xx다른 위치나 캐시로 연결이동 주소와 브라우저 동작
4xx서버가 현재 요청을 처리할 수 없음주소·입력·인증·권한·현재 상태
5xx서버가 요청 처리 중 실패백엔드 로그와 의존 서비스 상태

4xx가 항상 사용자 컴퓨터나 프론트엔드 고장이라는 뜻은 아닙니다. 예를 들어 401은 인증 필요, 403은 권한 거부, 404는 자원을 찾지 못함, 422는 처리할 수 없는 입력을 나타낼 수 있습니다. 5xx도 외부 서비스 장애라면 현재 코드에서 직접 고칠 수 없으므로 응답 출처와 로그를 확인합니다.

프론트엔드에서 응답 확인하기

상태 코드를 확인하는 요청
const response = await fetch("/api/memos")
 
if (!response.ok) {
  throw new Error(`요청 실패: ${response.status}`)
}
 
const memos = await response.json()

fetch()는 서버가 404나 500을 반환해도 응답 자체를 받았기 때문에 자동으로 실패 예외가 되지 않습니다. response.ok나 상태 코드를 확인한 뒤 성공 데이터와 오류를 구분합니다.

API 연결 확인

  • 프론트엔드가 호출한 URL과 메서드가 백엔드 경로와 같은가
  • 요청 헤더와 JSON 필드 이름·자료형이 계약과 같은가
  • 상태 코드와 응답 본문을 모두 확인했는가
  • 화면의 건수와 직접 호출한 API 응답이 같은가
  • 오류 응답을 빈 성공 데이터로 바꾸지 않았는가

2-06 · Agent 검토 자료 API 연결하기에서는 파일 없음·잘못된 JSON·계약 불일치를 정상 응답과 구분합니다.

공식 근거