안녕하세요! 오늘은 같이 재밌는 거 만들어 볼까요? 바로 자바스크립트로 할 일 목록(To-Do List)을 만들어 보는 거예요! 뭔가 거창해 보이지만, 생각보다 훨씬 간단하고 재밌답니다. 자바스크립트 기본 설정부터 HTML 구조 잡기, 자바스크립트 기능 구현까지 차근차근 따라 하다 보면 어느새 멋진 To-Do List가 뿅! 하고 나타날 거예요. 혹시 코딩 초보라 걱정되시나요? 괜찮아요! 저도 처음엔 막막했거든요. 설명을 최대한 쉽고 자세하게 해 드릴 테니 함께 만들면서 자바스크립트의 매력에 퐁당 빠져 봅시다!
자바스크립트 기본 설정
자, 이제 본격적으로 To-Do List의 심장이라고 할 수 있는 자바스크립트 설정을 시작해 볼까요? HTML 뼈대에 생명을 불어넣는 과정이라고 생각하면 돼요! 마치 로봇에 전기가 흐르는 것처럼 말이죠!⚡️ 두근두근하지 않나요?😉
스크립트 태그 연결
먼저, <script> 태그를 이용해서 자바스크립트 코드를 HTML 문서에 연결하는 방법부터 알아볼게요. <script> 태그는 <head> 또는 <body> 안에 넣을 수 있는데, 최근에는 웹 성능 최적화를 위해 <body> 태그의 맨 마지막 부분에 넣는 것이 일반적이랍니다. 마치 멋진 드레스를 입고 마지막으로 향수를 뿌리는 것처럼, 웹페이지 로딩이 끝난 후 자바스크립트가 실행되도록 하는 거죠! ✨ 이렇게 하면 HTML 렌더링을 막지 않아서 사용자 경험을 향상시킬 수 있어요. 마치 레스토랑에서 음식이 나오기 전에 먼저 식탁을 세팅하는 것과 같은 이치랄까요? 🤔
<script src="script.js"></script>처럼 외부 파일로 자바스크립트 코드를 관리하는 것도 좋은 방법이에요. script.js 파일에는 우리의 To-Do List 로직이 담기게 될 거예요. 이렇게 외부 파일로 관리하면 코드가 깔끔하게 정리될 뿐만 아니라, 여러 HTML 파일에서 같은 자바스크립트 코드를 재사용할 수 있다는 장점이 있어요! 마치 만능 소스처럼 어디든 뿌려서 사용할 수 있는 거죠! 😋 코드 재사용성은 개발 시간을 단축시켜주는 마법같은 효과를 발휘한답니다. 시간은 금이니까요! 💰
핵심 변수 선언
자, 이제 script.js 파일을 만들고, To-Do List 기능 구현에 필요한 핵심 변수들을 선언해 보겠습니다. 먼저, HTML에서 입력받은 할 일들을 저장할 배열 todos를 선언할 거예요. 이 배열은 To-Do List의 데이터베이스 역할을 할 거랍니다. 데이터베이스라니 뭔가 거창하죠? 😎 하지만 걱정 마세요! 단순한 배열일 뿐이니까요! 😊 초기에는 빈 배열로 시작해서, 사용자가 할 일을 추가할 때마다 새로운 항목이 추가될 거예요. 마치 장바구니에 물건을 하나씩 담는 것과 같아요. 🛒
DOM 요소 선택
그리고, HTML 요소들을 제어하기 위해 필요한 DOM(Document Object Model) 요소들을 변수에 저장해야겠죠? const todoInput = document.getElementById('todo-input'); 과 같이 document.getElementById() 메서드를 사용하면 HTML에서 id가 todo-input인 요소를 가져올 수 있어요. 마치 숨바꼭질에서 술래가 숨어있는 친구를 찾는 것과 같아요. 찾았다! 🙈 이렇게 가져온 요소들을 변수에 저장해두면, 자바스크립트 코드에서 해당 요소들을 쉽게 조작할 수 있답니다. 마치 리모컨으로 TV를 조작하는 것처럼 편리해요! 📺
DOM 요소들을 선택할 때는 getElementById() 외에도 querySelector()와 querySelectorAll() 메서드를 사용할 수 있어요. querySelector()는 CSS 선택자를 사용해서 첫 번째로 일치하는 요소를 가져오고, querySelectorAll()은 일치하는 모든 요소들을 가져온답니다. 마치 낚시를 할 때 낚싯대 하나로 한 마리씩 낚는 것(querySelector())과 그물로 여러 마리를 한 번에 낚는 것(querySelectorAll())과 같아요. 🎣 상황에 맞는 메서드를 사용하는 것이 중요해요! 👍
DOM 조작의 중요성
DOM 조작은 자바스크립트의 핵심 기능 중 하나이며, To-Do List를 만들 때도 매우 중요한 역할을 해요. DOM을 통해 HTML 요소들을 생성하고, 수정하고, 삭제할 수 있기 때문이죠! 마치 요리사가 재료들을 가지고 맛있는 요리를 만드는 것과 같아요. 🍳 DOM을 잘 다루면 동적인 웹페이지를 만들 수 있답니다! 우리의 To-Do List도 DOM 조작을 통해 사용자의 입력에 따라 실시간으로 업데이트될 거예요. 얼마나 멋진가요! 🤩
이제 기본적인 자바스크립트 설정은 끝났어요! 🎉 다음 단계에서는 본격적으로 To-Do List 기능을 구현해 볼 거예요. 기대되시죠? 😉 자바스크립트의 마법같은 세계에 푹 빠져보세요! ✨
HTML 구조 잡기
자, 이제 본격적으로 To-Do List의 뼈대를 만들어 볼까요? 마치 건물을 짓기 전에 설계도를 그리는 것처럼, 우리도 HTML을 사용해서 멋진 To-Do List의 구조를 잡아줘야 해요! HTML은 웹 페이지의 기본 구조를 담당하는 언어랍니다. 마치 집의 벽돌과 시멘트 같은 존재랄까요? 🤔 이 부분이 탄탄해야 나중에 자바스크립트라는 마법을 부릴 때 훨씬 수월해진답니다!
To-Do List 제목과 입력 필드 추가
우선 <body> 태그 안에 <h1> 태그를 사용해서 “My To-Do List”라는 제목을 붙여줄 거예요. 제목은 사용자에게 우리가 무엇을 만들고 있는지 알려주는 중요한 역할을 하죠! 마치 책의 표지처럼 말이에요. ✨ 그리고 사용자가 할 일을 입력할 수 있는 <input> 태그도 필요해요. type="text"로 설정해서 텍스트를 입력받을 수 있도록 하고, id="new-task"를 추가해서 나중에 자바스크립트에서 이 요소를 쉽게 찾을 수 있도록 해줄게요! 😉
My To-Do List
추가 버튼
입력한 할 일을 추가하는 버튼도 만들어야겠죠? <button> 태그를 사용하고, id="add-task"를 추가해서 자바스크립트에서 이 버튼을 제어할 수 있도록 해줄게요. 버튼 안에는 “추가”라는 텍스트를 넣어서 사용자가 버튼의 기능을 직관적으로 알 수 있도록 해줍시다! 😊
할 일 목록
이제 할 일 목록을 보여줄 공간이 필요해요! <ul> 태그를 사용해서 순서가 없는 목록을 만들고, id="task-list"를 추가할게요. <ul> 태그는 목록을 표현하는 데 아주 유용한 태그랍니다. 나중에 자바스크립트를 이용해서 할 일들을 동적으로 추가하고 삭제할 수 있도록 준비해두는 거예요! 벌써부터 뭔가 멋진 To-Do List가 만들어질 것 같은 예감이 들지 않나요? 😄
HTML 구조 완성
자, 여기까지 하면 기본적인 HTML 구조는 완성! 참 쉽죠? HTML은 웹 개발의 기초 중의 기초이기 때문에 꼭! 확실하게 이해하고 넘어가는 것이 중요해요! 마치 집을 지을 때 기초 공사를 튼튼하게 해야 하는 것과 같은 이치랍니다. 😉
이렇게 HTML 구조를 잡는 과정은 To-Do List의 뼈대를 만드는 과정과 같아요! 각각의 태그들은 마치 레고 블록처럼 조립되어 전체적인 구조를 이루게 되죠. <input> 태그는 사용자로부터 입력을 받는 역할을 하고, <button> 태그는 사용자의 행동을 유발하는 역할을, 그리고 <ul> 태그는 할 일 목록을 표시하는 역할을 담당한답니다.
HTML의 각 요소에 id를 부여하는 것은 마치 각 블록에 이름표를 붙이는 것과 같아요. 나중에 자바스크립트에서 특정 요소를 선택하고 조작하려면 이 이름표가 꼭 필요해요! new-task, add-task, task-list와 같은 id는 나중에 자바스크립트에서 document.getElementById() 메서드를 사용하여 해당 요소를 찾을 때 사용될 거예요. 마치 이름표를 보고 원하는 레고 블록을 찾는 것과 같죠! 👍
전체 코드
지금까지 작성한 HTML 코드를 모두 합치면 아래와 같아요. 복잡해 보일 수도 있지만, 각 태그의 역할을 이해하고 나면 전혀 어렵지 않아요! 각 태그들이 어떤 역할을 하는지 다시 한번 꼼꼼하게 살펴보세요! 이해가 안 되는 부분이 있다면 언제든지 다시 돌아와서 복습하는 것도 좋은 방법이에요! 🤗
My To-Do List
이제 멋진 To-Do List를 만들기 위한 첫걸음을 내디뎠어요! 다음 단계에서는 자바스크립트를 사용해서 이 뼈대에 생명을 불어넣을 거예요! 벌써부터 기대되지 않나요?! 😆 자바스크립트의 마법으로 우리의 To-Do List가 어떻게 변신할지 함께 지켜봐요! 화이팅! 💪
자바스크립트 기능 구현
자, 이제 드디어!! HTML 뼈대에 생명을 불어넣을 시간이에요! 두근두근?! 지금부터 자바스크립트 마법을 부려서 우리의 To-Do List를 진짜 움직이게 만들어 볼 거예요~. 준비되셨나요~? ^^
To-Do List 기능
일단, 우리가 만들 기능들을 먼저 찬찬히 살펴보면 좋겠죠? 크게 세 가지 정도로 나눠볼 수 있을 것 같아요. 첫 번째는 새로운 할 일을 추가하는 기능! 두 번째는 할 일을 완료했을 때 체크 표시하는 기능! 마지막 세 번째는 할 일을 삭제하는 기능이에요. 어때요? 생각보다 간단하죠?!
할 일 추가 기능 구현
자, 그럼 먼저 할 일을 추가하는 기능부터 만들어 볼게요. 사용자가 입력한 텍스트를 받아와서 새로운 리스트 아이템으로 추가해야겠죠? 여기서 중요한 건 DOM(Document Object Model)을 제대로 이해하고 사용하는 것이에요! DOM은 웹 페이지의 HTML 요소들을 자바스크립트로 제어할 수 있게 해주는 인터페이스 같은 건데, 꼭 마스터해야 하는 필수 기술이랍니다!! createElement() 메서드로 새로운 <li> 요소를 만들고, 사용자가 입력한 텍스트를 textContent 속성에 넣어주면 돼요. 생각보다 간단하죠? 그리고 appendChild() 메서드를 사용해서 우리가 만들어 놓은 <ul> 요소에 추가해주면 끝! 참 쉽죠잉~?
하지만 여기서 끝이 아니에요! 추가된 할 일 옆에 ‘완료’ 버튼과 ‘삭제’ 버튼도 같이 만들어줘야 하잖아요? ‘완료’ 버튼을 클릭하면 해당 할 일에 줄이 그어지면서 완료 표시가 되도록 하고, ‘삭제’ 버튼을 클릭하면 해당 할 일이 목록에서 뿅! 하고 사라지도록 만들어야 해요.
이벤트 리스너 활용
이 부분은 이벤트 리스너를 사용해야 하는데, 혹시 이벤트 리스너에 대해서 잘 모르시는 분 계신가요? 간단하게 설명하자면, 특정 이벤트가 발생했을 때 (예를 들어 버튼 클릭) 실행될 함수를 등록하는 거예요. ‘완료’ 버튼에는 'click' 이벤트 리스너를 추가해서, 클릭하면 해당 <li> 요소에 'completed' 클래스를 추가하거나 제거하도록 만들 거예요. classList.toggle() 메서드를 사용하면 클래스를 추가/제거하는 걸 한 번에 처리할 수 있어서 편리해요! 그리고 CSS에서 .completed 클래스에 text-decoration: line-through; 스타일을 적용하면 깔끔하게 줄이 그어진 완료 표시를 만들 수 있답니다! 어때요? 정말 쉽죠~?!
‘삭제’ 버튼에도 마찬가지로 'click' 이벤트 리스너를 추가할 건데, 이번에는 클릭하면 해당 <li> 요소 자체를 목록에서 제거해야 해요. removeChild() 메서드를 사용하면 간단하게 삭제할 수 있어요. 여기까지 잘 따라오고 계시죠~? ^^
입력 내용 초기화
자, 이제 기능 구현의 마지막 단계! 바로 사용자가 입력한 내용을 초기화하는 부분이에요. 할 일을 추가하고 나면 입력 필드가 깔끔하게 비워져야 다음 할 일을 입력하기 편하겠죠? value 속성을 빈 문자열로 설정해주면 간단하게 해결! 별거 아니죠~?
To-Do List 기능 완성 및 추가 기능
이렇게 해서 To-Do List의 핵심 기능들을 모두 구현해봤어요! 어때요? 생각보다 어렵지 않았죠? 물론 처음에는 DOM이나 이벤트 리스너 같은 개념들이 조금 낯설게 느껴질 수도 있어요. 하지만 꾸준히 연습하고 코드를 직접 작성해 보면 금방 익숙해질 거예요!
이제 여러분은 직접 To-Do List를 만들 수 있는 능력을 갖추게 되었어요! 짝짝짝!! 이 기본 기능들을 바탕으로 더 다양한 기능들을 추가해 보면서 자신만의 To-Do List를 만들어 보세요! 예를 들어, 할 일의 우선순위를 설정하거나, 마감일을 추가하는 기능도 넣어볼 수 있겠죠? 아니면 완료된 할 일을 따로 모아서 보여주는 기능은 어떨까요? 상상력을 발휘해서 나만의 특별한 To-Do List를 만들어 보세요! 응원할게요!! 파이팅!!
To-Do List 완성 및 추가 기능
휴~! 드디어 기본적인 To-Do List 기능 구현을 마쳤어요! 짝짝짝! 이제 우리가 만든 To-Do List에 멋진 기능들을 추가해서, 진짜 실생활에서 쓸 수 있도록 업그레이드해 볼 거예요. 마치 레벨 1에서 레벨 10으로 점프하는 기분이랄까?! 자, 그럼 신나는 마음으로 시작해 볼까요? ^^
DOM 구조
우선, 지금까지 우리가 만든 To-Do List의 DOM(Document Object Model) 구조를 다시 한번 살펴보면, <ul> 태그 안에 각각의 할 일 항목들이 <li> 태그로 들어가 있는 형태일 거예요. 이 구조를 기반으로 자바스크립트를 이용해서 추가 기능들을 구현해 나갈 겁니다! 벌써부터 두근두근하지 않나요?
할 일 완료 표시 기능
첫 번째 추가 기능은 바로 “할 일 완료 표시” 기능이에요! 체크박스를 클릭하면 해당 할 일에 줄이 그어지면서 완료 표시가 되도록 만들어 볼게요. 이 기능을 구현하려면 addEventListener를 사용해서 체크박스의 ‘change’ 이벤트를 감지해야 해요. 체크박스의 상태가 변경될 때마다 이벤트가 발생하고, 우리는 이 이벤트를 통해 할 일 항목의 스타일을 변경할 수 있답니다. text-decoration 속성을 line-through로 바꿔주면 깔끔하게 줄이 그어지겠죠? 만약 체크박스를 다시 해제하면 text-decoration 속성을 none으로 되돌려서 줄을 없애주는 센스! 잊지 마세요~?
할 일 삭제 기능
두 번째 추가 기능은 “할 일 삭제” 기능입니다! 각 할 일 항목 옆에 삭제 버튼을 추가하고, 이 버튼을 클릭하면 해당 할 일이 목록에서 뿅! 하고 사라지도록 만들 거예요. 이때 중요한 점은, 삭제 버튼을 클릭했을 때 해당 <li> 요소 자체를 DOM에서 제거해야 한다는 점이에요. removeChild() 메서드를 사용하면 깔끔하게 제거할 수 있답니다. 자바스크립트의 강력한 DOM 조작 능력을 제대로 활용하는 순간이죠! >_<
로컬 스토리지 저장 기능
세 번째 추가 기능은 “로컬 스토리지 저장” 기능입니다! 브라우저를 닫더라도 할 일 목록이 그대로 유지되도록 로컬 스토리지에 저장하는 기능을 구현해 볼게요. localStorage.setItem() 메서드를 사용하면 할 일 목록을 문자열 형태로 로컬 스토리지에 저장할 수 있어요. JSON.stringify() 메서드를 사용하면 자바스크립트 객체를 문자열로 변환할 수 있으니 참고하세요! 그리고 브라우저를 다시 열었을 때 localStorage.getItem() 메서드를 사용해서 저장된 할 일 목록을 불러오고, JSON.parse() 메서드를 사용해서 문자열을 다시 자바스크립트 객체로 변환하면 돼요! 이제 브라우저를 닫아도 할 일 목록이 사라지지 않아서 얼마나 편리할지 상상해 보세요! ^^
할 일 추가 시 입력 필드 초기화 기능
네 번째 추가 기능은 “할 일 추가 시 입력 필드 초기화” 기능이에요! 새로운 할 일을 추가하고 나면 입력 필드가 자동으로 초기화되도록 만들어서 사용자 경험을 향상시켜 볼 거예요. 입력 필드의 값을 빈 문자열(“”)로 설정하면 간단하게 초기화할 수 있답니다! 작은 디테일이지만 사용자 입장에서는 굉장히 편리하게 느껴질 거예요. 이런 작은 배려가 전문가와 아마추어를 구분하는 기준이 될 수도 있답니다! (속닥속닥)
Enter 키로 할 일 추가 기능
다섯 번째 추가 기능은 “Enter 키로 할 일 추가” 기능이에요! 입력 필드에 할 일을 입력하고 Enter 키를 누르면 할 일이 추가되도록 만들어 볼게요. addEventListener를 사용해서 ‘keyup’ 이벤트를 감지하고, event.key 값이 ‘Enter’인 경우에 할 일을 추가하는 함수를 실행하면 됩니다! 키보드만 사용해서 할 일을 추가할 수 있으니 정말 편리하겠죠?!
추가적인 기능들
이 외에도 다양한 추가 기능들을 구현할 수 있어요. 예를 들어, 할 일의 우선순위를 설정하는 기능, 할 일에 마감일을 추가하는 기능, 할 일을 카테고리별로 분류하는 기능 등등… 상상력을 발휘해서 나만의 To-Do List를 만들어 보세요! 자바스크립트의 무궁무진한 가능성을 경험하게 될 거예요! ✨
마무리
이렇게 To-Do List를 완성하고 추가 기능까지 구현해 보았어요! 어때요? 생각보다 어렵지 않았죠?! 이제 여러분은 자바스크립트를 이용해서 동적인 웹 페이지를 만들 수 있는 기본기를 갖추게 되었어요! 앞으로 더욱더 멋진 웹 애플리케이션을 만들 수 있도록 꾸준히 공부하고 연습해 보세요! 저는 항상 여러분을 응원할게요! 파이팅! 💪
자, 이렇게 해서 나만의 To-Do List를 자바스크립트로 직접 만들어봤어요! 어때요, 생각보다 간단하지 않았나요? 처음엔 어려워 보였을지 몰라도, 하나씩 따라 하다 보면 웹 개발의 재미에 쏙 빠져들었을 거예요. 이제 할 일을 잊어버려서 곤란했던 경험은 모두 안녕! 직접 만든 To-Do List로 깔끔하게 정리하고, 생산성도 쑥쑥 올려보자고요. 앞으로 더 많은 기능을 추가하고 싶다면, 자바스크립트 관련 자료들을 찾아보는 것도 좋을 것 같아요. 무궁무진한 자바스크립트의 세계를 탐험하며 더 멋진 기능들을 추가해 보세요! To-Do List 만들기를 통해 자바스크립트와 더욱 친해지는 계기가 되었기를 바라요.
답글 남기기