JavaScript 기초 : 기본 문법 요약 · DOM 조작

0. 웹 개발 구조

웹 페이지를 만들 때 크게 3가지 기술을 이용한다.

• HTML = 구조/의미(뼈대)
• CSS = 모양/배치(디자인)
• JS = 동작/상호작용(기능)

이 글(2편)은 마지막 단계인 JS(동작/상호작용) 중에서도 기본문법 + DOM 조작을 정리한다.

---

1. 웹에서 JS의 역할

HTML/CSS로 화면을 만들었다면,
JavaScript는 사용자 행동(클릭/입력 등)에 반응해 화면을 바꾸는 역할을 한다.
즉, “동작”을 담당한다.

---

2. JS 기본 문법

DOM을 조작하려면 아래 문법이 필요하다.

• 변수 : 값 저장/재사용 (let, const)
• 조건문 : 상황 분기 (if)
• 반복문 : 반복 처리 (for, while)
• 함수 : 동작을 묶어서 재사용 (function, 화살표 함수)
• 배열/객체 : 여러 데이터를 구조적으로 관리 ([], {})

외우지 말고, DOM을 바꾸는 로직을 만들기 위한 도구로 이해하기

 

변수 생성 : let / const

변수는 값을 저장하는 상자다.

• const : 재할당이 불가능하다. 기본값처럼 “바뀌면 안 되는 값”에 쓴다.
• let : 값이 바뀌어야 할 때 쓴다(점수/시간 같은 상태 값).

포인트는 “무조건 let”이 아니라, 바뀌지 않으면 const, 바뀌면 let로 나눠서 써야 한다.

조건문 : if / else if / else

조건문은 "조건을 검사하고, 결과에 따라 다른 일을 한다”는 문법이다.

• 정답이면 점수 증가, 아니면 유지
• 시간이 0이면 종료, 아니면 계속
• 입력값이 비었으면 경고, 아니면 진행

이런 분기 로직을 조건문으로 만든다.

반복문 : for / while

반복문은 같은 작업을 여러 번 수행할 때 사용한다.

• for : 반복 횟수나 범위가 비교적 명확할 때(목록 순회 등)
• while : “어떤 조건이 만족되는 동안 계속” 반복할 때(조건 기반 반복)

주의점은 반복 종료 조건을 잘못 잡으면 무한 반복이 생길 수 있다는 점이다.

함수 : function

함수는 동작을 “한 덩어리”로 묶어 재사용하는 문법이다.

함수를 쓰는 이유는 단순하다.

• 코드가 길어질수록 “같은 동작”이 여러 군데 반복되는데, 그걸 함수로 묶으면 관리가 쉬워진다.
• 초기화/검증/업데이트 같은 핵심 로직을 함수로 나누면 흐름이 읽히는 코드가 된다.

함수는 보통 “입력(매개변수)”을 받아서 “출력(리턴)”을 돌려줄 수도 있다.

배열(Array)

배열은 여러 값을 “순서대로” 묶어서 관리하는 자료구조다.

• 목록 데이터(단어 리스트, 할 일 목록, 기록 등)에 적합하다.
• 순서가 있고, 인덱스(몇 번째)로 접근하는 방식이다.

객체(Object)

객체는 여러 정보를 “이름표(key)”로 묶어서 관리하는 자료구조다.

• 설정값, 사용자 정보, 상태(state) 묶음처럼 “항목마다 의미가 다른 데이터”에 적합하다.
• 이름으로 값을 찾는다(예: name, score, level 같은 키)

---

3. DOM 조작이란?

DOM(Document Object Model)은 HTML을 JS가 다루기 쉬운 형태로 만든 “객체 모델”이다.
JS는 DOM을 통해 요소를 찾고, 바꾸고, 이벤트를 붙인다.

기본 흐름은 3단계다.

1. 요소 선택 : document.querySelector()
2. 값 변경 : innerText / textContent / value / classList
3. 이벤트 처리 : addEventListener()

 

왜 필요한가

• HTML은 원래 문서(텍스트)에 가깝다.
• 브라우저는 이 문서를 읽어 <div>, <button>, <input> 같은 요소들을 트리 구조(부모-자식 관계)로 정리한다.
• 그 결과물이 DOM이고, JS는 DOM을 통해서만 화면 요소를 안정적으로 조작할 수 있다.

즉, JS는 HTML 파일을 직접 편집하는 게 아니라,
브라우저가 만들어 둔 DOM을 바꾸고,
브라우저는 그 변경을 화면에 반영한다.

 

DOM 조작과 CSS의 연결

JS로 스타일 속성을 직접 바꾸기보다, class를 붙였다/떼는 방식을 많이 쓴다.

• JS : classList.add() / remove() / toggle()
• CSS : .active, .hidden 같은 클래스에 스타일 정의

이 방식은 로직(JS)과 표현(CSS)을 분리해 유지보수가 쉬워진다.