프론트엔드를 공부하다 보면 GET, POST, PUT, DELETE 같은 단어를 계속 보게 된다.
처음에는 그냥 요청 방식 이름 정도로만 알았는데, 정리해보니 REST API는 프론트와 백엔드가 서로 대화하는 방식에 대한 규칙이라는 느낌에 더 가까웠다.
REST API란?
REST API는 프론트엔드와 백엔드가 데이터를 주고받기 위한 통신 규칙이다.
프론트는 화면을 만들고 버튼을 누르면 요청을 보내고, 백엔드는 데이터를 가져오거나 수정해서 응답을 준다. 이 둘이 직접 데이터베이스와 연결되는 게 아니라 항상 서버를 거쳐서 통신하게 된다.
구조를 단순하게 보면 이렇게 된다.
프론트 → 백엔드 서버 → 데이터베이스프론트는 DB에 직접 접근하지 않고 백엔드에게 "이 데이터 줘", "이거 저장해" 같은 요청만 보낸다.
프론트에서 DB에 직접 접근하지 않는 이유
처음에는 "그냥 프론트에서 DB 연결하면 빠르지 않나?" 이 생각이 들었는데 실제로는 거의 사용하지 않는 구조였다.
이유는 크게 세 가지였다.
- 보안 문제: DB 주소나 비밀번호가 브라우저에 그대로 노출된다.
- 권한 관리 어려움: 누가 어떤 데이터를 수정하는지 통제가 힘들다.
- 로직 처리 한계: 데이터 검증이나 조건 처리를 프론트에서 하기가 어렵다.
그래서 프론트는 DB가 아니라 항상 서버하고만 통신하게 된다.
HTTP 메서드 종류
REST API에서 가장 많이 쓰는 방식은 네 가지이다.
GET (조회)
데이터를 가져올 때 사용한다.
GET /board
GET /board/3- /board → 전체 목록 조회
- /board/3 → id가 3번인 글 하나 조회
POST (생성)
새로운 데이터를 만들 때 사용한다.
POST /board- body에 제목, 내용 같은 데이터가 들어간다.
- 데이터베이스 INSERT 느낌이다.
PUT (수정)
기존 데이터를 수정할 때 사용한다.
PUT /board- 수정할 id와 변경 내용을 같이 보낸다.
- UPDATE 개념에 가깝다.
DELETE (삭제)
DELETE /board?id=3- 특정 id 데이터를 삭제한다.
- DELETE SQL과 거의 같은 느낌이다.
프론트에서의 흐름 (axios 기준)
Vue나 React에서는 보통 axios나 fetch를 사용한다.
axios.get('/board')
이 한 줄이 내부적으로는
http://localhost:8080/board이 주소로 요청을 보내는 것이다.
프론트에서는 단순히 함수 호출처럼 보이지만 실제로는 서버와 통신이 일어나는 구조다.
느낀 점
REST API는 단순히 요청 방식 이름을 외우는 게 아니라 프론트와 백엔드의 역할을 나누는 구조를 이해하는 게 더 중요했다.
중요한 기준은
- 프론트는 화면과 요청
- 백엔드는 데이터와 로직
- DB는 서버를 통해서만 접근
이라는 흐름이었다.
이 구조를 이해하고 나니 axios 코드가 단순한 함수가 아니라 "서버와 대화하는 문장"처럼 보이기 시작했다.
GET은 "이거 보여줘", POST는 "이거 저장해줘", DELETE는 "이거 지워줘" 같은 명령문인 셈이다.
결국 프론트와 백엔드는 각자 맡은 역할만 하고, REST API라는 약속된 규칙으로 대화하는 구조였다.