안녕하세요! 웹 개발을 하다 보면 서버에서 데이터를 가져오거나 보낼 일이 정말 많죠? 이때 자바스크립트에서 가장 기본적으로 사용하는 무기가 바로 fetch() 함수입니다.
하지만 처음 fetch()를 접하면 코드가 왜 이렇게 생겼는지, .then() 안의 res나 data는 대체 어디서 튀어나온 규칙인지 헷갈리기 마련입니다. 오늘 그 정체를 아주 직관적이고 시원하게 털어드리겠습니다!
1. fetch()는 ‘2인 3각 이어달리기’다!
fetch() 함수는 기본적으로 Promise라는 것을 반환합니다. 쉽게 말해 “비동기(나중에 완료될 작업)”로 움직인다는 뜻입니다. 그래서 뒤에 .then()을 붙여서 “이거 끝나면 다음 작업 해!”라고 이어달리기를 시킵니다.
여기서 가장 중요한 핵심! fetch가 데이터를 가져오는 과정은 무조건 2단계를 거칩니다.
🏃♂️ 1단계: 서버에서 ‘응답 봉투’ 받기
JavaScript
fetch()를 실행하면 컴퓨터는 네트워크를 타고 서버로 달려가서 ‘응답(Response) 객체’를 들고 돌아옵니다. 이 객체는 아직 우리가 읽을 수 있는 진짜 데이터(텍스트나 JSON)가 아니라, “연결이 잘 되었는지(200 OK)”, “서버 상태는 어떤지” 등이 적힌 일종의 ‘우편 봉투(헤더)’입니다.
🏃♂️ 2단계: 봉투 열어서 ‘진짜 알맹이’ 꺼내기
JavaScript
봉투를 받았으니 안을 열어봐야겠죠? res.json()이나 res.text() 같은 메서드를 실행하면 브라우저가 봉투를 뜯고 내용물을 파싱합니다. 그 파싱이 끝난 진짜 내용물이 두 번째 .then()으로 넘어오게 됩니다.
2. 💡 가장 많이 하는 오해: “res와 data는 예약어인가요?”
아닙니다! 변수 이름은 여러분 마음대로 지으셔도 됩니다.
많은 입문자분들이 괄호 안의 res나 data를 자바스크립트의 문법이나 규칙으로 오해하곤 합니다. 하지만 이건 그냥 개발자들이 알아보기 쉽게 지어놓은 ‘매개변수(Parameter) 이름’일 뿐입니다.
컴퓨터는 순서(1단계는 봉투, 2단계는 내용물)만 기억할 뿐, 이름은 신경 쓰지 않습니다. 아래 코드를 보세요. 변수 이름을 완전히 한글로 바꿔도 100% 똑같이 작동합니다.
JavaScript
- 첫 번째 괄호: 내가 ‘봉투’를 뭐라고 부를지 결정하는 자리 (res, response, bongtu 등)
- 두 번째 괄호: 봉투를 열어젖힌 ‘내용물’을 뭐라고 부를지 결정하는 자리 (data, json, naeyong 등)
3. 봉투를 여는 여러 가지 방법 (json, text, blob…)
서버가 우리에게 글자를 보냈을 수도 있고, 사진을 보냈을 수도 있죠? 상황에 맞춰 첫 번째 .then()에서 봉투를 여는 도구를 골라야 합니다.
| 메서드 | 언제 쓰나요? | 다음 .then()이 받는 형태 |
|---|---|---|
.json() | 서버가 JSON 구조(배열/객체)로 데이터를 줄 때 (가장 많이 씀!) | { success: true, user: 'kim' } (JS 객체) |
.text() | 서버가 HTML이나 일반 텍스트 문장을 통째로 줄 때 | "안녕하세요!" (일반 문자열) |
.blob() | 이미지, PDF, ZIP 등 실제 ‘파일’을 다운로드할 때 | Blob (바이너리 파일 데이터) |
⚠️ 주의: 봉투는 한 번만 열 수 있습니다! 한 코드 안에서
res.text()를 해버리면 봉투가 찢어져서(?) 그 밑에서 다시res.json()을 쓸 수 없으니 데이터 성격에 맞는 것 딱 하나만 골라 쓰세요.
4. 실전! 데이터를 서버로 보낼 때 (POST 요청)
단순히 데이터를 가져오는 것(GET) 외에, 로그인이나 글쓰기처럼 서버로 데이터를 보낼 때(POST)는 fetch()의 두 번째 인자에 옵션 상자를 넣어줍니다.
JavaScript
📝 핵심 요약
fetch()는 [1단계: 응답 봉투 받기] ➡️ [2단계: 봉투 열어 내용물 꺼내기] 구조이다..then((res) => ...)와.then((data) => ...)의 변수명은 개발자 마음대로 지어도 된다.- 서버가 준 데이터 형식에 따라
.json()또는.text()로 봉투를 열어준다. - 예외 처리를 위해
if (!res.ok)로 봉투의 상태를 먼저 점검하고, 마지막엔.catch()를 붙여주는 것이 안전하다.
이제 fetch 코드를 보셔도 절대 헷갈리지 않으시겠죠? 든든하게 단축키나 이벤트 리스너와 엮어서 멋진 웹 애플리케이션을 만들어보세요! 🚀
단축형태
JavaScript
화살표 함수에서는 함수 내부가 딱 한 줄뿐이라면, 아래 두 가지를 세트로 생략할 수 있습니다.
- 중괄호
{ } return키워드
중괄호를 없애면 자바스크립트가 알아서 “아, 이 한 줄의 실행 결과를 자동으로 return(반환)하라는 뜻이구나!”라고 똑똑하게 이해합니다.
⚠️ 주의할 점 딱 한 가지
줄여 쓰실 때 가장 많이 하는 실수가 중괄호는 넣고 return은 빼먹는 것입니다.
JavaScript
중괄호 { }를 여는 순간, 자바스크립트는 자동으로 값을 반환하지 않습니다. 따라서 중괄호를 쓸 거라면 반드시 내부 코드에 return을 명시해 주어야 합니다.
- 쓸 거면 다 쓰기:
(res) => { return res.json(); } - 뺄 거면 다 빼기:
(res) => res.json()
답글 남기기
댓글을 달기 위해서는 로그인해야합니다.