[React] axios / fetch / Express의 app.get() 역할 구분

1. fetch란?

브라우저 내장 함수이다. 브라우저에 기본적으로 탑재되어있는 기능으로 별도의 설치가 필요없다. 

프론트에서 백엔드로 HTTP 요청을 보낼 때 사용되는 기본 API라고 생각하면 된다. 

 

<특징>

- JSON 파싱 직접 해야 한다 (res.json())

- 200~299 범위가 아니어도 “성공”으로 처리된다. 즉, 에러 처리를 개발자가 직접 만들어야 한다.

- 인터셉터 같은 고급 기능 없다

 

 한줄요약: “기본 기능만 있는 로우레벨 HTTP 요청 도구”

 

2. axios란?

HTTP 클라이언트 라이브러리이다. 

 

<특징>

- JSON 자동 변환

- 에러 처리 자동 (4xx, 5xx → catch)

- 공통 헤더 / 공통 설정 쉽게 가능

- 인터셉터 지원 (요청/응답 가로채서 로직 넣기 쉬움)

- cancelToken, timeout 등 기능 풍부

 

요약: “fetch보다 훨씬 고급 기능이 많은 HTTP 요청 도구”

 

 

3. Express의 app.get()과 Axios의 차이

둘이 공수가 반대라고 볼 수 있다.

 

axios / fetch는 프론트쪽이 주체이다. 

 

예시)

axios.get('/api/user');
fetch('/api/user');

 

프론트에서 백엔드 서버 api를 호출해 ‘데이터를 달라’고 요청하는 것이 axios / fetch의 주된 역할이다. (혹은 Node.js에서 외부 API 호출할 때)

 

 

express의 app.get()은 반대로 백엔드 로직이다.

Node.js로 백엔드 서버를 만들 때 쓰는 코드이다 .

 

예시)

app.get('/api/user', (req, res) => {
    res.json({ name: "홍길동" });
});

 

요청을 받는 서버 API로, 이 함수로 프론트의 요청을 받아서 응답한다.

 

 

한줄정리: 

프론트가 axios로 요청,

백엔드가 express로 응답