Taeyoung Kim
English

Engineering

JavaScript 기초 및 DOM 조작

JavaScript 기초 및 DOM 조작 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

Chapter 1. JavaScript 기초 I: 변수와 데이터 타입

  • 핵심 목표: JavaScript에서 정보를 저장하고 다루는 가장 기본적인 단위인 '변수'와 '데이터 타입'을 이해하고 선언하는 방법을 배웁니다.
  • 개발 환경: VSCode와 WSL(Node.js) 환경에서 .js 파일을 생성하고, 터미널에서 node 파일명.js 명령어로 실행합니다.
  • 주요 개념 및 문법:
    • 변수(Variable): 데이터를 저장하기 위한 이름이 붙은 공간.
      • let: 값이 변경될 수 있는 변수를 선언합니다. (예: let myAge = 25;)
      • const: 한 번 할당하면 값이 변경될 수 없는 상수(constant)를 선언합니다. (예: const myCountry = "대한민국";)
    • 데이터 타입(Data Type):
      • String (문자열): 따옴표(" 또는 ')로 감싼 텍스트. (예: "홍길동")
      • Number (숫자): 따옴표 없이 사용하는 정수 또는 실수. (예: 25, 3.14)
      • Boolean (불리언): true(참) 또는 false(거짓) 두 가지 값.
    • 기타 값:
      • undefined: 변수를 선언만 하고 값을 할당하지 않은 상태.
      • null: 개발자가 의도적으로 '값이 없음'을 명시한 상태.
    • 주요 명령어 및 연산자:
      • console.log(): 괄호 안의 값을 터미널(콘솔)에 출력합니다.
      • +: 숫자끼리는 덧셈, 문자열과 사용하면 문자열을 이어 붙입니다.
      • typeof: 변수에 저장된 데이터의 타입을 확인합니다.
  • 실습 요약: 이름, 나이, 국적 등 프로필 정보를 let과 const를 사용하여 변수에 저장하고, console.log로 출력하며 각 데이터 타입을 확인합니다.

Chapter 2. JavaScript 기초 II: 조건문과 반복문

  • 핵심 목표: 프로그램이 특정 조건에 따라 다른 동작을 하도록 만들고(조건문), 특정 작업을 반복적으로 수행하도록(반복문) 제어하는 방법을 배웁니다.
  • 주요 개념 및 문법:
    • 조건문 (Conditional Statement):
      • if (조건) { ... }: 조건이 true일 경우 코드 블록을 실행합니다.
      • else if (조건) { ... }: 앞선 if 조건이 false일 때, 다른 조건을 확인합니다.
      • else { ... }: 위의 모든 조건이 false일 경우 실행합니다.
    • 반복문 (Loop):
      • for (초기화; 조건; 증감) { ... }: 정해진 횟수만큼 코드를 반복합니다.
      • while (조건) { ... }: 조건이 true인 동안 코드를 계속 반복합니다. (조건이 언젠가 false가 되도록 만들어야 무한 반복을 피할 수 있음)
    • 연산자:
      • 비교 연산자: > (크다), < (작다), === (값과 타입이 모두 같다).
      • 논리 연산자: && (AND, 두 조건 모두 참일 때 참).
      • 산술 연산자: % (나머지 연산).
  • 실습 요약: prompt로 사용자에게 숫자를 입력받아 parseInt로 숫자로 변환한 뒤, if문으로 짝수/홀수, 양수/음수/0을 판단하고, for문과 while문을 사용하여 조건에 따라 숫자를 순차적으로 출력하는 프로그램을 만듭니다.

Chapter 3. JavaScript 기초 III: 함수

  • 핵심 목표: 코드의 재사용성을 높이고 구조화하기 위해 특정 작업을 수행하는 코드 묶음인 '함수'를 정의하고 사용하는 방법을 배웁니다.
  • 주요 개념 및 문법:
    • 함수 정의: function 함수이름(매개변수1, 매개변수2) { 실행할 코드 }
    • 함수 호출: 함수이름(인자1, 인자2)
    • 매개변수 (Parameter): 함수 정의 시 외부에서 값을 받기 위해 선언하는 변수.
    • 인자 (Argument): 함수 호출 시 매개변수에 실제로 전달하는 값.
    • 반환 (Return): return 키워드를 사용하여 함수 실행 결과를 호출한 곳으로 되돌려줍니다. return을 만나면 함수는 즉시 종료됩니다.
    • 화살표 함수 (Arrow Function): function 키워드 대신 =>를 사용하여 함수를 더 간결하게 정의하는 문법. (예: const add = (a, b) => a + b;)
  • 실습 요약: 환영 메시지를 출력하는 함수, 두 숫자를 받아 계산 결과를 반환하는 간단한 계산기 함수 등을 만들고 호출하며 함수의 기본 구조를 익힙니다.

Chapter 4. DOM 기초 I: 요소 선택하기

  • 핵심 목표: JavaScript를 사용하여 HTML 문서의 특정 요소를 선택하는 방법을 배웁니다.
  • 주요 개념:
    • DOM (Document Object Model): 웹 브라우저가 HTML 문서를 해석하여 JavaScript가 접근할 수 있도록 객체 형태로 만든 모델 (문서 구조도).
  • 주요 메서드 (선택 도구):
    • document.getElementById('아이디'): 고유한 ID로 요소 하나를 선택합니다. (가장 빠름)
    • document.getElementsByClassName('클래스'): 특정 클래스 이름을 가진 모든 요소를 **목록(HTMLCollection)**으로 가져옵니다.
    • document.getElementsByTagName('태그'): 특정 태그 이름을 가진 모든 요소를 **목록(HTMLCollection)**으로 가져옵니다.
    • document.querySelector('CSS 선택자'): CSS 선택자로 찾은 첫 번째 요소 하나를 선택합니다.
    • document.querySelectorAll('CSS 선택자'): CSS 선택자로 찾은 모든 요소를 **목록(NodeList)**으로 가져옵니다.
  • 실습 요약: 미리 작성된 HTML 문서에서 ID, 클래스, 태그 이름, CSS 선택자 등 다양한 방법으로 요소를 선택하고 console.log로 확인합니다.

Chapter 5. DOM 기초 II: 요소 조작하기

  • 핵심 목표: JavaScript로 선택한 HTML 요소의 내용, 속성, 스타일을 동적으로 변경하는 방법을 배웁니다.
  • 주요 속성 및 메서드:
    • 내용 변경:
      • element.textContent = "새 텍스트": 요소 안의 순수 텍스트 내용을 변경합니다.
      • element.innerHTML = "<b>새 HTML</b>": 요소 안의 HTML 구조까지 변경합니다.
    • 속성(Attribute) 변경:
      • imageElement.src = "새 이미지 경로": 이미지의 소스를 변경합니다.
      • linkElement.href = "새 링크 주소": 링크의 목적지를 변경합니다.
    • 스타일 변경:
      • element.style.속성 = "값": 요소의 CSS 스타일을 직접 변경합니다. (예: element.style.color = "red";)
      • element.classList.add('클래스명'): CSS 클래스를 추가합니다.
      • element.classList.remove('클래스명'): CSS 클래스를 제거합니다.
  • 실습 요약: 선택한 문단의 텍스트를 바꾸고, 이미지의 주소(src)와 링크의 목적지(href)를 변경하며, 스타일과 클래스를 동적으로 조작합니다.

Chapter 6. 이벤트 처리 I: 클릭 이벤트

  • 핵심 목표: 사용자의 마우스 '클릭'이라는 행동(이벤트)에 반응하여 JavaScript 코드가 실행되도록 하는 방법을 배웁니다.
  • 주요 개념:
    • 이벤트(Event): 웹 페이지에서 발생하는 사건 (클릭, 키보드 입력, 마우스 이동 등).
    • 이벤트 리스너(Event Listener): 특정 요소에서 특정 이벤트가 발생하기를 기다리는 감지기.
  • 주요 메서드:
    • element.addEventListener('이벤트종류', 실행할함수): 요소에 이벤트 리스너를 등록합니다.
    • 이벤트 종류: 'click'
  • 실습 요약: HTML 버튼 요소를 선택하고, addEventListener를 사용하여 'click' 이벤트가 발생하면 미리 정의된 함수가 실행되어 웹 페이지 문단의 텍스트가 바뀌는 기능을 구현합니다.

Chapter 7. 이벤트 처리 II: 폼 제출

  • 핵심 목표: 사용자가 <form>에 입력한 데이터를 JavaScript로 가져와 처리하는 방법을 배웁니다.
  • 주요 개념 및 메서드:
    • <form>: 사용자 입력을 받는 HTML 태그.
    • 'submit' 이벤트: 폼의 제출 버튼을 눌렀을 때 발생하는 이벤트.
    • event.preventDefault(): 이벤트의 기본 동작(폼 제출 시 페이지가 새로고침되는 것)을 막습니다.
    • inputElement.value: <input> 등 입력 요소에 사용자가 입력한 값을 가져옵니다.
  • 실습 요약: 이름과 이메일을 입력받는 폼을 만들고, '제출' 버튼 클릭 시 페이지가 새로고침되는 것을 event.preventDefault()로 막은 뒤, 입력된 값을 JavaScript로 가져와 페이지 하단에 표시하는 기능을 구현합니다.

Chapter 8. 일일 실습: 할 일 목록 만들기

  • 핵심 목표: 2일차에 배운 JavaScript 기초, DOM 조작, 이벤트 처리 지식을 총동원하여 실용적인 '할 일 목록(To-Do List)' 웹 애플리케이션을 만듭니다.
  • 구현 기능 및 사용 기술:
    1. 할 일 추가:
      • '추가' 버튼에 클릭 이벤트 리스너를 등록합니다.
      • 입력창의 값을 **.value*로 가져옵니다.
      • *document.createElement('li')*로 새로운 목록 아이템 요소를 만듭니다.
      • *.textContent*로 아이템에 할 일 내용을 넣습니다.
      • *appendChild()*를 사용해 목록(<ul>)에 새로 만든 아이템을 추가합니다.
    2. 할 일 완료 표시:
      • 목록(<ul>)에 이벤트 리스너를 등록하여 이벤트 위임을 사용합니다.
      • 클릭된 요소(event.target)가 목록 아이템(<li>)인지 확인합니다.
      • *classList.toggle('completed')*를 사용하여 완료 상태를 나타내는 CSS 클래스를 추가하거나 제거합니다.
    3. 입력창 초기화: 할 일 추가 후 input.value = '' 코드로 입력창을 비웁니다.