오징옆의 IT

const $keyword = document.querySelector(".keyword");
const $keywords = document.querySelector(".keywords");
const $searchResults = document.querySelector(".search-results");
const $noResult = document.getElementById("noResult");
const $noValue = document.getElementById("noValue");
const $result = document.querySelector(".result");
const $resultName = document.getElementsByName('resultName');
const $body = document.querySelector('body');
const controller = new AbortController();

function searchImg(value){
  loading('start');
  fetch(
    `https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/search?q=${value}`
  )
    .then((res) => res.json())
    .then((results) => {
      loading('finish');
      if (results.data) {
        if(results.data.length==0){
          $noResult.style.display="block";
          $searchResults.innerHTML = "";
        }
        else{
          console.log(results.data)
          $result.innerHTML = "";
          $noResult.style.display="none";
          $searchResults.innerHTML = results.data
          .map((cat) => `<article><img src="${cat.url}" /></article>`)
          .join("");
        }

      }
    });
}

function loading(state){

  if(state=="start"){
    document.getElementById('loadingImage').style.display='block'; 
  }
  else{
    document.getElementById('loadingImage').style.display='none';
  }
   
}

$body.addEventListener('click', function(e){
  var target = e.target;
  if(target == e.currentTarget.querySelector(".result") ){
    return ;
  }
  $result.innerHTML = "";
});

$keyword.addEventListener("keyup", (e) => {
  controller.abort(); //요청 취소
  const { value } = e.target;
  const { key } = e;
  if (value === "") {
    $noValue.style.display="block";
    return;
  }
  if (key === "Enter") {
    $noValue.style.display="none";
    searchImg(value);
  }
  else if(e.keyCode  == 27){
    $noValue.style.display="none";
    $result.innerHTML = "";
    console.log("esc")
    return;
  }
  else {    //추천 검색어
    $noValue.style.display="none";
    loading('start');
    fetch(
      `https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/keywords?q=${value}`
    )
    .then((res) => res.json())
    .then((results) => {
      loading('finish');
      $result.innerHTML = "";
      let dynamicHTML = "";
      for(let i = 0; i<results.length; i++){
        dynamicHTML += '<div><span class="resultName name="resultName" id="result_'+i+'">'+results[i]+'</span></div>'

      }

      $result.innerHTML += dynamicHTML;
      for(let i = 0; i<results.length; i++){
        document.getElementById('result_'+i).addEventListener('click',function(e){
            document.getElementById('result_'+i).style.backgroundColor="lightgrey";
            $keyword.value=document.getElementById('result_'+i).innerText;
            searchImg(value);
        })
      }
    });

  }
});

개발자로 입사 후 첫 코딩테스트

아직 부족한 점이 많고 공부할 것도 많다는 걸 느꼈다.

기본기부터 다시 다져야겠다는 생각이 많이 든 코딩테스트