[JS] 견종 정보 페이지

DEVELOPMENT/JavaScript

[JS] 견종 정보 페이지

Watnu 2024. 5. 3. 02:49

목표

1. [https://dog.ceo/dog-api/documentation/] 에서 강아지 사진 API 불러오기

2. 필터링 버튼 클릭 시, input에 입력한 견종으로 검색되게 하기

3. Select 에서 선택한 견종으로 img 보이기

4. Top 버튼 클릭 시, 상단으로 이동

5. More 버튼 클릭 시, 이미지 더 불러오기

6. Reset 버튼 클릭시, input 내용 / Select 선택자 / main의 모든 이미지 초기화

메인 화면

  <div id="container">
    <h1>견종 정보 Page</h1>
    <header id="header">
      <span>
        <input type="text" id="filter-text" placeholder="견종을 입력해주세요.">
        <button id="filter-btn">필터링</button>
      </span>
      <select id="filter-selector">
        <option value="">all</option>
      </select>
      <button id="reset-btn">Reset</button>
    </header>
    <main id="main"></main>
    <div class="foot-btn">
      <button id="more-btn">More</button>
      <button id="top-btn">Top</button>
    </div>
  </div>

Window load

랜덤 이미지 가져오기

window.addEventListener('load', function(){
  //강아지 사진 뿌리기
  request01.open('get', apiRandomImg)
  request01.addEventListener('load', function(){
    //객체의 응답을 parse해서 저장한다 
    const response = JSON.parse(request01.response);
    response.message.forEach(function(item) {
      //배열에 저장하기
      currentDogs.push(item)
      const dogImgDiv = document.createElement('div');
      dogImgDiv.classList.add('dog-list');
      dogImgDiv.innerHTML = `
        <img src=${item}>
      `;
      main.appendChild(dogImgDiv);
    });
  })
  request01.send();

open(전달방식, URL주소, 동기여부);

open() 메서드
1. 전달 방식은 요청을 전달할 방식으로 GET 방식과 POST 방식 중 하나를 선택할 수 있습니다.
2. URL 주소는 요청을 처리할 서버의 파일 주소를 전달합니다.
3. 동기 여부는 요청을 동기식으로 전달할지 비동기식으로 전달할지를 전달합니다.
=> 서버에 비동기식 요청: true / 동기식 요청: false 전달하기

send();       // GET 방식
send(문자열); // POST 방식

send() 메서드는 전달 방식에 따라 인수를 가질 수도 안 가질 수도 있습니다.

GET 방식

1. 주소에 데이터(data)를 추가하여 전달하는 방식입니다.

2. GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장된다.

3. 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있다.

4. 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋다.

POST 방식

1. 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.

2. POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.

3. POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송된다.

4. 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높다.

Select List 가져오기

  //Select 에 견종리스트 불러오기
  request02.open('get', apiBreedsList);
  request02.addEventListener('load', function(){
    const response = JSON.parse(request02.response);
    //객체의 key값만 모아서 배열로 만들어줌
    Object.keys(response.message).forEach(function(item){
      const option = document.createElement('option');
      option.textContent = item;
      option.value = item;
      selector.appendChild(option);
    });
  });
  request02.send();
});

버튼 클릭

filter 버튼 클릭

//검색창에 입력후 필터링버튼
filterBtn.addEventListener('click', function(){
  if(input.value !== ''){
    main.innerHTML = '';
  
    let filteredDogs = currentDogs.filter(function(item){
      return item.indexOf(input.value) !== -1
    })
  
    filteredDogs.forEach(function(item){
      displayDogs(item);
      selector.value =``;
    });
    input.value = '';
  }
});

select-option 선택

//Select 변경시
selector.addEventListener('change', function(){
  main.innerHTML = ''

  let selectDog = currentDogs.filter(function(item){
    return item.indexOf(selector.value) !== -1;
  })

  selectDog.forEach(function(item){
    displayDogs(item);
  })
  input.value = '';
})

Reset 버튼 클릭

//Reset 버튼 클릭 시
resetBtn.addEventListener('click', function(){
  // 첫번째 Reset : 새로 API 불러오기
  main.innerHTML = '';
  input.value = '';
  selector.value = '';

  request01.open('get',apiRandomImg);
  request01.addEventListener('send',function(){
    const response = JSON.parse(request01.response)
    response.message.forEach(function(item){
        currentDogs.push(item)
        displayDogs(item)
    })
  })
  request01.send()

  //두번째 Reset : 페이지 새로고침하기
  // location.reload();
})

웹 페이지에서는 한번 로딩할때 불러올 내용이 많다.
=> reset할때 페이지 새로고침보다는 새로 불러오는게 좋다.

More 버튼 클릭

//More 버튼 클릭시
moreBtn.addEventListener('click', function(){
  request01.open('get', apiRandomImg);
  request01.addEventListener('load', function(){
    const response = JSON.parse(request01.response)
    response.message.forEach(function(item){
        currentDogs.push(item)
        displayDogs(item)
    })
  })
  request01.send();
})

Top 버튼 클릭

//Top 버튼 클릭시
topBtn.addEventListener('click', function(){
  //스크롤 시 
  window.scroll({
    top: 0,
    left: 0,
    behavior: 'smooth' //부드럽게 스크롤
  })
})

마무리

보완해야 할 점

1. Search에서 filter했을 때, 해당 카테고리로 select-option 값 같이 바꿔지게 하기

추후 공부가 필요한 개념

1. HTTP 요청 방법 개념