2021 03 11 - adelakim5/fe-w5-searchUI GitHub Wiki

let animal = {
   eats: true
};

function Rabbit(name) {
   this.name = name;
}

Rabbit.prototype = animal; // Rabbit의 프로토타입(원형)은 animal 객체

let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal

function Keyword(searchingInput, rollingKeywordHtml) {
   this.currIndex = 0; 
   // ...
   this.searchingInput = searchingInput;
   this.rollingKeywordHtml = rollingKeywordHtml;
}

Keyword.prototype = {
   constructor: Keyword,
   getTopten,
   createTemplate, 
   init,
};

function getTopten () {
   // ...
}

function createTemplate() {
   // ...
}

function init() {
   // ...
}

function RecommItems(keywordState, rollings) {
   const {searchingInput} = keywordState;
   const {rollingKeywordHtml} = rollings;

   Keyword.call(this, searchingInput, rollingKeywordHtml); // super()와 같은 개념

   // ... 
}

RecommItems.prototype = Object.create(Keyword.prototype); // extends와 같은 개념

RecommItems.prototype.init = function () {
   // ...
   // 상속받은 init함수 안에 RecommItem이 수행할 기능 구현
}

const urls = {
  recommendedWords: (inputValue) => `https://completion.amazon.com/api/2017/suggestions?session-id=143-7282527-1203953&customer-id=&request-id=8RSH7H2971TF4M9DSSK8&page-type=Gateway&lop=en_US&site-variant=desktop&client-info=amazon-search-ui&mid=ATVPDKIKX0DER&alias=aps&b2b=0&fresh=0&ks=69&prefix=${inputValue}&event=onKeyPress&limit=11&fb=1&suggestion-type=KEYWORD&suggestion-type=WIDGET&_=1615167756813%27`,
 
}

async function request(urls, inputValue) {
  const response = await fetch(urls(inputValue));
  const data = await response.json();
  return data;
}

RecommItems.prototype.loadRelatedWords = async function (inputValue) {
  const data = await request(urls.recommendedWords, inputValue); // 데이터 받을 때까지 기다림
  const { suggestions } = data; // 연관검색어 배열
  const tempSuggestions = suggestions.map((item) => item.value); // 값이 연관검색어인 애들만 뽑아냄 
  const tempRecommendations = // 템플레이팅
    `<div class="recommended">` +
    set.reduce((acc, item, i) => {
      const highlightOnItem = item.replace(inputValue, `<span class="highlight">${inputValue}</span>`); // inputValue와 같은 부분은 span태그 먹인 문자열로 대체
      acc += `<span class="recommended__item" data-id="${i}">${highlightOnItem}</span>`;
      return acc;
    }, ``) +
    `</div>`;
  this.recommWordsToggle.innerHTML = tempRecommendations;
  // ... 
};

RecommItems.prototype.loadRelatedWords = async function (inputValue) {
  const data = await request(urls.recommendedWords, inputValue); 
  const { suggestions } = data; 
  const tempSuggestions = suggestions.map((item) => item.value.normalize("NFC")); // 정규형 정준 결합 (NFC), 자소분리 되었던 한글을 결합함
  const tempRecommendations = // 템플레이팅
  // ... 
}