오토프로그13강: API 연동
외부 서비스의 날씨 데이터를 내 화면에 붙여요
오늘 끝나면 이런 걸 갖게 돼요. 서울의 현재 온도·체감 온도·날씨·습도·바람을 보여 주는 페이지가 생겨요. API 키는 화면에 드러나지 않게 보관합니다.
12강에서 만든 Next.js 프로젝트와 클로드 코드를 열어 주세요. 직접 입력할 명령어나 코드는 없어요.
1단계: 연습용 API를 불러와요
API(Application Programming Interface, 프로그램끼리 데이터를 주고받는 창구)는 식당의 주문 창구와 비슷해요. 메뉴에 있는 데이터를 요청하면 해당 서비스가 결과를 돌려줍니다.
먼저 가입과 열쇠가 필요 없는 JSONPlaceholder로 흐름을 확인해요.
JSONPlaceholder의 https://jsonplaceholder.typicode.com/todos/1 주소에서할 일 데이터 하나를 가져와 보여 줘.아직 프로젝트 파일은 바꾸지 마.어떤 요청을 보냈고 어떤 응답을 받았는지 쉬운 한국어로 설명해 줘.응답에서 id, title, completed가 무엇인지도 알려 줘.
클로드가 데이터를 보여 주면 첫 API 조회가 끝나요. 같은 방식으로 게시글 100개는 https://jsonplaceholder.typicode.com/posts, 사용자 10명은 https://jsonplaceholder.typicode.com/users에서 받을 수 있어요. 1번 앨범의 사진 주소는 https://jsonplaceholder.typicode.com/photos?albumId=1입니다.
2단계: 날씨 서비스의 키를 받아요
OpenWeatherMap은 전 세계 날씨 데이터를 제공해요. 무료 플랜은 분당 60회, 월 100만 회까지 호출할 수 있어요.
- OpenWeatherMap 가입에서 회원가입해요.
- 이메일 인증을 마치고 로그인해요.
- 상단의 API keys에서 기본 키를 복사해요.
가입, 이메일 인증, 키 복사는 사람이 직접 해야 해요. 발급된 키가 바로 작동하지 않으면 잠시 뒤 다시 확인하세요. 이것만 직접 하시면 나머지는 클로드가 해요.
API 키를 브라우저 주소창이나 클로드 대화창에는 넣지 마세요. 다음 단계에서 내 컴퓨터의 비밀값 파일에만 붙여 넣습니다.
3단계: 키를 안전하게 보관해요
먼저 클로드에게 키를 넣을 자리만 준비하게 하세요.
현재 프로젝트의 .env.local 파일을 확인해 줘.기존 값은 그대로 두고 WEATHER_API_KEY를 넣을 빈 자리만 추가해 줘.이 이름에는 NEXT_PUBLIC_ 접두사를 붙이지 마..env.local이 GitHub 저장 대상에서 빠져 있는지도 확인해 줘.비밀값을 읽거나 출력하지 말고, 내가 키를 직접 붙일 위치만 열어 줘.바꾸기 전에 수정할 파일과 내용을 먼저 보여 줘.
열린 .env.local의 WEATHER_API_KEY 자리에 복사한 키를 붙이고 저장하세요. 키 붙여넣기만 직접 하시면 됩니다.
NEXT_PUBLIC_이 붙은 값은 브라우저로 전달돼요. Supabase의 공개용 열쇠는 괜찮지만, OpenWeatherMap 키에는 이 접두사를 붙이지 않아요.
4단계: 서울 날씨 페이지를 만들어요
브라우저가 외부 날씨 서비스에 직접 주문하면 키가 보일 수 있어요. 그래서 서버 라우트(Route Handler, 내 서버에서 대신 요청하는 작은 창구)가 카운터 직원처럼 키를 들고 주문합니다.
클로드에게 아래 프롬프트를 보내세요.
OpenWeatherMap API로 서울 날씨를 보여 주는 페이지를 만들어 줘.작업 조건:1. app/api/weather/route.ts에 서버 라우트를 만들어 줘.2. .env.local의 WEATHER_API_KEY는 서버에서만 읽어 요청의 appid 값으로 사용해 줘. 브라우저 응답에는 넣지 마.3. 서울 좌표는 lat=37.5665, lon=126.9780을 사용해 줘.4. https://api.openweathermap.org/data/2.5/weather 주소에 units=metric, lang=kr로 요청해 줘.5. app/weather/page.tsx는 외부 서비스가 아니라 /api/weather만 호출하게 해 줘.6. 현재 온도, 체감 온도, 날씨 설명, 습도, 바람 속도를 카드로 보여 줘.7. 불러오는 중과 실패했을 때의 문구도 넣어 줘.8. 어두운 배경, 밝은 글씨, 청록색 #06b6d4를 쓰고 휴대폰에서도 잘 보이게 해 줘.외부 라이브러리, 위치 자동 감지, 다른 도시는 추가하지 마.src 폴더를 쓰는 프로젝트라면 현재 구조에 맞는 경로를 골라 줘.먼저 바꿀 파일과 작업 순서를 보여 주고, 내 확인 뒤 진행해 줘.환경 변수를 추가한 뒤 개발 서버가 계속 켜져 있었다면 다시 시작해 줘.완성하면 API 키가 브라우저로 전달되지 않는지 검사하고 /weather를 열어 줘.
브라우저에 서울 날씨 카드가 보이면 성공이에요. 키가 아직 작동하지 않으면 잠시 뒤 다시 확인하세요.
온도는 main.temp, 체감 온도는 main.feels_like, 습도는 main.humidity에서 와요. 날씨 설명은 weather[0].description, 바람 속도는 wind.speed를 사용합니다. 이 이름은 외울 필요 없어요.
5단계: 확인하고 저장해요
마지막으로 클로드가 기능과 비밀값을 함께 점검하게 하세요.
/weather 페이지를 점검해 줘.확인할 것:1. 서울의 현재 온도, 체감 온도, 날씨 설명, 습도, 바람 속도가 보이는지2. 불러오는 중과 실패 화면이 있는지3. WEATHER_API_KEY에 NEXT_PUBLIC_ 접두사가 없는지4. API 키가 브라우저 코드, 화면, 로그, Git 저장 대상에 들어가지 않았는지5. 날씨 페이지가 /api/weather를 통해서만 데이터를 받는지비밀값 자체는 출력하지 마.문제가 있으면 원인과 고칠 파일을 먼저 설명하고 해당 부분만 고쳐 줘.모두 맞으면 지금 상태 저장하고 깃허브에 올려 줘.실행 전에 무엇을 할지 먼저 보여 줘.
브라우저 로그인이나 권한 승인 창이 나오면 직접 진행하세요. 승인 뒤 클로드가 점검 결과와 깃허브 주소를 보여 주면 실습이 끝나요.
API는 네 가지 주문을 자주 써요
12강에서 배운 데이터 만들기·읽기·고치기·지우기(CRUD)와 역할이 비슷해요. HTTP(웹에서 요청과 응답을 주고받는 규칙) 메서드는 그 동작을 다음처럼 나눕니다.
| HTTP 메서드 | 식당 비유 | 하는 일 |
|---|---|---|
| GET | 메뉴 보기 | 데이터를 가져와요. |
| POST | 새 주문 | 데이터를 만들어요. |
| PUT | 주문 전체 변경 | 데이터를 바꿔요. |
| DELETE | 주문 취소 | 데이터를 지워요. |
일부만 고칠 때는 PATCH를 쓰기도 해요. 이번 강에서는 데이터를 읽는 GET만 사용했습니다.
이번 강에서 기억할 것
API는 외부 서비스에 데이터를 요청하는 주문 창구예요. 이번에는 날씨를 직접 수집하지 않고 OpenWeatherMap에 요청했습니다.
공개하면 안 되는 API 키는 NEXT_PUBLIC_ 없이 .env.local에 보관하세요. 브라우저 대신 서버 라우트가 외부 서비스에 요청하면 키를 감출 수 있어요.
이런 분께 추천해요
내 앱에 날씨·뉴스·환율처럼 외부 데이터를 보여 주고 싶은 분께 알맞아요. 지도, 결제, AI(인공지능)처럼 이미 제공되는 기능을 연결하고 싶은 분도 API에서 시작할 수 있어요.
참고 링크
- JSONPlaceholder - 무료 연습용 API
- OpenWeatherMap 공식 사이트
- OpenWeatherMap Current Weather API 문서
- OpenWeatherMap API 키 발급 가이드
- MDN Web Docs - fetch API 설명 (한국어)
- Next.js 환경 변수 설정 가이드
- Next.js 라우트 핸들러(서버 API) 가이드
다음 강
14강: 인증 — 로그인 만들기에서는 Supabase Auth로 사용자를 확인하고, 각자 자기 할 일만 보게 만들어요.