[JavaScript] 끝말잇기 (1)

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다.

 

1. 순서

혼자서 하는 끝말잇기 놀이를 자바스크립트로 구현하려고 한다.

무작정 코드를 작성하기 이전에 먼저 머릿속으로 구상해보자.

필요한 HTML에는 무엇이 있을까? 끝말잇기 제시어를 작성할 input 요소, 작성한 제시어를 제출할 button 요소, 그리고 제출한 제시어를 출력할 div 요소까지 필요하다.

다음으로 필요한 JavaScript에는 무엇이 있을까? 입력한 제시어를 기억하는 변수와 div 요소에 출력하는 코드, 직전에 입력한 제시어의 마지막 값과 방금 입력한 제시어의 처음 값이 일치하는지 판단 여부, 두 값이 일치한다면 div 요소의 값을 바꾸고 일치하지 않는다면 div 요소는 그대로 유지 등이 있다.

끝말잇기에 필요한 필수적인 자바스크립트 기능은 이정도로 정리할 수 있다.

하지만 이것만으로 완벽한 끝말잇기를 구현할 수 없고 사용자의 편의성을 향상시키거나 중간중간 취약한 문제에 부딪힐 수 있는데 이 부분은 코딩을 하면서 보완하겠다.

 

자바스크립트를 처음 배울 때 중요한 것은 바로 이 과정과 순서를 논리적으로 판단할 수 있어야 한다는 점이다.

특정 기능을 구현하는 함수나 메서드는 구글링을 통해서 손쉽게 찾아낼 수 있지만 알고리즘은 누가 대신해줄 수 없다.

 

 

2. HTML 작성

<div class="box">제시어 : <span id="word"></span></div>
<input type="text">
<button>입력</button>

추가 설명은 필요 없으리라 본다.

실제 화면에서는 아래와 같이 나타난다.

 

 

3. 제시어 출력

다음으로 입력 버튼을 클릭하면 input 요소에 입력한 제시어를 #word 요소에 출력해야 한다.

이 과정은 세 단계로 나뉜다.

①입력 버튼을 클릭하면 ②input 요소에 입력한 제시어를 ③#word 요소에 출력

 

요소 선택은 여러가지가 있지만 가장 범용적으로 쓸 수 있는 querySelector 메서드를 추천한다.

let wordBtn = document.querySelector('button');

이제 버튼 요소는 wordBtn 이라는 변수로 저장하여 쓸 수 있다.

 

클릭 이벤트는 addEventListener 메서드를 사용한다.

wordBtn.addEventListener('click', function(){
  console.log('클릭');
});

 

이것으로 클릭 이벤트를 감지하게 되면 콘솔에 '클릭' 이라는 텍스트가 출력된다.

 

하지만 우리가 원하는 것은 '클릭'이 아니라 제시어를 표시하는 것이다.

그러기 위해서 '클릭' 대신에 input 요소를 입력하여 결과를 확인해보자.

let wordInput = document.querySelector('input');
let wordBtn = document.querySelector('button');

wordBtn.addEventListener('click', function(){
  console.log(wordInput);
});

 

하지만 우리가 원하는 '사자' 라는 제시어가 출력되지 않고 input 태그가 출력된다.

문제를 해결하기 위해서 console.log(wordInput); 대신에 console.dir(wordInput); 를 작성하고 결과를 확인해보자.

console.dir 은 DOM 객체의 메서드를 조회하는데 사용하는 메서드다.

 

우리가 원하는 제시어인 '사자'가 value 메서드에 입력되어 있다.

따라서 wordInput이 아니라 wordInput.value로 입력하면 원하는 제시어를 얻을 수 있다.

 

 

 

이제 제시어를 콘솔 대신 DOM요소 #word 에 출력하는 작업이 남았다.

innerText, innerHtml, textContent 등이 있지만 가장 추천하는 방법은 textContent다.

wordInput과 wordBtn처럼 wordDisplay라는 변수에 #word 요소를 추가하고

wordDisplay.textContent = wordInput.value; 을 작성하면 해결된다.

내가 자주 하는 실수로 wordDisplay.textContent(wordInput.value); 라고 쓰는 경우가 있는데 나 같은 실수하지 않도록 주의하자.

 

let wordInput = document.querySelector('input');
let wordBtn = document.querySelector('button');
let wordDisplay = document.querySelector('#word');

wordBtn.addEventListener('click', function(){
  wordDisplay.textContent = wordInput.value;
});

 

이제 제시어가 화면에 문제없이 출력된다.

사자 다음 다른 텍스트를 입력해도 잘 변경된다.

 

 

4. 편의성 해결

하지만 두 가지 불편한 점이 있다.

입력 버튼을 누르면 input 요소에 입력한 텍스트가 지워지지 않아서 수동으로 지워야 하는 점,

그리고 엔터키로 입력을 하고 싶은데 반드시 마우스로 입력 버튼을 눌러야 제시어가 변경되는 점이다.

 

두 문제 모두 아주 쉽게 해결할 수 있다.

먼저 input 요소에 텍스트를 지우고 싶다면 입력 버튼을 클릭했을 때, input 값을 여백으로 변경하면 된다.

 

wordBtn.addEventListener('click', function(){
  wordDisplay.textContent = wordInput.value;
  wordInput.value = '';
});

왜 이때는 textContent가 아니라 value일까?

쉽게 말해서 form 요소일 경우 value이고 그 외에는 textContent이다.

input 요소는 form 요소이기 때문에 value다.

자세한 내용은 여기서 확인할 수 있다.

: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

두번째, 엔터로 입력하고 싶다면 input 요소와 button 요소를 form 요소로 감싸주면 된다.

<form>
  <input type="text">
  <button>입력</button>
</form>

 

하지만 문제는 엔터를 입력했을 때 화면이 새로고침 되어 버려 입력한 내용이 날아간다.

그래서 새로고침이 안되도록 해야 하는데 form 요소에 다음과 같은 코드를 작성한다.

<form onsubmit="return false">
  <input type="text">
  <button>입력</button>
</form>

 

form을 제출할 때 return 값을 false로 전달하기 때문에 새로고침이 되지 않는다.

 

 

시간이 없는 관계로 다음 시간에 이어서 작성하겠다.