이번 프로젝트에서는 자바스크립트와 React.js를 사용하여 영화 검색 애플리케이션을 제작해 보겠습니다. 이 애플리케이션은 사용자가 원하는 영화를 검색할 수 있는 기능을 제공합니다.

준비물

이 프로젝트를 시작하기 전에 몇 가지 준비물이 필요합니다.

1. Node.js 설치: React.js를 사용하기 위해 Node.js가 설치되어 있어야 합니다.

2. 영화 데이터 API: 영화 정보를 제공하는 API가 필요합니다. 이 프로젝트에서는 OMDb API를 사용하겠습니다. 해당 사이트에서 API 키를 발급받아야 합니다.

프로젝트 설정

1. 새로운 React.js 프로젝트 생성:

   npx create-react-app movie-search-app
   

2. 프로젝트 디렉토리로 이동:

   cd movie-search-app
   

3. 필요한 패키지 설치:

   npm install axios
   

   Axios는 HTTP 요청을 처리하기 위해 사용될 것입니다.

애플리케이션 개발

API 호출 함수 작성하기

사용자가 입력한 영화 제목에 따라 API를 호출하여 영화 정보를 가져오는 함수를 작성해 보겠습니다. src/App.js 파일을 열고 다음과 같이 코드를 작성합니다.

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [movies, setMovies] = useState([]);

  const searchMovies = async () => {
    try {
      const apiKey = 'YOUR_API_KEY';
      const response = await axios.get(`http://www.omdbapi.com/?apikey=${apiKey}&s=${searchTerm}`);
      setMovies(response.data.Search);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <button onClick={searchMovies}>검색</button>

      {movies.map((movie) => (
        <div key={movie.imdbID}>
          <h2>{movie.Title}</h2>
          <p>{movie.Year}</p>
          <img src={movie.Poster} alt={movie.Title} />
        </div>
      ))}
    </div>
  );
}

export default App;

여기서 YOUR_API_KEY 부분을 발급받은 OMDb API 키로 교체해야 합니다.

애플리케이션 실행

위의 코드를 작성한 뒤에는 다음 명령어로 애플리케이션을 실행할 수 있습니다.

npm start

애플리케이션이 성공적으로 실행되면 웹 브라우저에서 http://localhost:3000에 접속하여 영화 검색 애플리케이션을 사용할 수 있습니다.

결론

이렇게 자바스크립트와 React.js를 사용하여 영화 검색 애플리케이션을 제작할 수 있습니다. React.js의 컴포넌트 기반 아키텍처를 활용하여 애플리케이션을 구성하고, Axios를 사용하여 API 호출을 처리할 수 있습니다.

향후 프로젝트를 확장하고 향상시키는 데도 이 코드를 기반으로 개발을 진행할 수 있습니다.

#React #JavaScript