일지이기 때문에 일기의 성격이 더 강합니다.
1월 13일은 사실 TIL 끝 부분에 있던 걸 배웠다. 이걸 1월 15일에 쓰는 이유는 TIL을 쓰고 탈진했고, 어제는 좀 쉬어서 그렇다. 즉, 오늘 3개의 일지를 쓰든 말든 써야하는 것. 아침에 이걸 쓰는 이유가 그 때문이다. DOM, 그리고 이벤트에 대해서 배우다가 쉬었다. 1월 14일은 이벤트를 이어서 하고, jQuery의 기본 문법을 배웠다. jQuery는 머리에 박히도록 익힌 거라 사실 쉬는 시간이나 다름 없다. 부족한 건 실무가 아니라 이론적인 문제였던지라… TIL은 뭘 적지? 정 안 되면 특별편만 적을 확률이 높다. jQuery는 이론적인 게 필요한 건 없어서.
다른 소리지만 TIL에서는 일지와 그다지 내용이 겹치지 않게 하려고 노력하는데, 톺아보다보면 일지의 내용을 쓰게 되는 경우가 많다. 일지의 분량을 줄이든가, TIL의 성격을 바꾸든가 해야겠다.
DOM- Document Object Model
DOM이란 객체 지향 모델로써 구조화된 문서를 표현하는 형식이라고 정의 되어 있는데, 객체 지향이라는 건 즉 Object를 지향한다는 의미이다. 뭐 이게 그렇게까지 설명할 일이냐만, JS가 워낙 유연한 언어라서 이런 것들이 세분화가 된다. 이 부분은 특별편 보충학습으로 쓰려고 남겨두고 있다. 이 DOM은 사실 JS의 대부분을 차지하고 있을 정도인데, 왜냐하면 HTML 문서를 사용하지 않으면 웹페이지를 만들었다고 하기 어렵기 때문이다. JS 단독으로 페이지가 돌아가기는 하지만, DOM은 철저히 문서-여기서는 HTML-을 조작하는 역할이다.
무엇보다 JS 라이브러리는 JS의 DOM 조작이 번거로워서 좀 더 간단한 언어로 바꾸기 위함이 많다. JS 라이브러리가 DOM을 선택, 조작, 생성하는 형태를 보면 그것이 이해가 된다. getElementById를 하나하나 써서 사용하는 건 번거롭다. 요즘이야 툴이 자동완성을 지원해주는 경우가 많지만, 그 옛날엔 그런 프로그램 따위는 없었다.
이론적인 이야기는 사실 TIL에서 다루어서, 의미가 크게 없다.
2026.01.13 - [TIL 기록용] - [Java 풀스택 개발자] JavaScript 완전 정복!
[Java 풀스택 개발자] JavaScript 완전 정복!
0. 들어가기에 앞서오늘부터는 프런트엔드의 꽃인 JavaScript 정리를 할 예정이다. 사실 강의는 이벤트 리스너에서 종료된 상태이지만, 충분히 일주일의 내용을 돌아볼 수 있다. 그리고 지난 주 HTMl
bbbbabbbababababa.tistory.com
사실 요즘 DOM 조작은 라이브러리로 해서, 표준언어(Vanilla JS)로 문법을 구태여 익힐 필요는 없을 수도 있다. 라이브러리 → 라이브러리 변환이나 라이브러리 → 표준 변화는 AI가 알아서 해주기 때문에. 그나마 전임자가 표준으로 짰을 경우밖에 없는데… … 생각만해도 무서운데? 일단 기본적인 DOM API Methods만 정리한다.
저번부터 표를 10개 이상 쓸 일이 생기는데 억지로 늘렸다.
| 메서드 | 설명 |
| createElement(태그명) | 요소 노드 생성 |
| createTextNode(text) | 텍스트 노드 생성 |
| appendChild(node) | 객체에 노드 연결 |
| setAttribute(name, value) | 객체 속성 설정 |
| getAttribute(name) | 객체의 속성 반환 |
| getElementById(id) | 태그의 id 속성이 id와 일치하는 문서 객체 반환 |
| getElementByName(name) | 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 반환 |
| getElementsByTagName(태그명) | 태그명과 일치하는 문서 객체를 배열로 반환 |
| removeChild(child) | 문서 객체의 자식 노드 제거 |
| querySelector(선택자) | 1개의 선택자 선택 동일한 요소가 여러 개인 경우 첫 번째 요소만 선택 |
| querySelectorAll(선택자) | 동일한 요소가 여러 개인 경우 모든 요소 선택 |
사실 배열로 반환한다고 되어있지만 굳이 따지면 컬렉션이다. 컬렉션과 배열의 차이까지 TIL에서 열심히 다뤘기 때문에 여기서는 생략한다.
사실 NodeList를 컬렉션으로 써서 forEach하는 건 꽤 많이 사용한다. 여기까지만 사용하면 굳이 배열화 할 필요 없기도 해서. 배열화는 안정성을 위해서 사용하는 경우가 많긴하다. 아니면 push 등으로 추가하고 싶거나. 근데 DOM을 추가하고 싶다면 굳이 그럴 필요는 없다. append든 next든 있으니까. 그렇기 때문에 안정성이나 컬렉션 그 자체를 배열로 다루고 싶을 때 쓰는 편이다.
Event
나는 이벤트 사용을 정말 좋아한다. 이벤트는 정리 관련해서 멋진 포스트가 있어서 그쪽 포스트를 가져온다.
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결
이벤트 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트의 종류 1) 마우스 이벤트 이벤트 설명 click 요소에 마우스
jenny-daru.tistory.com
이벤트는 그냥 고전적으로 많이 사용된다. 당장 마우스 오른쪽 클릭 중지도 이벤트 사용이기도 하다. 요즘은 CSS로 드래그 긁기도 방지하고는 한다. F12-Javascript사용 중지를 누르면 오른쪽 클릭이 잘 되는 이유가 이 때문이다.
오늘의 보충 - DOM level
DOM Level 이야기를 해볼까 한다. DOM Level은 W3C에서 발표한 표준화된 DOM의 버전을 나타낸다. W3C가 뭔데.. 하면 인터넷의 UN 같은 거다. 웹 표준을 재정하지 않으면 엉망진창일 테니까. 자주 신세졌던 W3school이 W3C에서 따온 이름이라고 한다(아무 관련은 없다고). 어쨌든 현재는 DOM Level 4이고, 대부분의 브라우저가 DOM Level 3(DOM3)을 지원하고 있다. 레벨에 따른 발전은 다음과 같다.
DOM0: 표준 이전의 것이다. window.location, onclick = 스크립트; 같은 것들은 이때 만들어졌다고 한다.
DOM1: Core, HTML 모듈을 정의했다.
DOM2: Core, HTML, Views, Events, Style 등 모듈을 정의했다. CSS와의 호환은 이때부터 유연해졌다.
DOM3: Core, Load and Save, Validation, Xpath, Events 모듈 정의했다.
DOM4: DOM3의 기능을 포함하고 발전시켜, 웹 플랫폼 전반의 DOM 기능을 하나의 일관된 인터페이스로 통합하고 현대화한 버전이다.
'부트캠프 일지 > Java 풀스택 과정 강의' 카테고리의 다른 글
| [Java 풀스택 과정 강의] 1월 15일차 (0) | 2026.01.15 |
|---|---|
| [Java 풀스택 과정 강의] 1월 14일차 (0) | 2026.01.15 |
| [Java 풀스택 과정 강의] 1월 12일차 (0) | 2026.01.13 |
| [Java 풀스택 과정 강의] 1월 9일차 (0) | 2026.01.11 |
| [Java 풀스택 과정 강의] 1월 8일차 (0) | 2026.01.10 |
