[이미지 갤러리] tailwind 사용 및 Pixabay API 사용하여 검색 결과에 맞는 이미지 가져오기

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img src="https://source.unsplash.com/random" alt="" className="w-full" />
      <div className="px-6 py-4">
        <div className="font-bold text-purple-500 text-xl mb-2">
          Photo by John Doe
        </div>
        <ul>
          <li>
            <strong>Views: </strong> 4000
          </li>
          <li>
            <strong>Downloads: </strong> 300
          </li>
          <li>
            <strong>Likes: </strong> 400
          </li>
        </ul>
      </div>
      <div className="px-6 py-4 text-sm font-semibold text-gray-700">
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1  mr-2">
          #tag1
        </span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 mr-2">
          #tag2
        </span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1  mr-2">
          #tag3
        </span>
      </div>
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

 

 

https://pixabay.com/api/docs/

Pixabay API Documentation

에서 API 키 받기

 

 

 

 

 

 

개인정보와 같이 따로 설정값을 넣을 때는 .env파일을 만들어서 사용한다. 

변수를 사용해서 본인의 키를 저장하는데

앞에는 REACT_APP이 들어가야하고 뒤에 아무 이름이나 넣는다

 

그리고 env파일은 깃허브나 공적인 곳에 올려지면 안되기 때문에 

gitignore에 .env파일도 설정되어있는지 확인한다.

 

 

 

픽사베이 API 요청하기

usestate를 사용해서 불러온다.

 

 

 

function App() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [term, setTerm] = useState("flowers"); //검색어

  //처음에 한 번만 실행
  //사진 가져옴
  useEffect(() => {
    fetch(
      `https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAY_API_KEY}&q=${term}&image_type=photo`
    )
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  }, []);

 

검색어는 q로 검색할 수 있다.

 

 

 

.then : 그 다음에 res. (결과)를 json으로 변환한다.

그다음 (then) 데이터를 콘솔에 출력하고 

에러는 콘솔로 출력한다. 

 

await를 사용해서 기다릴수도 있고 위와같이 then으로도 사용가능하다. 

이름은  res를 적던 response를 적던 상관없다. 

위에서 받은 결과를 말한다.

이 결과는 문자열로 받기 때문에 json으로 바꿔줌

 

 

 

위와 같이 입력했는데 

콘솔에 이러한 오류가 출력된다.

 

SyntaxError: Unexpected token 'E', "[ERROR 400]"... is not valid JSON

 

 

.env 에서 작성한 키 값을 가져오지 못하기 때문에 발생한 에러 

 

https://www.npmjs.com/package/env-cmd

env-cmd

 

 

env 라이브러리를 설치하지 않아서 값을 가져오지 못함 

그래서 npm i env-cmd로 설치해준다.

 

그 뒤 콘솔 확인하니까 잘 출력됨

 

 

object안에 hits라는 이름으로 이미지 정보를 가져온다. 

 

그래서 가져올 때 hits 만 가져오도록 수정한다. 

 

 

 

 

 

app.js에서 작성한 imageCard를 컴포넌트로 만든다. 

 

app.js

    <div className="container mx-auto my-7">
      <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7">
        {images.map((image) => (
          <ImageCard key={image.id} image={image} />
        ))}
      </div>
    </div>

 

 

그리고 ImageCard 에서 프롭스로 image를 가져와서 

img scr 주소에서 각 이미지url을 넣어주면 됨 

 

props를 보니 image 안에는 여러 값들이 있는데 

그 중에 largeImageURL가 이미지 url을 가지고 있어서 가져왔다. 

 

 

 

 

나머지 정보들도 props로 가져온다

 

import React from "react";

const ImageCard = ({ image }) => {
  const tags = image.tags.split(",");
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img src={image.largeImageURL} alt="" className="w-full" />
      <div className="px-6 py-4">
        <div className="font-bold text-purple-500 text-xl mb-2">
          Photo by {image.user}
        </div>
        <ul>
          <li>
            <strong>Views: </strong> {image.views}
          </li>
          <li>
            <strong>Downloads: </strong> {image.downloads}
          </li>
          <li>
            <strong>Likes: </strong> {image.likes}
          </li>
        </ul>
      </div>
      <div className="px-6 py-4 text-sm font-semibold text-gray-700">
        {tags.map((tag, idx) => (
          <span
            key={idx}
            className="inline-block bg-gray-200 rounded-full px-3 py-1  mr-2 mt-2"
          >
            #{tag}
          </span>
        ))}
      </div>
    </div>
  );
};

export default ImageCard;

 

 

 

태그의 경우에는 쉼표로 구분되어있어서 

split으로 분리해줘야함 

 

 

그리고 map(반복문) 을 사용해서 tags에 있는 배열을 span태그로 출력한다.

 

 

map은  배열의 값과 , 인덱스를 넣어주는데

 

배열의 크기만큼 실행된다.

 

map의 경우 key를 넣지 않으면 warning메세지가 출력되기 때문에 

key는 인덱스로 설정했다.  그리고 출력되는 값은 배열 1개의 값인 tag로 출력했다. 

---

이미지 검색창 만들기

 

https://flowbite.com/docs/forms/search-input/

Tailwind CSS Search Input - Flowbite

 

ㄴ

컴포넌트 추가

 

 

콘솔창에 보면 이러한 오류가 뜬다 . 

이러한 오류는 jsx문법상 카멜케이스를 사용하기 때문에 복사 붙여넣기한 코드들을 수정해주면됨

class -> className

stroke_linecap -> strokeLinecap 등으로 오류나는 부분들을 바꿔주면 오류는 사라진다.

 

 

 

 

 

그리고 

 

검색창에 입력을하면 useState로 입력값을 저장하게 만들어준다

 

 

 

 

 

input 값은 text이고, text의 값이 바뀔 때 마다 setText로 저장한다. 

 

 

 

 

form 에는 submit 시 onsubmit 함수 실행하게 함

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

현재는 한 단어만 가능한데 

 

두 단어 이상의 검색어를 넣고자 하면 

ImageSearch의 setTerm에 넣는 text를 수정한다

두 단어로 검색을 하기 위해서는 공백을 +로 바꿔주면 된다. 

 

replace로  공백을 +로 바꿨다. 

 

 

 

 

 

검색 결과가 나오지 않는 검색어는 

 

 

 

 

결과 없음 출력

 

---

 

 

 

https://blog.naver.com/dxeyexn/223207717691

[인공지능사관학교 4기] 리액트 map, filter, concat