외부 API·라이브러리 연동시키기

🔌 바퀴를 다시 발명하지 마세요

소프트웨어 개발의 오래된 지혜: "바퀴를 다시 발명하지 마라." 이미 잘 만들어진 라이브러리와 API가 있는데 처음부터 만들 필요가 없습니다. 바이브 코딩에서 AI는 어떤 라이브러리를 써야 하는지 추천도 해주고, 연동 코드도 만들어줍니다. 여러분은 무엇을 원하는지만 알면 됩니다.

🔍 Step 1 — 적합한 패키지 추천받기

특정 기능이 필요하면 직접 만들기 전에 AI에게 추천부터 받으세요:

React 앱에서 날짜·시간을 다루는 기능이 필요해. 날짜 포맷팅, 날짜 계산(D-day), 타임존 처리가 필요해. 어떤 라이브러리를 쓰는 게 좋아? 2~3개 추천하고 각각의 장단점을 알려줘.

AI가 date-fns, Day.js, Temporal(네이티브 API) 등을 비교해줍니다. 추천 이유를 확인하고 가장 단순한 것을 선택합니다.

📦 Step 2 — 설치와 기본 연동

라이브러리를 결정했으면 설치하고 연동합니다:

date-fns를 쓰기로 했어. 설치하고, 날짜를 "2025년 6월 17일 (화)" 형식으로 포맷하는 예시 코드를 작성해줘. 그리고 오늘로부터 D-30, D+7 날짜를 계산하는 예시도 포함해줘.

npm install date-fns

AI가 설치 명령어와 사용 예시 코드를 모두 만들어줍니다.

🌤️ 실전 예시 — 외부 날씨 API 연동

외부 API(서비스)를 연동하는 예시로 날씨 API를 써봅니다. OpenWeatherMap은 무료 플랜으로 충분히 사용 가능합니다.

OpenWeatherMap API를 연동해서 서울의 현재 날씨를 보여주는 기능을 만들어줘.
- API 키는 환경변수 NEXT_PUBLIC_WEATHER_API_KEY에 넣을게
- 온도(섭씨), 날씨 상태(맑음/흐림 등), 아이콘을 표시해줘
- 로딩 중에는 스켈레톤 UI, 에러 시에는 재시도 버튼

AI가 API 호출 코드, 에러 처리, UI 컴포넌트를 모두 만들어줍니다.

🔑 API 키와 환경변수

외부 API는 대부분 API 키가 필요합니다. API 키는 절대 코드에 직접 쓰면 안 됩니다 — 환경변수를 사용하세요:

# .env.local 파일 (절대 git에 올리면 안 됨!)
NEXT_PUBLIC_WEATHER_API_KEY=your_api_key_here

# .gitignore에 반드시 포함
.env.local
.env

⚠️ 중요: API 키가 코드에 포함된 채 GitHub에 올리면, 자동화된 봇이 수 분 내에 키를 훔쳐갑니다. 환경변수 사용은 선택이 아닌 필수입니다.

📋 공식 문서를 맥락으로 주기

AI가 라이브러리의 구버전 API를 쓰는 경우가 있습니다. 이럴 때는 공식 문서의 관련 부분을 복사해서 맥락으로 제공하세요:

아래는 OpenWeatherMap API의 현재 날씨 엔드포인트 문서야. 이를 참고해서 연동 코드를 수정해줘:
[공식 문서 내용 붙여넣기]

공식 문서가 맥락으로 들어가면 AI가 정확한 현재 API를 사용합니다.

⚠️ 버전·호환성 주의

라이브러리를 설치할 때 버전이 맞지 않아 에러가 나는 경우가 자주 있습니다:

• React 18과 호환되지 않는 라이브러리
• Next.js 15 App Router에서 동작하지 않는 구버전 패턴
• Node.js 버전 요구사항 불일치

이런 에러가 나면 에러 메시지 전체를 AI에게 주고, 현재 사용 중인 각 패키지 버전도 함께 알려주세요:

npm install 후 아래 에러가 났어. 현재 환경: Node.js 20, React 18, Next.js 14. 호환되는 버전으로 설치하는 방법을 알려줘:
[에러 메시지]

✅ 정리

• 기능을 직접 만들기 전에 AI에게 적합한 라이브러리를 추천받으세요.
• API 키는 반드시 환경변수로 관리하고, 절대 코드에 직접 쓰지 마세요.
• 공식 문서를 맥락으로 주면 AI가 최신 API를 정확하게 사용합니다.
• 버전 에러가 나면 현재 환경 정보와 함께 AI에게 해결을 요청하세요.