React로 가사 찾기 앱 만들기

소개

이 튜토리얼에서는 React를 사용하여 가사 찾기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 API 통합, 상태 관리 및 동적 콘텐츠 표시를 연습하려는 사람들에게 적합합니다.

프로젝트 개요

가사 찾기를 사용하면 노래 제목과 아티스트 이름을 입력하여 노래 가사를 검색할 수 있습니다. 공개 API에서 가사를 가져와 화면에 표시합니다. 사용자는 자신이 좋아하는 노래의 가사를 빠르게 찾아 읽을 수 있습니다.

특징

• 검색 기능: 노래 제목과 아티스트 이름으로 가사를 검색할 수 있습니다.
• API 통합: 공개 가사 API에서 가사를 가져옵니다.
• 동적 콘텐츠: 사용자 입력에 따라 가사를 동적으로 표시합니다.
• 사용자 친화적인 인터페이스: 가사 검색 및 보기를 위한 깔끔하고 사용하기 쉬운 인터페이스

사용된 기술

• React: 사용자 인터페이스를 구축하고 구성 요소 상태를 관리합니다.
• CSS: 애플리케이션 스타일을 지정합니다.
• JavaScript: API 요청 및 앱 로직을 처리합니다.

프로젝트 구조

프로젝트는 다음과 같이 구성됩니다.

├── public
├── src
│   ├── components
│   │   ├── LyricsFinder.jsx
│   │   ├── SearchForm.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

주요 구성 요소

• LyricsFinder.jsx: 검색 로직을 관리하고 가져온 가사를 표시합니다.
• SearchForm.jsx: 사용자가 노래 제목과 아티스트 이름을 입력할 수 있는 양식을 제공합니다.
• App.jsx: 메인 레이아웃과 LyricsFinder 구성 요소를 렌더링합니다.

코드 설명

가사찾기 구성요소

LyricsFinder 구성 요소는 API 통합을 처리하고 검색 결과를 관리합니다.

import { useState } from "react";
import SearchForm from "./SearchForm";

const LyricsFinder = () => {
  const [lyrics, setLyrics] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const fetchLyrics = async (song, artist) => {
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
      if (!response.ok) {
        throw new Error("Lyrics not found");
      }
      const data = await response.json();
      setLyrics(data.lyrics);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="lyrics-finder">
      <SearchForm onSearch={fetchLyrics} />
      {loading && <p>Loading...</p>}
      {error && <p className="error">{error}</p>}
      {lyrics && <pre className="lyrics">{lyrics}

}

); }; export default LyricsFinder;

로그인 후 복사

가사, 로딩, 오류 메시지 상태를 관리하는 컴포넌트입니다. API에서 가사를 가져와 표시합니다.

검색양식 구성요소

SearchForm 구성 요소는 사용자가 노래 제목과 아티스트 이름을 입력할 수 있는 양식을 제공합니다.

import { useState } from "react";

const SearchForm = ({ onSearch }) => {
  const [song, setSong] = useState("");
  const [artist, setArtist] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(song, artist);
  };

  return (
    <form onSubmit={handleSubmit} className="search-form">
      <input
        type="text"
        placeholder="Song Title"
        value={song}
        onChange={(e) => setSong(e.target.value)}
      />
      <input
        type="text"
        placeholder="Artist Name"
        value={artist}
        onChange={(e) => setArtist(e.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default SearchForm;

이 구성요소는 노래 제목과 아티스트에 대한 사용자 입력을 받아 검색 기능을 실행합니다.

앱 구성요소

App 구성 요소는 레이아웃을 관리하고 LyricsFinder 구성 요소를 렌더링합니다.

import LyricsFinder from './components/LyricsFinder'
import "./App.css"
const App = () => {
  return (
    <div className='app'>
      <div className="heading">
        <h1>Lyrics Finder</h1>
      </div>
      <LyricsFinder/>
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  )
}

export default App

헤더를 제공하고 중앙에 LyricsFinder 컴포넌트를 렌더링하는 컴포넌트입니다.

CSS 스타일링

CSS는 깔끔하고 사용자 친화적인 인터페이스를 보장하기 위해 애플리케이션 스타일을 지정합니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.app {
  width: 100%;
  height: 100vh;
  background-image: url(./assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  background-color: #eab229;
  color: black;
  border: 2px solid white;
  border-radius: 20px;
  text-align: center;
}

.heading h1 {
  font-size: 18px;
}

.lyrics-container {
  margin-top: 10px;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.input-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.track-input-box {
  margin: 7px;
  width: 500px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.track-input-box input {
  width: 480px;
  height: 30px;
  background-color: #363636;
  color: white;
  margin-left: 10px;
  outline: none;
  border: none;
}

.input-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.artist-input-box {
  margin: 7px;
  width: 400px;
  height: 30px;
  background-color: #363636;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow: hidden;
}

.artist-input-box input {
  width: 380px;
  height: 30px;
  margin-left: 10px;
  background-color: #363636;
  color: white;
  border: none;
  outline: none;
}

.search-btn {
  width: 100px;
  padding: 6px;
  border-radius: 7px;
  border: 1.5px solid white;
  background-color: #0e74ad;
  color: white;
  font-size: 16px;
}

.search-btn:hover {
  background-color: #15557a;
}

.output-container {
  background-color: black;
  width: 600px;
  height: 300px;
  border: 1.5px solid white;
  border-radius: 7px;
  overflow-y: scroll;
  margin-block: 40px;
}

.output-container::-webkit-scrollbar {
  display: none;
}

.output-container p {
  margin: 30px;
  text-align: center;
  font-size: 16px;
}

.footer {
  font-size: 14px;
  color: white;
}

스타일링은 사용자 친화적인 시각적 요소와 반응형 디자인으로 깔끔한 레이아웃을 보장합니다.

설치 및 사용법

이 프로젝트를 시작하려면 저장소를 복제하고 종속성을 설치하세요.

git clone https://github.com/abhishekgurjar-in/lyrics-finder.git
cd lyrics-finder
npm install
npm start

이렇게 하면 개발 서버가 시작되고 애플리케이션은 http://localhost:3000에서 실행됩니다.

라이브 데모

여기에서 가사 찾기의 라이브 데모를 확인하세요.

결론

가사 찾기 프로젝트는 API 통합과 React의 동적 콘텐츠 처리를 연습할 수 있는 훌륭한 방법입니다. 깔끔하고 대화형 사용자 인터페이스로 유용한 애플리케이션을 구축하는 실제 사례를 제공합니다.

크레딧

• 영감: 이 프로젝트는 음악을 들으면서 노래 가사를 빠르게 접할 수 있는 필요성에서 영감을 받았습니다.

작가

Abhishek Gurjar는 대화형의 매력적인 웹 애플리케이션 구축에 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.

위 내용은 React로 가사 찾기 앱 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!