프로그래머스 프로그래밍 언어 검색 (첫 시도)

첫 시도

처음 이 과제 테스트를 풀때는 자바스크립트에 대한 이해도가 낮아 모든 기능을 DOM API를 이용해 풀었었다.

let form = document.getElementsByClassName('SearchInput')[0]
let input = document.getElementById('languageInput');
let suggestionUlArea = document.getElementById('suggestionArea');
let suggestionDivArea = document.getElementsByClassName('Suggestion')[0];
let selectedArea = document.getElementById('selectedArea');
let selectedLanguagesArray = [];
let selectedLanguage = "";
let selectedIndex = 0;
let maxIndex;
let inputBuffer;

input.focus();

form.addEventListener('submit',(event)=>{
    event.preventDefault();
})

document.addEventListener('keydown',(event)=>{
    //위
    if(maxIndex !== undefined){if(event.keyCode === 38){
        if(selectedIndex === 0){
            selectedIndex = maxIndex;
            document.getElementById(`0`).classList = ''
            document.getElementById(`${maxIndex}`).classList += 'Suggestion__item--selected'
            selectedLanguage = document.getElementById(`${maxIndex}`).innerHTML;
            return;
        }
        selectedIndex -= 1;
        document.getElementById(`${selectedIndex + 1}`).classList = ''
        document.getElementById(`${selectedIndex}`).classList += 'Suggestion__item--selected'
        selectedLanguage = document.getElementById(`${selectedIndex}`).innerHTML;
    }
    //아래
    if(event.keyCode === 40){
        if(selectedIndex === maxIndex){
            selectedIndex = 0;
            document.getElementById(`${maxIndex}`).classList = ''
            document.getElementById(`${0}`).classList += 'Suggestion__item--selected'
            selectedLanguage = document.getElementById(`${0}`).innerHTML;
            return;
        }
        selectedIndex += 1;
        document.getElementById(`${selectedIndex - 1}`).classList = ''
        document.getElementById(`${selectedIndex}`).classList += 'Suggestion__item--selected'
        selectedLanguage = document.getElementById(`${selectedIndex}`).innerHTML;
    }}

    if(event.keyCode === 13){
        if(selectedLanguagesArray.includes(selectedLanguage)) return;
        
        alert(selectedLanguage);
        if(selectedLanguage !== '') {
            if(selectedLanguagesArray.length >= 5){
                selectedLanguagesArray = selectedLanguagesArray.filter((value, index)=>index !== 0);
            }
            selectedLanguagesArray.push(selectedLanguage)
        };
        
        selectedArea.replaceChildren();
    
        selectedLanguagesArray.map((text)=>{
            let selectedElement = document.createElement('li');
            selectedElement.innerHTML = text;
            selectedElement.style.marginRight = '5px';
            selectedArea.appendChild(selectedElement);
        })
    }
})

const FetchData = async (inputValue) => {
    suggestionDivArea.style.display = 'none';
    suggestionUlArea.replaceChildren()
    await fetch(`https://wr4a6p937i.execute-api.ap-northeast-2.amazonaws.com/dev/languages?keyword=${inputValue}`)
    .then((response)=>(response.json())).then((data)=>{
        if(data.length > 0){
            maxIndex = data.length - 1;
            selectedIndex = 0;
            data.map((suggestion, index)=>{
                let suggestionElement = document.createElement('li');
                if(index === 0) {
                    suggestionElement.classList += 'Suggestion__item--selected';
                    selectedLanguage = suggestion;
                }
                suggestionElement.innerHTML = suggestion.replace(input.value,`<span class="Suggestion__item--matched">${input.value}</span>`);
                suggestionElement.id = `${index}`
                suggestionUlArea.appendChild(suggestionElement);
                suggestionElement.addEventListener('click',(event)=>{
                    selectedLanguage = event.target.innerHTML;
                    if(!selectedLanguagesArray.includes(event.target.innerHTML)){
                        alert(selectedLanguage);
                        if(selectedLanguage !== '') {
                            if(selectedLanguagesArray.length >= 5){
                                selectedLanguagesArray = selectedLanguagesArray.filter((value, index)=>index !== 0);
                            }
                            selectedLanguagesArray.push(selectedLanguage)

                            selectedArea.replaceChildren();

                            selectedLanguagesArray.map((text)=>{
                                let selectedElement = document.createElement('li');
                                selectedElement.style.marginRight = '5px';
                                selectedElement.innerHTML = text;
                                selectedArea.appendChild(selectedElement);
                            })
                        };
                    }
                })
            })
            suggestionDivArea.style.display = 'block';
        }
        else{
            selectedLanguage = '';
            suggestionDivArea.style.display = 'none';
            maxIndex = undefined;
        }
    })
}

input.addEventListener('input',()=>{
    inputBuffer = input.value;
    suggestionDivArea.style.display = 'none';
    if(input.value !== '') {
        FetchData(input.value)
    }
})
input.addEventListener('change',()=>{
    suggestionDivArea.style.display = 'none';
    if(input.value !== ''){
        suggestionDivArea.style.display = 'block';
    }
    if(input.value = ''){
        input.value = inputBuffer;
        suggestionDivArea.style.display = 'none'
    }
})

input.addEventListener('focus',()=>{
    if(inputBuffer !== undefined)
        input.value = inputBuffer
})
input.addEventListener('blur',()=>{
    if(inputBuffer !== undefined)
        input.value = inputBuffer
})

위 코드를 돌려보면 기능은 구현이 되지만 문제 해설을 보니 위와 같은 방식을 원하는 것이 아닌 것 같아 새로 문제를 풀어보게 되었다.

개요

프로그래밍 언어를 검색할 수 있는 서비스 개발

1. 검색어 입력시 해당 검색어를 기준으로 서버에 요청
2. 서버에서 받은 검색어 목록 렌더링
3. 클릭 혹은 키보드 방향키로 선택 후 엔터 입력으로 언어 선택

구현 결과 페이지:
https://kyw0716-search-programming-language.netlify.app/

구현 결과 이미지: