[miniProjects] 13_Random Choice Picker

13_Random Choice Picker

💻 주제 : 입력란에 단어를 입력하면 하단에 태그가 생김. 콤마(,)를 통해 여러 개의 태그를 만들 수 있음.

• 무작위로 하이라이트를 넣을 태그를 고름.
• classList의 add, remove로 하이라이트를 준다.

const tagsEl = document.getElementById('tags');
const textarea = document.getElementById('textarea');

// 텍스트 영역 : 페이지로 가면 자동으로 커서가 나오고 입력할 수 있음.
textarea.focus();

textarea.addEventListener('keyup', (e) => {
  createTags(e.target.value)

  if(e.key === 'Enter') {
      setTimeout(() => {
          e.target.value = ''
      }, 10)

      randomSelect()
  }
})

function createTags(input) {
  // 태그를 쉼표로 나눔.
  // 빈칸이 추가되지 않도록 trim 함수를 씀.
  const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())
  
  tagsEl.innerHTML = ''

  tags.forEach(tag => {
      const tagEl = document.createElement('span')
      tagEl.classList.add('tag')
      tagEl.innerText = tag
      tagsEl.appendChild(tagEl)
  })
}

• textarea.focus()를 사용하여 페이지가 로드되면 자동으로 텍스트 영역에 포커스를 줌.
• textarea.addEventListener('keyup', (e) => { ... })를 사용하여 텍스트 영역의 키 이벤트에 대한 이벤트 리스너를 등록한다. 이벤트는 키가 눌려질 때마다 발생하며, 콜백 함수는 e라는 매개변수를 받으며, 키 이벤트 객체를 나타낸다.
• 콜백 함수 내부에서는 createTags(e.target.value)를 호출하여 입력된 텍스트 값을 기반으로 태그를 생성한다. e.target.value는 텍스트 영역의 입력된 값을 가져온다.
• if(e.key === 'Enter') { ... }를 사용하여 Enter 키가 눌렸을 때의 동작을 처리. setTimeout(() => { e.target.value = '' }, 10)를 사용하여 10ms 후에 텍스트 영역의 값을 비운다. 그 후, randomSelect() 함수를 호출하여 임의의 태그를 선택한다.
• createTags(input) 함수는 입력된 텍스트를 기반으로 태그를 생성하고 표시하는 역할을 한다. 먼저, 입력된 텍스트를 쉼표로 구분하여 배열로 분할한다. filter() 함수를 사용하여 공백이 추가되지 않도록 각 태그의 앞뒤 공백을 제거하고 빈 문자열이 아닌 태그만 필터링한다. 그 후, map() 함수를 사용하여 각 태그의 앞뒤 공백을 제거한다.
• tagsEl.innerHTML = ''를 사용하여 이전에 생성된 태그를 모두 제거.
• tags.forEach(tag => { ... })를 사용하여 각 태그에 대해 span 요소를 생성하고, 해당 태그를 텍스트로 설정한 후 tagsEl 요소에 추가한다. 생성된 태그는 tag 클래스를 가지도록 설정된다.

❗콜백함수

• 콜백 함수(callback function)는 다른 함수에게 전달되어 나중에 호출되는 함수. 즉, 콜백 함수는 다른 함수의 인자로서 전달되어 특정 시점이나 조건에 도달했을 때 호출되는 함수다.

• 콜백 함수는 비동기적인 작업에서 많이 사용되며, 특히 이벤트 처리, 타이머 제어, AJAX 요청 등에서 자주 활용된다. 비동기 작업은 작업이 완료되기 전에 다음 작업이 진행되어야 할 때 유용한데, 이때 콜백 함수를 활용하여 작업이 완료되면 호출되도록 할 수 있다.

  👍🏻콜백 함수를 사용함으로써 비동기적인 작업을 효율적으로 처리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있다. 또한, 콜백 함수는 일반적으로 익명 함수(anonymous function)로 전달되기도 하며, 필요에 따라 매개변수를 통해 데이터를 전달하거나 반환값을 받을 수도 있다.