[할 일 목록 #3] Javascript로 버튼 누르는 기능 만들기 (To-do list)

강의 목표

저번 시간에는 css를 이용해서 할 일 목록 웹 페이지를 꾸미는 방법을 배워 봤습니다. 하지만 추가 버튼을 눌러도 아직 아무 일도 일어 나지 않습니다. 이번 시간에는 Javascript를 이용해서 추가 버튼에 기능을 넣도록 하겠습니다. 이제부터 자바 스크립트를 짧게 js로 부르도록 하겠습니다.

데모

See the Pen todo list js by David Kijung Park (@ramiram) on CodePen.

JS 파일 만들기

이번 강의에 코딩할 app.js 파일을 index.html 파일 과 같은 폴더 안에 만들어 줍니다. index.html 파일이 들어있는 폴더에서 오른쪽 클릭 후 새 텍스트 파일을 만든다음에 파일 이름을 app.js 로 바꿔 주시면 됩니다.

JS 파일을 html 파일에 연결하기

<script> 태그를 이용해서 JS파일을 html에서 연결 할 수 있습니다. <script> 태그는 JS가 어디서 로딩할지에 따라서:

- <head> 부분,

- <body> 부분,

- 또는 </body> 후에

넣을 수 있습니다.

보통은 컨텐츠와 분리 시키기 위해서 <head> 부분에 넣을때가 많습니다. 하지만, JS를 통해서 컨텐츠를 바꿔야 한다면 알맞은 부분에 JS를 로드 해야합니다. 이 프로젝트 같은 경우에는 리스트가 다 렌더 된 후에 추가 하기 때문에 </body> 후에 넣도록 하겠습니다. src 속성에는 JS파일의 이름을 넣습니다.

</body> 태그 아래에 <script> 태그를 넣어 줍니다

<script src="app.js"></script>

<script> 태그까지 추가 된 지금까지 만든 html 코드입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <title>
      할일 목록
    </title>
  </head>
  <body>
    <div class="container">
      <div class="input-container">
        <input id="input" placeholder="예) 코딩공부하기" />
        <button id="add-button" >추가</button>
      </div>
      <div class="list-container">
        <h1>할 일 목록</h1>
        <ul id="list">
          <li class="list-item">코딩팍 팔로우하기</li>
          <li class="list-item">html 꾸미기</li>
        </ul>
      </div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

Javascript 코딩 시작

이제부터 추가 버튼에 새로운 항목 추가 기능을 만들겠습니다.

1. <button>에 클릭 인식 하기

이벤트 리스너(event listener)를 통해서 클릭 이벤트를 인식하도록 하겠습니다.

먼저 JS에서 <button>을 변수(variable)로 만들겠습니다. document.querySelector 매서드(method)를 이용해서 버튼 변수를 만들 수 있습니다. html에 미리 지정해둔 버튼의 아이디를 이용합니다. document.querySelector 함수에 매개변수(parameter)에 버튼의 아이디를 넣으면 버튼 요소를 변수에 저장할 수 있습니다.

아래의 코드를 app.js 파일 첫 줄에 넣어주세요.

const addButton = document.querySelector('#add-button');

이제 버튼 변수에 addEventListener 매서드를 통해서 클릭 이벤트 리스너를 지정 할 수 있습니다.

addButton.addEventListener를 넣어줍니다.

addButton.addEventListener('click', () => {
    // 실행문
});

addEventListener는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. 여기서 저희의 대상은 addButton 변수에 저장되어있는 <button>요소입니다.

addEventListener에 두개의 매개변수를 전달하도록 하겠습니다.

첫번쨰 매개변수는 어떤 이벤트를 리슨 할지 이벤트 유형(type)를 넣어야합니다. 저희는 사용자의 클릭을 인식해야 하기 때문에 'click'을 전달하도록 하겠습니다. 참고로 인식 할 수 있는 다른 이벤트들은 클릭 이 외에도 많은 유형이 있습니다. (완전한 이벤트명 목록: https://developer.mozilla.org/ko/docs/Web/Events)

두번째 매개변수에는 호출할 함수를 전달합니다. 화살표 함수 표현(arrow function expression)을 통해서 함수를 만들겠습니다. 화살표 함수는 function() { }를 () => { }로 표현 함으로서 함수 표현을 더 짧게 쓸 수 있습니다.

2. 클릭 실행문 만들기

클릭 실행문에서는 사용자 입력 문자를 가져오고 새로운 항목을 추가하는 함수를 불러오겠습니다.

아래의 실행문을 만들도록 하겠습니다

addButton.addEventListener('click', () => {
  const input = document.querySelector('#input');
  const text = input.value.trim();

  if (text !== '') {
    addToList(text);
    input.value = '';
    input.focus();
  }
});

const input = document.querySelector('#input');

먼저 사용자의 입력을 불러오기 위해서 입력칸인 <input>을 변수로 만들겠습니다. 위에 버튼을 변수를 만드는 방법과 동일하게 document.querySelector를 호출 하겠습니다. 미리 정해둔 input아이디를 전달해 줍니다.

input.value.trim();

이제 사용자의 입력을 input.value를 통해서 가져올 수 있습니다. 여기에 .trim() 매서드를 사용 하겠습니다. trim() 매서드는 문자열 양 끝의 공백을 제거합니다. input.value.trim()으로 공백이 제거된 문자를 text 변수에 저장합니다.

if (text !== '')

다음으로 사용자 입력이 빈칸이 아닌지 확인하는 조건문을 넣습니다. 빈 입력을 리스트에 새로운 항목으로 추가하는 것을 방지하기 위해서 입니다.

addToList(text);
input.value = '';
input.focus();

실제로 새로운 항목을 리스트에 추가하는 기능은 따로 addToList라는 함수를 만들도록 하겠습니다. (다음 섹션)

input.value = ''; 사용자의 입력칸을 빈칸으로 리셋합니다.

input.focus(); 입력창에 포커스를 부여합니다. 사용자가 추가 버튼을 누른후 바로 다시 입력창에 문자를 입력 하기 편리하게 하기 위해서 입니다.

3. HTML에 리스트 아이템 추가하기 (addToList 함수 만들기)

addToList() 함수를 만들어 보겠습니다.

function addToList(text) {
  const list = document.querySelector('#list');

  const newListItem = document.createElement('li'); // 새로운 li 요소를 만듬
  newListItem.classList.add('list-item'); // list-item 클래스를 더해줌

  newListItem.innerHTML = text; //사용자 입력 문자를 li사이에 넣음

  list.appendChild(newListItem); // 리스트에 새로 만든 li를 추가
}

코드를 깔끔하게 하기 위해서 html에 요소를 추가하는 기능은 따로 함수에 만들도록 하겠습니다.

function addToList(text)

addToList 함수에서는 새로 추가할 항목의 문자를 text라는 매개변수로 받겠습니다.

const list = document.querySelector('#list');

이제는 익숙한 html요소를 변수로 저장하기. <ul id="list">를 저장하겠습니다.

const newListItem = document.createElement('li');

JS에서 html요소를 만드는 매서드 입니다. 우리는 <ul> 사이에 추가할 <li>요소를 만들어야 하기떄문에 위의 매서드를 이용해서 <li>요소를 만들어 줍니다.

newListItem.classList.add('list-item');

JS로 요소에 클래스를 추가하는 매서드 입니다. 우리는 html에서 <li>태그에는 class="list-item"이라는 클래스 속성을 붙엿으니 JS로 만든 <li>요소에도 마찬가지로 list-item클래스를 추가해 줍니다. 만약 여기서 클래스를 추가하지 않을 경우 스타일링이 없는 <li>가 추가 되는 것을 보실 수 있습니다.

newListItem.innerHTML = text;

innerHTML은 태그 내부의 html을 가져오거나 설정할 때 사용합니다. 여기서 innerHTML을 이용해서 text의 값을 새로 만든 <li>태그 사이에 삽입 합니다.

list.appendChild(newListItem);

마지막으로 위에서 만든 새로운 항목을 <ul>태그 사이에 추가하도록 하겠습니다. appendChild 매서드는 여기에 전달된 매개변수를 마지막 자식으로 추가합니다. 지금까지 JS에서만 만든 <li>요소를 전달하면 리스트 제일 아래에 추가 됩니다.

정리:

여기까지 잘 따라 오셨다면 아래의 코드를 완성하셨습니다.

const addButton = document.querySelector('#add-button');

addButton.addEventListener('click', () => {
  const input = document.querySelector('#input');
  const text = input.value.trim();

  if (text !== '') {
    addToList(text);
    input.value = '';
    input.focus();
  }
});

function addToList(text) {
  const list = document.querySelector('#list');

  const newListItem = document.createElement('li');
  newListItem.classList.add('list-item'); 

  newListItem.innerHTML = text;

  list.appendChild(newListItem);
}

축하합니다!

이제 추가 버튼을 통해서 새로운 항목을 추가할수 있게 되었습니다. 다음 시간에는 체크박스와 항목 제거 버튼을 만들도록 하겠습니다.

'개발 Develop > HTML, CSS, Javascript' 카테고리의 다른 글

자바스크립트 객체지향 프로그래밍으로 사용하기 (Object-Oriented Programming in JS) (0)	2021.01.24
[HTML 배우기] input 태그: 사용자 입력칸 (0)	2020.05.23
[할 일 목록 #2] CSS 로 이쁘게 꾸미기 (To-do list) (0)	2020.05.21
[할 일 목록 #1] HTML 으로 기본 페이지 만들기 (To-do list) (0)	2020.05.20
[할 일 목록 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개 (0)	2020.05.20