JavaScript 및 DOM 조작 마스터하기 - 개인 재정 관리 웹 개발

소개

이 Lab 에서는 웹 개발자 지망생인 Alex 의 시각으로 웹 개발 세계에 발을 들여놓게 됩니다. Alex 는 동적인 개인 재정 추적기를 만들라는 과제를 받았습니다. 사용자가 일일 지출과 수입을 입력하고 추적할 수 있는 사용자 친화적인 애플리케이션을 구축하는 것이 목표입니다. 목표는 명확합니다. 사용자가 번거로움 없이 재정을 쉽게 관리할 수 있도록 직관적이고 매력적인 인터페이스를 개발하는 것입니다. 이 프로젝트는 개인 재정 관리를 단순화하는 것을 목표로 할 뿐만 아니라 JavaScript 및 DOM 조작의 기본 개념을 소개하는 것을 목표로 합니다.

EconoMe 프로젝트를 완료하기 위해 5 개의 Lab 을 진행할 것입니다.

지식 포인트:

변수 선언 (let, const)
DOM 조작 기본 (요소 가져오기, 요소 내용 수정)
이벤트 리스닝 (addEventListener)

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 중급 레벨의 실험이며 완료율은 65%입니다.학습자들로부터 97%의 긍정적인 리뷰율을 받았습니다.

기본 JavaScript

JavaScript 는 간단하고 객체 지향적이며 이벤트 기반 언어입니다. 서버에서 클라이언트로 다운로드되어 브라우저에서 실행됩니다.

HTML 및 웹과 함께 사용할 수 있으며, 더 넓게는 서버, PC, 노트북, 태블릿 및 스마트폰에서 사용할 수 있습니다.

특징은 다음과 같습니다.

일반적으로 클라이언트 측 스크립트 작성에 사용됩니다.
주로 HTML 페이지에 상호 작용 동작을 추가하는 데 사용됩니다.
인터프리터 언어이며, 해석되는 대로 실행됩니다.

그렇다면, JavaScript 를 HTML 에 어떻게 포함시킬까요?

포함 방법은 CSS 와 유사하며 세 가지 방식으로 수행할 수 있습니다.

특히 짧은 JavaScript 코드의 경우 HTML 태그 내에서 직접 사용합니다.
<script> 태그를 사용하여 JavaScript 코드를 HTML 문서의 <head> 및 <body>에 포함할 수 있습니다.
외부 JavaScript 파일을 사용하여 .js 접미사가 있는 파일에 JavaScript 스크립트 코드를 작성하고 <script> 태그의 src 속성을 설정하여 포함합니다.

예를 들어, F12 를 누르면 이 페이지에 많은 외부 JavaScript 파일이 포함되어 있는 것을 볼 수 있으며, Event Listeners를 클릭하면 페이지 내에 다양한 유형의 이벤트가 있음을 확인할 수 있습니다.

이제 ~/project/index.html에 <script> 태그를 추가하여 script.js 파일을 포함해 보겠습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

다음으로, JavaScript 에서 변수를 정의하는 방법을 배워보겠습니다!

✨ 솔루션 확인 및 연습

변수란 무엇인가

변수는 정보를 저장하는 컨테이너로 볼 수 있습니다. 프로그래밍에서 우리는 변수를 사용하여 데이터 값을 저장합니다. JavaScript 는 동적으로 형식이 지정되는 언어이므로 변수의 형식을 선언할 필요가 없습니다. 형식은 프로그램 실행 중에 자동으로 결정됩니다.

변수 선언

JavaScript 에서는 var, let, 또는 const 키워드를 사용하여 변수를 선언할 수 있습니다.

var: ES6 이전에는 var가 변수를 선언하는 주요 방법이었으며 함수 범위 (function scope) 를 가집니다.
let: ES6 에 도입되었으며, 블록 범위 (block-scoped) 의 지역 변수를 선언할 수 있습니다.
const: 또한 ES6 에 도입되었으며, 선언된 후 변경할 수 없는 상수를 선언하는 데 사용됩니다.

예를 들어:

var name = "Alice"; // var 를 사용하여 변수 선언
let age = 30; // let 을 사용하여 변수 선언
const city = "London"; // const 를 사용하여 상수 선언

변수의 유형

JavaScript 에는 여러 가지 데이터 유형이 있습니다.

String: 텍스트 데이터, 예: "Hello, World!".
Number: 정수 또는 부동 소수점 숫자, 예: 42 또는 3.14.
Boolean: true 또는 false.
Object: 여러 값 또는 복잡한 데이터 구조를 저장할 수 있습니다.
null 및 undefined: 각각 "값이 없음"과 "값이 정의되지 않음"을 나타내는 특수한 유형입니다.

