[2026.03.31]TIL - 2일차 JavaScript 함수 & DOM & 간단 인터랙션

오늘은 함수 개념부터 시작해서

DOM 조작, 이벤트 처리, 간단한 UI 구현(이미지 롤링)까지 학습했다.

 

이제부터는 단순 문법이 아니라

웹이 실제로 움직이는 구조를 다루기 시작한 느낌이다.

 

1.  함수(Function) 심화

JavaScript에서 함수는 단순한 기능이 아니라

값처럼 다룰 수 있는 중요한 개념이다.

 

이번 학습에서는 다양한 함수 형태를 배웠다.

1) 명시적 함수

가장 기본적인 함수 선언 방식이다.

function 키워드를 사용하여 이름을 붙여 정의한다.

2) 익명 함수 (리터럴 함수)

이름 없이 만들어진 함수로, 변수에 저장해서 사용한다.

3) 콜백 함수

 

다른 함수의 매개변수로 전달되어 나중에 실행되는 함수이다.

 

• 함수 안에 함수를 전달
• 나중에 실행되는 구조

👉 JavaScript에서는 함수도 “값”이다

변수에 저장 가능
다른 함수에 전달 가능
반환 가능

---

2. 클로저(Closure)

 

클로저는 함수가 종료된 이후에도 내부 변수에 접근할 수 있는 개념이다.

 

일반적으로 함수가 끝나면 내부 변수는 사라지지만,

내부 함수가 해당 변수를 참조하고 있으면 그 값은 계속 유지된다.

 

이 개념을 활용하면

값을 계속 유지하거나 누적하는 구조를 만들 수 있다.

1. func04() 실행
2. closureTest("이창진") 실행
3. val = "이창진"
4. msg = "입니다."
5. addVal 함수 생성
6. return addVal;
7. 반환된 addVal 함수가 tmp에 저장
8. tmp() 실행
9. 그제서야 addVal 함수 내용 실행
10. alert(val + " " + msg) 실행
11. "이창진 입니다." 출력

---

3. 화살표 함수 (Arrow Function)

 

화살표 함수는 기존 함수보다 간결하게 작성할 수 있는 방식이다.

 

특징은 다음과 같다.

 

• function 키워드를 생략할 수 있다.
• return을 생략할 수 있다.
• 코드가 짧아져 가독성이 좋아진다.

실무에서도 많이 사용되는 방식이다.

---

 

4. DOM 조작 (Element 접근)

 

DOM을 이용하면 HTML 요소를 JavaScript로 직접 제어할 수 있다.

 

이번에는 여러 가지 접근 방식을 학습했다.

1) id로 접근

하나의 요소를 선택할 때 사용한다.

 

id를 이용하면 특정 요소 하나를 바로 선택할 수 있다.

선택한 요소의 배경색을 바꾸거나, innerHTML을 이용해 내용을 추가할 수 있다.

2) 태그 이름으로 접근

여러 개의 요소를 배열처럼 가져온다.

 

getElementsByTagName()을 사용하면 같은 태그를 여러 개 가져올 수 있다.

가져온 요소들은 인덱스로 접근할 수 있고, 반복문과 함께 사용하면 여러 요소를 한 번에 제어할 수 있다.

3) name으로 접근해서 체크박스 선택값 읽기

 

사용자가 선택한 값을 가져오는 방법이다.

getElementsByName()을 사용해 체크박스 요소들을 가져오고,

checked 속성을 통해 사용자가 선택한 항목만 골라낼 수 있다.

선택된 값은 value로 읽어와 화면에 출력할 수 있다.

 

4) input 값 읽기와 입력 검증

 

입력창에 입력된 값은 value를 통해 가져올 수 있다.

 

입력값이 비어 있으면 focus()를 사용해 다시 입력창으로 커서를 이동시킬 수 있다.

이런 방식은 사용자 입력 검증에서 자주 사용된다.

 

5) CSS 선택자로 접근 (querySelector)

 

가장 많이 사용하는 방식이다.

querySelector()는 하나의 요소를 선택하고,

querySelectorAll()은 여러 요소를 선택할 수 있다.

 

id, class, 태그 등 다양한 선택이 가능하기 때문에

실무에서 가장 자주 사용된다.

 

또한, 요소를 선택하는 방법은 querySelector 외에도

getElementById(), getElementsByTagName(), getElementsByName() 같은 방식도 존재한다.

---

6. DOM + 반복문 활용

 

반복문을 사용하면 여러 요소를 한 번에 처리할 수 있다.

반복문을 사용하면 여러 요소에 스타일을 한 번에 적용할 수 있으며,

실제로 리스트의 각 항목에 순차적으로 색상이 적용되는 것을 확인할 수 있다.

 

---

7. 이미지 롤링 구현

 

이번 학습에서 가장 인상 깊었던 부분은

이미지를 넘기는 간단한 기능이었다.

 

 

이 코드는 현재 이미지 번호를 상태값으로 관리하면서

버튼 클릭 시 값을 증가 또는 감소시켜 이미지를 변경하는 구조이다.

 

범위를 벗어날 경우 다시 처음이나 마지막으로 돌아가도록 처리하여

연속적으로 이미지가 순환되도록 구현하였다.

 

👉 상태값(num)을 기반으로 DOM을 업데이트하는 것이 핵심이다.

 

---

8. 오늘 공부하면서 정리한 핵심 & 느낀 점

오늘은 JavaScript 문법을 넘어서

실제로 화면을 제어하는 흐름을 처음으로 경험한 날이었다.

 

정리하면 아래와 같다.

JavaScript에서 함수는 값처럼 다룰 수 있다.
콜백 함수는 다른 함수에 전달되어 실행된다.
클로저는 함수가 종료된 이후에도 데이터를 유지한다.
화살표 함수는 기존 함수보다 간결하게 작성할 수 있다.
DOM을 통해 HTML 요소를 직접 조작할 수 있다.
querySelector 방식이 가장 유연하고 많이 사용된다.
사용자 입력은 value, checked 등을 통해 가져온다.
반복문을 이용하면 여러 요소를 효율적으로 처리할 수 있다.
상태값을 활용하면 간단한 UI 기능도 구현할 수 있다.

오늘 배운 내용은 단순한 문법이 아니라,
웹이 실제로 동작하는 구조의 시작이라고 느꼈다.

특히,

 

왜 클로저를 사용하는지

왜 DOM 조작이 필요한지

왜 이벤트 기반으로 동작하는지

 

이 흐름이 조금씩 연결되면서 JavaScript의 역할이 점점 명확해지는 느낌이었다.

 

처음에는 쉬워 보이지만, 이 개념들이 쌓여야 실제 서비스를 만들 수 있을 것 같다.

 

JavaScript로 화면을 직접 제어하면서 웹 인터랙션의 기본 구조를 이해하기 시작한 날이었다.

 

앞으로도 단순히 문법만 외우는 게 아니라, 동작 원리까지 이해하는 방향으로 계속 공부해볼 생각이다.