[TIL]2026.09.09

프론트엔드 vs 백엔드

프론트엔드

사용자 컴퓨터의 브라우저에서 돌아가는 코드. 버튼, 입력창, 목록 화면 같은 걸 그린다. 그런데 데이터를 영구히 보관할 수는 없다. 브라우저를 닫으면 사라진다.

백엔드(서버)

어딘가의 컴퓨터에서 24시간 돌아가는 프로그램. 데이터베이스를 가지고 있어서 데이터를 저장하고 꺼내온다. 대신 화면을 못그린다.

그래서 둘이 대화를 해야한다. 이 대화가 바로 API 요청/응답이다.

"연결"이라는 말의 실체

연결이라고 하면 뭔가 케이블을 꽂거나 설정 파일을 만드는 걸 상상하기 쉬운데, 실제로는 그런게 없다. 프론트엔드가 서버에 대해 아는 건 주소 하나뿐이다.

const BASE_URL = "https://ba4ede57-....mock.pstmn.io"

위에 있는 코드가 전부. 마치 택배를 보낼 때 상대방 집 주소만 알면 되는 것과 같다. 상대가 어떤 사람인지, 집이 어떻게 생겼는지 몰라도 주소만 정확하면 물건이 도착한다.

그래서 BASE_URL을 바꾸는 게 곧 "연결 대상을 바꾸는 것"이다.

fetch가 실제로 하는 일

const res = await fetch(`${BASE_URL}/places`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(input),
})

이걸 우편물에 비유하면:

코드	의미
${BASE_URL}/places	받는 사람 주소
method: "POST"	용건의 종류 ("새로 만들어줘")
headers	봉투에 붙인 메모 ("안에 든 건 JSON 형식이야")
body	봉투 안에 든 실제 내용물

await가 붙는 이유

택배르 보내고 답장이 오기까지 시간이 걸린다. 인터넷 요청도 마찬가리조 몇십~ 몇백 밀리초가 걸린다.
await는 "답장이 올 때까지 여기서 기다려"라는 뜻. 이게 없으면 답장을 받기도 전에 다음 줄로 넘어가서 빈 데이터를 화면에 그리게 된다.

정리

• 프론트엔드와 서버는 주소 하나로만 연결된다.
• 그 주소로 HTTP 요청을 보내고 응답을 받는 게 전부다