1. 주제 소개
웹앱에서 날씨, 지도, 결제, 로그인 같은 기능이 동작하는 이유는 대부분 API 덕분입니다. API는 어렵게 보면 복잡하지만, 핵심은 단순합니다. API는 서로 다른 프로그램이 약속된 방식으로 데이터를 주고받는 창구입니다.
2. 핵심 내용
요청(Request)과 응답(Response)
클라이언트(브라우저/앱)는 필요한 데이터를 API 서버에 "요청"하고, 서버는 결과를 "응답"으로 돌려줍니다. 이 흐름이 웹 데이터 통신의 기본입니다.
HTTP 메서드로 의도를 전달
GET은 조회, POST는 생성, PUT/PATCH는 수정, DELETE는 삭제에 주로 사용합니다. 메서드는 "무엇을 하고 싶은지"를 서버에 명확히 알리는 신호입니다.
JSON은 가장 흔한 데이터 형식
API 응답은 보통 JSON 형태로 내려옵니다. 프론트엔드는 이 JSON 데이터를 화면에 렌더링하고, 필요하면 가공해 사용자에게 보여줍니다.
3. 적용 방법
실무에서는 먼저 API 문서를 보고 엔드포인트, 메서드, 요청 파라미터, 응답 구조를 확인합니다. 그다음 fetch나 axios로 호출해 화면과 연결합니다.
| 단계 | 확인할 내용 | 예시 |
|---|---|---|
| 1. 엔드포인트 확인 | 어느 주소로 호출할지 | /api/users |
| 2. 메서드 선택 | 조회/생성/수정/삭제 구분 | GET, POST |
| 3. 응답 처리 | JSON 구조 파악 후 렌더링 | user.name 표시 |
4. 정리
API를 이해하면 "화면"과 "데이터"를 연결하는 원리가 보입니다. 결국 웹앱은 API를 통해 서버와 대화하며 동작합니다. 요청과 응답, 메서드, JSON 이 세 가지만 확실히 잡아도 실무 진입 속도가 빨라집니다.
5. 자주 묻는 질문
Q1. 프론트엔드도 API를 만들어야 하나요?
일반적으로 API 설계/구현은 백엔드 영역입니다. 프론트엔드는 주로 API를 호출하고 응답을 화면에 반영하는 역할을 담당합니다.
Q2. API 호출이 실패하면 어떻게 하나요?
에러 상태 코드를 확인하고 사용자에게 안내 메시지를 보여줘야 합니다. 네트워크 재시도, 로딩/에러 UI 처리도 함께 고려하는 것이 좋습니다.
'바이브코딩 개념사전' 카테고리의 다른 글
| 디버깅은 에러 찾기가 아니라 '원인 좁히기'다 (0) | 2026.05.10 |
|---|---|
| if문과 조건문, ‘컴퓨터의 선택’ 이해하기 (0) | 2026.05.09 |
| 배열(Array)과 객체(Object), 실무에서 어떻게 구분해 쓸까? (0) | 2026.05.08 |
| 이벤트(Event)란 무엇인가: 클릭하면 왜 코드가 실행될까? (0) | 2026.05.07 |
| 함수(Function)는 왜 필요할까? 반복을 줄이는 사고법 (0) | 2026.05.06 |