[DevCourse] 생성형 AI 활용 백엔드 데브코스 16일차

오늘은 React나 jQuery 같은 라이브러리를 사용하지 않고,

Vanilla JS(기본 JavaScript)만으로 DOM을 조작하고 UI를 구현하는 실습을 중심으로 진행됐다.

기본기가 탄탄해야 어떤 도구를 쓰든 흔들리지 않는다는 말처럼, 이번 실습들은 단순하지만 꽤 의미 있는 시간이었다.

---

📌 오늘 배운 주요 개념 정리

• DOM 제어 기본 HTML 요소를 직접 조작하는 방식 익힘
• getElementById, addEventListener, textContent, classList 등을 활용해
• jQuery vs Vanilla JS 비교코드 길이의 차이와 명확성의 차이를 비교할 수 있었다
• 같은 동작을 두 방식으로 구현해 보며,
• fetch API로 JSON 불러오기
• .then()과 .catch()를 통해 데이터를 비동기적으로 받아오는 방식 익힘

---

🧪 실습 중심 흐름

오늘은 정말 다양한 미니 프로젝트들을 Vanilla JS로 직접 구현해 보면서

DOM 제어의 기본 흐름과 이벤트 처리 방식에 익숙해지는 시간을 가졌다.

 

✔ 이미지 카드 리스트

• JSON 파일에서 이미지 데이터를 불러와 카드 형태로 렌더링
• createElement, appendChild, innerHTML 활용

✔ 이미지 갤러리

• 배열로 관리되는 이미지 목록에서 버튼 클릭으로 순환 표시
• 상태 변수(current)를 활용해 현재 인덱스 추적

✔ To-Do 리스트

• 할 일 추가, 클릭 시 삭제되는 간단한 구조
• addEventListener와 이벤트 핸들링 패턴 복습

✔ 탭 UI / 모달 / 아코디언

• 클래스를 토글 하거나 스타일을 직접 조작하며
• 다양한 인터페이스를 구현

✔ 이벤트 위임 / 폼 유효성 검사

• 동적 요소에 이벤트 적용하기 위한 event.target 활용
• 입력 조건 검사를 통해 경고 메시지 출력

---

🧡 느낀 점

오늘 실습은 React 같은 프레임워크 없이, 오로지 순수 자바스크립트만으로 사용자 인터페이스를 구성한 하루였다.

처음엔 매번 document.querySelector()로 요소를 찾아 조작하는 게 번거롭다고 느껴졌지만, 조금씩 구조를 익혀가면서 반복되는 패턴 속에서 감을 잡을 수 있었다.

 

jQuery에 비해 코드가 길어지는 건 사실이지만, 어떻게 DOM이 구성되고 이벤트가 흐르는지에 대한 이해는 Vanilla JS를 써봐야 확실히 얻을 수 있는 것 같다.

 

특히 오늘 실습에서 재미있었던 부분은 모달, 탭, 이미지 갤러리 같은 UI들을 직접 설계해서 구현해 봤다는 점이다.

아주 복잡하진 않았지만, 내가 만든 코드로 인터페이스가 동작할 때마다 작은 성취감이 쌓였고, 웹 UI가 어떻게 작동하는지 근본적인 이해에 한 발 더 다가간 느낌이었다.