자바스크립트 기초 문법부터 To-Do 리스트 실습까지 한눈에 배우기

자바스크립트 기초 문법부터 To-Do 리스트 실습까지 한눈에 배우기

🧠 자바스크립트를 배우기 전, 꼭 알아두면 좋은 것들

웹사이트를 조금만 들여다보면 자바스크립트라는 단어를 쉽게 마주하게 됩니다.
정적인 HTML과 CSS만으로는 웹페이지에 생명력을 불어넣기 어렵기 때문이죠.
자바스크립트는 사용자의 클릭, 입력, 마우스 움직임에 따라 다양한 반응을 만들어내는 웹의 마법 같은 언어입니다.
그렇다고 너무 어렵게 느낄 필요는 없습니다.
누구나 처음은 기초 문법부터 시작하며,
간단한 실습 예제와 함께 따라가다 보면 어느 순간 자바스크립트의 흐름이 자연스럽게 이해되기 시작할 거예요.

이번 글에서는 자바스크립트의 핵심 개념을 실제 To-Do 리스트 예제를 통해 쉽게 익혀보고자 합니다.
기본적인 함수 사용법, 배열 다루기, 객체 처리까지도 자연스럽게 경험할 수 있도록 구성했어요.
또한, Chrome 개발자 도구를 활용해 코드를 실시간으로 확인하고 디버깅하는 방법도 함께 다뤄봅니다.
초보자부터 입문자까지 자바스크립트로 웹 개발을 처음 시작하는 분들께 도움이 될 수 있도록 알차게 준비했어요.

자바스크립트(JavaScript)는 웹페이지에서 사용자의 동작에 반응하는 기능을 만들어주는 언어입니다.
HTML이 뼈대를 만들고 CSS가 옷을 입힌다면, 자바스크립트는 움직임과 생명력을 더하는 역할을 합니다.
단순히 보이는 화면을 넘어서서, 클릭하거나 입력할 때 뭔가 반응하는 웹사이트는 거의 대부분 자바스크립트를 사용합니다.

예를 들어 쇼핑몰에서 장바구니 버튼을 눌렀을 때, 갑자기 숫자가 올라가거나 모달 창이 뜨는 것.
또는 로그인 폼에서 이메일 형식을 잘못 입력하면 즉시 오류 메시지가 나타나는 것.
이 모든 것은 자바스크립트 덕분에 가능한 일입니다.

💡 자바스크립트가 하는 일은 생각보다 다양해요

• 🖱️버튼 클릭 시 다른 내용이 보이게 만들기
• ⌨️폼 입력값을 실시간으로 검증하기
• 📦리스트를 동적으로 추가하거나 제거하기
• 📱모바일 터치에 따라 콘텐츠 슬라이드하기

이처럼 자바스크립트는 우리가 웹을 사용할 때 자연스럽고 편리한 경험을 하도록 도와주는 중심적인 역할을 합니다.
HTML과 CSS만으로는 구현할 수 없는 ‘반응하는 웹’을 만들기 위해 자바스크립트는 반드시 필요합니다.

자바스크립트의 핵심은 바로 이벤트 처리와 DOM(Document Object Model) 조작입니다.
사용자의 행동에 따라 웹페이지가 즉각적으로 반응하려면 HTML 요소와 상호작용할 수 있어야 하죠.
이를 위해 자바스크립트는 HTML 요소들을 객체처럼 다루며, 마우스 클릭이나 키보드 입력 같은 이벤트에 반응합니다.

🖱️ 클릭 이벤트 연결하기

HTML에서 버튼을 만들고, 자바스크립트로 해당 버튼에 클릭 이벤트를 연결하면 됩니다.
예를 들어 아래처럼 사용할 수 있어요.

// 버튼 요소 가져오기
const btn = document.querySelector("#myButton");

// 클릭 이벤트 설정
btn.addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

이처럼 HTML에서 특정 요소를 선택하고, 그 요소에 이벤트를 추가하는 것이 DOM 조작의 기본입니다.
querySelector나 getElementById 등을 사용하면 원하는 요소에 쉽게 접근할 수 있어요.

🔧 DOM을 이용한 화면 변경

단순한 반응뿐 아니라, 클릭 시 화면의 내용을 바꾸거나 숨기는 것도 자바스크립트로 가능합니다.
예를 들어 버튼을 누르면 텍스트를 바꾸는 방식은 다음과 같습니다.

const text = document.querySelector("#text");
const btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
    text.textContent = "텍스트가 변경되었습니다!";
});

이처럼 자바스크립트를 이용하면 페이지를 새로고침하지 않고도 실시간으로 화면을 바꿀 수 있어,
사용자 경험을 훨씬 더 부드럽고 직관적으로 만들 수 있습니다.

자바스크립트를 실제로 활용해보기에 가장 좋은 예제는 바로 To-Do 리스트입니다.
할 일 목록을 입력하고 버튼을 누르면 목록에 항목이 추가되고,
완료하거나 삭제하는 기능을 만들면서 이벤트 처리, DOM 조작, 배열 관리까지 연습할 수 있습니다.

📋 기본 HTML 구조 만들기

