JSON 제공하기 (API 만들기)
본인 서버가 인터넷의 언어를 말하게 하기
⏱ 예상 ~7분
01 · 읽기
지금까지 본인의 routes 는 res.send() 로 평문 텍스트를 돌려줬어요. 간단한 메시지에는 좋지만, 진짜 API 는 평문 텍스트를 돌려주지 않아요. JSON 을 돌려줘요.
Level 5 의 JSON 기억나요? 인터넷의 보편적인 데이터 형식이에요. 본인 폰이 날씨를 확인하거나, 웹사이트가 본인 프로필을 로드하거나, 앱이 새 게시물을 가져올 때, 그 데이터는 전부 JSON 으로 전송돼요.
Express 는 이걸 정말 쉽게 해줘요. res.send() 대신, res.json() 을 쓰고 JavaScript 객체를 넘겨줘요. Express 가 자동으로 JSON 으로 변환하고, 올바른 헤더를 추가해서, 브라우저와 앱이 어떻게 읽을지 알게 해줘요.
핵심 정리
- res.send() 는 평문 텍스트를 돌려줘요
- res.json() 은 JSON 데이터를 돌려줘요. API 의 표준이에요
- Express 가 JavaScript 객체를 JSON 으로 자동 변환해요
- 이게 본인이 써 본 모든 API 가 뒤에서 동작하는 방식이에요
02 · 실기 실습
app.js 에 새 JSON route 를 추가해요. 이 route 는 현재 시간과 날짜를 구조화된 데이터로 돌려줘요. 다른 routes 와 함께 두세요 (app.listen() 앞에).
app.get('/api/time', (req, res) => {
res.json({
time: new Date().toLocaleTimeString(),
date: new Date().toLocaleDateString()
});
});03 · 퀴즈
res.send() 와 res.json() 의 차이는 뭔가요?
- res.send() 가 res.json() 보다 빨라요
- res.json() 은 배열에만 쓸 수 있어요
- 차이 없어요
- res.send() 는 평문 텍스트를 돌려주고, res.json() 은 구조화된 JSON 데이터를 돌려줘요
04 · 실기 실습
Ctrl+C 로 서버를 멈추고 재시작한 다음, 브라우저로 새 route 를 방문해요. 현재 시간과 날짜가 있는 JSON 데이터가 보일 거예요. 평문 텍스트가 아니라, 중괄호와 key-value 쌍이 있는 구조화된 데이터요.
node app.js
http://localhost:3000/api/time
05 · 빈칸 채우기
Express 에서 JSON 데이터를 돌려주려면, res.send() 대신 res._____() 를 써요.
06 · 읽기
본인 서버는 이제 JSON 을 말해요. 인터넷의 모든 API 와 같은 언어죠.
페이지를 몇 번 새로고침해 봐요. 시간이 매 요청마다 다른 게 보이죠? 본인 서버가 누군가 URL 에 연결할 때마다 코드를 다시 실행하기 때문이에요. 동적이에요. 그 순간의 시간에 따라 응답을 생성해요.
이게 정적 웹사이트 (매번 같은 내용) 와 API (내용이 데이터, 시간, 사용자, 또는 뭐든에 따라 바뀜) 의 차이예요.
Level 5 에서 배운 API 와 JSON 기억나요? 이제 그 대화의 반대편에 있어요. API 를 쓰는 게 아니라, API 를 만들고 있어요.
07 · 퀴즈
왜 /api/time endpoint 가 새로고침할 때마다 다른 시간을 돌려주나요?
- 서버가 각 요청마다 new Date() 를 다시 실행해서, 항상 현재 시간을 돌려줘요
- 브라우저가 다른 버전의 페이지를 캐싱하고 있어요
- Express 가 각 응답에 무작위 타임스탬프를 생성해요
- JSON 형식이 자동으로 타임스탬프를 업데이트해요
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.