DOM & CRUD (TIL 22일차)

"모두에게 똑같이, 각각마다 다르게"

DOM (Document Object Model) 은 프로그래밍 언어 등을 활용해 HTML 의 요소들을 다룰 수 있게 해줍니다. 이 때 가장 기본이 되는 것이 CRUD, Create, Read, Update, Delete 입니다.

영어 단어에서도 드러나듯 CRUD 는 생성하고, 읽고, 갱신하고, 삭제하는 일련의 처리를 묶어서 이르는 말입니다. 대부분의 소프트웨어가 이런 과정을 거치다보니 위키백과에도 따로 용어로 등재되어 있죠.

자바스크립트를 이용해 DOM 을 조작할 때는, CRUD 에 더해서 하나가 추가됩니다. Create 과정에서 만든 element 를 기존의 트리 구조에 연결하는 Append 과정입니다. createElement 로 생성해낸 엘리먼트는 append 를 활용해 기존의 구조에 연결해야 비로소 제 위치를 찾게 되는 것이죠.

• createElement 를 이용해 엘리먼트를 생성하고,
• append 를 이용해 기존의 구조에 연결하고,
• querySelector 를 이용해 읽어와,
• textContent, classList.add 를 이용해 수정하고,
• remove 를 이용해 제거한다.

위와 같은 일련의 과정이 DOM 을 활용한 CRUD 라고 할 수 있습니다. 이는 웹페이지를 단순히 정해진 것을 보여주기만 하는 정적인 웹페이지가 아닌, 상황에 따라 상호작용하는 동적인 웹페이지로 바꿔주죠. 오늘날 대부분의 웹페이지는 동적 웹페이지입니다.

자료를 찾다보니 최근의 선호도는 직접 돔을 조작하는 방향보다는 가상 돔 기반의 라이브러리 쪽으로 기울었다는 내용을 보기도 했습니다. 하지만 여전히 중요한 기본기라고 할 수 있는 만큼 이 내용을 잘 숙지해야 할 필요성을 느낍니다.