프로젝트 취지

네이버나 구글등 검색 포털 사이트의 검색어 자동 완성기능(검색어 추천기능)을 만들어보았다.

특히 jquery등 기타 라이브러리를 사용하지 않고 javaScripts로만 만들어보겠다는 목표가 설정하고 구현해보았다.

만든방법

index.html에서 검색어를 입력하면 index.js에서 값을 fetch api로 전송해준다. 그럼 서버에 연결해 놓은 data.josn에서 행당하는 값이 있으면 배열에 담아 반환해준다.
반환받은 배열을 index.js에서 받아 처리를 한다. async 함수를 사용하여 버튼에 이벤트를 달아 값이 순차적으로 처리를 할수있게 만든다.

async function click(event) {
let keyword = document.querySelector('#search-field').value;
console.log(keyword);

fetch(`http://localhost:3000/autocomplete?keyword=${keyword}`) 
//keyword의 키에 {keyword} value 값을 넣어서 전달한다.
    .then(function (response) {
        return response.json();
        //해당하는 데이터값을 json 형태로 가저온다.
    })
    .then(function (myJson) {//가져온 데이터를 하나씩 찍어준다.
        const keywordlist = document.querySelector('.autocomplete-results');
        keywordlist.innerHTML='';
        for (var i = 0; i < myJson.length; i++) {
            const result_list = document.createElement('li');
            result_list.innerHTML = `${myJson[i]}`;
            keywordlist.append(result_list);
            console.log(myJson[i]);
        }
    });

}

후기

처음으로 jquery를 사용하지 않고 javascripts만 사용하여 프로그램을 작성하였다. jquery를 사용하면 편하고 쉬웠지만 초반에 설정한 javascripts만을 사용하여 목표를 이루기 위해 노력하였고 노력한 결과 javascripts에 대해서 한층더 깊이 이해할수 있었고 ecs문법들을 다시한번 정리하고 공부할수있었던 계기가 되었다.

git:https://github.com/DongHyunKIM-Hi/bytedegree_week_1