nextJS carHub 클론코딩(2)

콤보박스

콤보박스는 input에 값을 입력할 때 자동으로 사용가능한 값이 드롭다운으로 펼쳐 보여주는 기능이다. 나는 이 콤보박스를 headlessUI라는 라이브러리를 활용하여 만들기로 하였다.

npm install @headlessui/react

사용법은 역시 라이브러리 답게 간단했다.

1. Combobox에 들어갈 배열을 지정해주고
2. 그 값을 필터링해주는 새로운 배열을 작성해 준 다음
3. headless UI가 제공해주는 방식대로 Combobox.Input, Combobox.Select 등을 채워나가면 된다.

다음은 headlessUI의 콤보박스 예시이다.

---

API 활용

자동차 정보

자동차들의 데이터들을 가지고 오는 데는 Rapid-API 라는 사이트를 참조했다. 사이트의 링크는 다음과 같다

https://rapidapi.com/apininjas/api/cars-by-api-ninjas?utm_source=youtube.com%2FJavaScriptMastery&utm_medium=referral&utm_campaign=DevRel

모두 무료로 사용할 수 있고 안에서 어떤 방식으로 데이터를 불러올 것인지 선택할 수 있다.

나는 여기에서 javascript - fetch를 사용하였다.
그 기본 형식은 이러하다.

위 fetchCars() 함수를 보면 주어진 변수가 아무것도 없어서 저 함수를 사용할 때 마다 corolla 모델만을 필터링 없이 불러야 한다는 것을 알 수 있다.
고로 여기에서 url parameter값을 넣어 불러오는 데이터 값을 필터링해보았다.

아까와는 다르게 props를 통하여 연식, 모델, 제조사 등을 가지고 오고 그 값들을 url에 집어넣은 것을 볼 수 있다.

자동차 이미지

나에게 필요했던 사진정보는 한 자동차의 3각도 사진이었고 이는 imagin.studio에서 찾을 수 있을 줄 알았으나... 2023년 9월1일을 기준으로 개인에게 막혀있는 api가 되었다. 다행히도 유튭에서 준 api key를 활용하여 api를 불러내는데 성공했다.

이미지는 URL에 parameter값을 직접 넣어주는 방식이었다.