변수 사용

변수가 선언되면 프로그램에서 사용할 수 있습니다.

console.log(name); // 출력: Alice
console.log("Age: " + age); // 출력: Age: 30
console.log(city + " is a beautiful city"); // 출력: London is a beautiful city

console.log() 정적 메서드는 콘솔에 메시지를 출력합니다.

✨ 솔루션 확인 및 연습

DOM 조작 (DOM Manipulation) - 웹 페이지 동적 제어

DOM (Document Object Model, 문서 객체 모델) 은 HTML 및 XML 문서를 트리 구조로 취급하는 플랫폼 간, 언어 독립적인 인터페이스입니다. 여기서 각 노드는 요소, 속성 및 텍스트 콘텐츠와 같은 문서의 일부입니다.

DOM 요소 접근

웹 페이지의 내용을 조작하려면 먼저 DOM 트리에서 요소에 접근해야 합니다. ID, 클래스 이름 또는 태그 이름을 사용하여 요소에 접근하는 다양한 방법을 사용할 수 있습니다.

let elementById = document.getElementById("elementId"); // ID 로 요소 접근
let elementsByClassName = document.getElementsByClassName("className"); // 클래스 이름으로 요소 컬렉션 접근
let elementsByTagName = document.getElementsByTagName("tagName"); // 태그 이름으로 요소 컬렉션 접근

EconoMe 프로젝트의 ~/project/script.js 파일에 다음 코드를 추가합니다.

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

요소 내용 수정

요소에 대한 참조가 있으면 해당 내용을 수정할 수 있습니다. innerHTML 및 textContent 속성이 일반적으로 이 목적으로 사용됩니다.

예를 들어, id=content인 div 요소에 <p>New HTML content</p>를 삽입하고, id=info인 span 요소에서 "Hello"를 "New text content"로 바꾸려면 다음 JavaScript 코드를 사용합니다.

요소 추가 및 제거

JavaScript 를 사용하여 페이지에서 동적으로 요소를 추가하거나 제거할 수 있습니다.

예를 들어:

// 새로운 요소 생성
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // 새로운 요소를 문서 body 에 추가
document.body.removeChild(newElement); // 요소를 문서 body 에서 제거

HTML 문서에서 document.createElement() 메서드는 HTML 요소를 생성합니다.
document.body.appendChild() 메서드는 새로운 요소를 <body> 요소의 끝에 추가합니다.
document.body.removeChild() 메서드는 요소를 <body> 요소에서 제거합니다.

✨ 솔루션 확인 및 연습

이벤트 처리 (Event Handling) - 웹 개발 필수 개념

이벤트 리스너를 사용하면 사용자 작업에 응답할 수 있습니다.

addEventListener("event", function () {});

클릭, 마우스 오버 또는 키 누름과 같은:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

기본 DOM 작업을 배운 후, EconoMe 프로젝트의 ~/project/script.js 파일에 다음 코드를 추가할 수 있습니다.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

JavaScript 의 DOMContentLoaded 이벤트는 초기 HTML 문서가 스타일시트, 이미지 및 하위 프레임의 로딩이 완료되기를 기다리지 않고 완전히 로드되고 파싱되었을 때 발생합니다. 이는 DOM 이 준비되는 즉시 JavaScript 코드를 실행하여 스크립트가 완전히 파싱된 HTML 요소와 상호 작용하도록 보장하는 중요한 이벤트입니다.

이 랩에서는 이 시점에서 효과를 미리 볼 필요가 없습니다. 다음 단계에서 코드를 완료한 후 검토할 것입니다.

✨ 솔루션 확인 및 연습

요약

이 랩에서는 Alex 와 함께 개인 재정 추적기의 기본적이지만 기본적인 부분을 구축하는 여정을 시작했습니다. 프로젝트 환경을 설정하고 JavaScript 를 사용하여 DOM 을 조작하여 초기 재정 상태를 표시함으로써 동적 웹 애플리케이션을 위한 기반을 마련했습니다. 핵심은 JavaScript 가 HTML 요소와 상호 작용하여 웹 페이지의 내용을 동적으로 변경하는 방법을 이해하는 것이며, 이는 다음 단계에서 더 많은 대화형 기능을 위한 기반을 마련합니다.

이러한 실습 방식은 JavaScript 및 DOM 조작에 대한 이해를 굳건히 할 뿐만 아니라 실제 웹 개발 시나리오를 시뮬레이션하여 앞으로 더 복잡한 프로젝트를 준비할 수 있도록 합니다.