소개
이 Lab 에서는 웹 개발자 지망생인 Alex 의 시각으로 웹 개발 세계에 발을 들여놓게 됩니다. Alex 는 동적인 개인 재정 추적기를 만들라는 과제를 받았습니다. 사용자가 일일 지출과 수입을 입력하고 추적할 수 있는 사용자 친화적인 애플리케이션을 구축하는 것이 목표입니다. 목표는 명확합니다. 사용자가 번거로움 없이 재정을 쉽게 관리할 수 있도록 직관적이고 매력적인 인터페이스를 개발하는 것입니다. 이 프로젝트는 개인 재정 관리를 단순화하는 것을 목표로 할 뿐만 아니라 JavaScript 및 DOM 조작의 기본 개념을 소개하는 것을 목표로 합니다.
EconoMe 프로젝트를 완료하기 위해 5 개의 Lab 을 진행할 것입니다.
지식 포인트:
- 변수 선언 (
let,const) - DOM 조작 기본 (요소 가져오기, 요소 내용 수정)
- 이벤트 리스닝 (
addEventListener)
기본 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 조작에 대한 이해를 굳건히 할 뿐만 아니라 실제 웹 개발 시나리오를 시뮬레이션하여 앞으로 더 복잡한 프로젝트를 준비할 수 있도록 합니다.
