7/22TIL

이세영·2024년 7월 22일

TIL

배경: 약물 정보를 쉽게 검색할 수 있는 웹 애플리케이션을 만들기 위해 e약 API를 사용하기로 결정함.

주요 기술:

Next.js
Axios

구현 과정:

Next.js 프로젝트 생성:
- npx create-next-app@latest my-epharmacy 명령어로 새 프로젝트 생성.
- 프로젝트 디렉토리로 이동 후 npm install axios로 Axios 설치.

API 호출 함수 작성:

lib/api.js 파일 생성.
e약 API에 GET 요청을 보내는 fetchMedicine 함수 구현.

import axios from 'axios';

const API_URL = 'https://api.e약.com/search'; // 실제 API URL로 변경

export const fetchMedicine = async (query) => {
  try {
    const response = await axios.get(API_URL, {
      params: { q: query },
    });
    return response.data;
  } catch (error) {
    console.error('API 호출 오류:', error);
    throw error;
  }
};

검색 컴포넌트 작성:

components/Search.js 파일 생성.
사용자 입력을 받아 API를 호출하고 결과를 표시하는 컴포넌트 구현.

import { useState } from 'react';
import { fetchMedicine } from '../lib/api';

const Search = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    if (!query) return;
    try {
      const data = await fetchMedicine(query);
      setResults(data);
    } catch (error) {
      console.error('검색 오류:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="약물 이름 검색"
      />
      <button onClick={handleSearch}>검색</button>
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li> // 실제 데이터 구조에 맞게 수정
        ))}
      </ul>
    </div>
  );
};

export default Search;

페이지에 컴포넌트 추가:

pages/index.js 파일 수정하여 검색 컴포넌트 추가.

import Head from 'next/head';
import Search from '../components/Search';

export default function Home() {
  return (
    <div>
      <Head>
        <title>e약 검색</title>
      </Head>
      <main>
        <h1>약물 검색</h1>
        <Search />
      </main>
    </div>
  );
}

결과: Next.js에서 e약 API를 통해 약물 검색 기능을 성공적으로 구현함. 사용자 입력에 따라 약물 정보를 실시간으로 검색하여 결과를 표시할 수 있음.

배운 점: API 통신과 컴포넌트 상태 관리를 통해 동적인 웹 애플리케이션을 만드는 방법을 익힘.

이세영

블로그 관리 하루에 한번씩 도전!

이전 포스트

7/19 TIL

다음 포스트

7/22TIL

7/19 TIL

7/23TIL

0개의 댓글