<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가하기</button>
<ul id="todoList"></ul>

🧠 자바스크립트 로직 추가하기

const input = document.querySelector("#todoInput");
const button = document.querySelector("#addBtn");
const list = document.querySelector("#todoList");

button.addEventListener("click", function() {
    const todoText = input.value;
    if (todoText.trim() !== "") {
        const li = document.createElement("li");
        li.textContent = todoText;
        list.appendChild(li);
        input.value = "";
    }
});

이 간단한 코드만으로도 할 일을 입력하고 리스트에 추가할 수 있습니다.
이후 삭제 버튼 추가, 완료 표시 처리, 배열 저장 등으로 기능을 확장할 수 있죠.
실제로 타이핑하고 실행해보면 자바스크립트가 얼마나 직관적인지도 함께 느낄 수 있을 거예요.

자바스크립트에서 데이터를 관리할 때 가장 기본이 되는 자료구조는 배열(Array)과 객체(Object)입니다.
To-Do 리스트에 여러 개의 할 일을 저장하거나, 각각의 항목에 상태(완료 여부 등)를 붙이고 싶을 때 꼭 알아두어야 할 개념이에요.

🧾 배열에 할 일 목록 저장하기

let todos = [];

function addTodo(task) {
    todos.push(task);
    console.log(todos);
}

위처럼 할 일을 문자열로 배열에 추가할 수 있습니다.
하지만 완료 상태 같은 정보도 함께 저장하려면 객체로 구성된 배열이 더 적합합니다.

📦 객체 형태로 리스트 다루기

let todos = [];

function addTodo(task) {
    const newTodo = {
        text: task,
        completed: false
    };
    todos.push(newTodo);
}

이렇게 하면 각 항목에 대해 ‘완료됨’과 같은 속성도 함께 관리할 수 있어요.
데이터를 잘 구조화해두면 화면에 표시하거나 특정 항목만 필터링하는 것도 훨씬 수월해집니다.

🛠️ 배열 메서드를 활용한 실전 팁

• 🔍filter(): 특정 조건의 할 일만 골라내기
• ✏️map(): 리스트 항목을 변형하여 출력하기
• 🗑️splice(): 배열에서 특정 항목 제거하기

기초 문법을 이해했다면 이제 배열과 객체를 이용해 복잡한 동작도 손쉽게 구현할 수 있어요.
데이터를 다루는 능력은 자바스크립트 실력을 키우는 데 매우 중요한 부분이랍니다.

코드를 작성하면서 “왜 안 되지?”라는 순간은 자바스크립트를 배우는 누구에게나 찾아옵니다.
이럴 때 가장 강력한 도구가 바로 Chrome 개발자 도구(DevTools)예요.
브라우저에서 바로 자바스크립트 코드를 실행하거나,
DOM 구조를 실시간으로 확인하며 오류를 추적할 수 있어 매우 유용하죠.

🧭 개발자 도구 열기

Windows에서는 F12 키 또는 Ctrl + Shift + I로,
Mac에서는 Command + Option + I로 개발자 도구를 열 수 있습니다.
또는 웹페이지에서 마우스 오른쪽 버튼을 눌러 “검사”를 선택해도 동일하게 접근할 수 있어요.

🖥️ Console 탭으로 실험하기

개발자 도구에서 가장 많이 활용되는 탭은 Console입니다.
여기서 자바스크립트 코드를 직접 입력해보고 결과를 바로 확인할 수 있습니다.
예를 들어 다음과 같이 입력해보세요.

console.log("Hello JavaScript!");

실행하면 바로 아래에 결과가 출력되며,
변수 값이나 함수의 동작을 확인하는 데 매우 유용합니다.

🔍 코드 중단과 추적: Breakpoint

스크립트가 자동으로 실행되는 부분을 추적하고 싶다면 Sources 탭에서 Breakpoint(중단점)를 설정할 수 있습니다.
이 기능을 활용하면 코드를 한 줄씩 따라가며 실행 흐름을 확인할 수 있어 디버깅에 큰 도움이 됩니다.

🚀 자바스크립트를 익히는 가장 확실한 방법은 직접 실습하는 것

자바스크립트는 처음에는 낯설고 복잡하게 느껴질 수 있지만,
기초 문법부터 DOM 조작, 이벤트 처리, 배열과 객체 활용까지 하나씩 실습하며 익히다 보면 점점 익숙해집니다.
특히 To-Do 리스트와 같은 실용적인 예제를 구현해보면서 자바스크립트가 웹에서 어떤 역할을 하는지 자연스럽게 체감할 수 있어요.
Chrome 개발자 도구를 활용해 디버깅하고 실험하는 습관까지 갖춘다면, 더 빠르게 성장할 수 있습니다.
앞으로 다양한 프로젝트에 자바스크립트를 활용하며 실력을 키워보세요.
무엇보다 중요한 건 직접 타이핑하고 실행해보는 경험입니다.

관련 태그:자바스크립트기초, 자바스크립트DOM, 웹개발입문, ToDo리스트만들기, 개발자도구, ChromeDevTools, 자바스크립트배열, 자바스크립트객체, 프론트엔드기초, 코딩입문