최적화 안된 코드(Before)
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word; // 제시어
let newWord; // 현재 단어
const onClickButton = () => {
if (!word) { // 제시어가 비어 있는가?
word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word; // 화면에 제시어 표시
const order = Number($order.textContent);
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = '';
$input.focus();
} else { // 비어 있지 않다.
if (word[word.length - 1] === newWord[0]) { // 입력한 단어가 올바른가?
// 올바르다.
word = newWord; // 현재 단어를 제시어에 저장한다.
$word.textContent = word; // 화면에 제시어 표시
const order = Number($order.textContent);
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = '';
$input.focus();
} else { // 올바르지 않다.
alert('올바르지 않은 단어입니다!');
$input.value = '';
$input.focus();
}
}
};
const onInput = (event) => {
newWord = event.target.value; // 입력한 단어를 현재 단어로
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
최적화 이전 순서도(Before)
최적화된 코드(After)
const number = Number(prompt('몇 명이 참가하나요?'));
const $button = document.querySelector('button'); // 태그를 저장하는 변수명은 $로 시작하는 것으로 약속(로컬룰)
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order'); // #오더 태그를 가져와서, $order에 저장
let word; // 제시어
let newWord; // 현재 단어
const onClickButton = () => {
if (!word || word[word.length -1] === newWord[0]) { // 제시어가 비어 있는가? || 올바른 단어인가?
word = newWord; // 비어 있다.
$word.textContent = word; // 화면에 제시어 표시, textContent는 태그(#word)의 값에 접근(가져오거나 수정하거나)
const order = Number($order.textContent)
if (order +1 > number){
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
// $input.value = '';
// $input.focus();
} else { // 올바르지 않다.
alert('올바르지 않은 단어입니다!');
}
$input.value = ''; // 인풋, 셀렉트, 텍스트에어리어 등 입력 태그는 textContent 대신 value 사용
$input.focus();
};
const onInput = (event) => {
// console.log('글자 입력', event.target.value);
newWord = event.target.value; // 입력하는 단어를 현재 단어로
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
최적화된 순서도(After)
