7/23TIL

E약은요 API 사용

• E약은요 API에서 데이터를 가져오기 위해 API 키와 기본 URL을 환경 변수로 설정하는 방법을 학습했습니다.
• .env.local 파일에 API 키와 기본 URL을 저장하고, Next.js API 라우트에서 이를 사용하는 방법을 구현했습니다.

# .env.local
API_KEY=your_api_key_here
BASE_URL=https://api.yourservice.com

API 데이터 처리

• API를 통해 모든 약 정보를 받아오고, 그중에서 약 이름(itemName)과 제조사(entpName)를 추출하는 코드를 작성했습니다.
• API 응답에서 약 목록을 안전하게 가져오기 위해 data.response.body.items || [] 구조를 사용하여 데이터 유효성을 검사하는 이유를 이해했습니다.

// pages/api/search.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { pageNo = 1, numOfRows = 100 } = req.query;

    try {
        const apiUrl = `${process.env.BASE_URL}?serviceKey=${process.env.API_KEY}&pageNo=${pageNo}&numOfRows=${numOfRows}`;
        const response = await fetch(apiUrl);
        
        if (!response.ok) {
            throw new Error('네트워크 응답에 문제가 있습니다.');
        }

        const data = await response.json();
        const items = data.response.body.items || []; // 안전한 데이터 접근
        const formattedItems = items.map((item: any) => ({
            itemName: item.itemName,
            entpName: item.entpName,
        }));

        res.status(200).json(formattedItems);
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: '데이터를 가져오는 데 실패했습니다.' });
    }
}

클라이언트 측 코드

• React 컴포넌트에서 API를 호출하고, 로딩 상태 및 오류 처리를 구현하는 방법을 배웠습니다.
• 오류의 형식이 정해지지 않은 문제를 해결하기 위해 error의 타입을 string | null로 정의하고, 오류 메시지를 처리하는 방법을 학습했습니다.

// pages/search.tsx
import { useEffect, useState } from 'react';

interface Item {
    itemName: string; // 약 이름
    entpName: string; // 제조사
}

const SearchPage: React.FC = () => {
    const [items, setItems] = useState<Item[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null); // error의 타입 정의

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('/api/search?pageNo=1&numOfRows=100');
                if (!response.ok) {
                    throw new Error('네트워크 응답에 문제가 있습니다.');
                }
                const data = await response.json();
                setItems(data);
            } catch (error) {
                if (error instanceof Error) {
                    setError(error.message);
                } else {
                    setError('알 수 없는 오류 발생');
                }
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    if (loading) return <div>로딩 중...</div>;
    if (error) return <div>오류: {error}</div>;

    return (
        <div>
            <h1>약 목록</h1>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>
                        {item.itemName} - {item.entpName}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default SearchPage;