<LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리

728x90

SMALL

작성일: 2026.5.21

📌 오늘 학습한 주제

자바스크립트 코어 문법과 동적 DOM 렌더링 메커니즘

🏗️ HTML, Script, 변수의 유기적인 관계

웹 서비스를 만들 때 이 세 가지는 다음과 같이 역할을 나눠 가집니다

HTML (뼈대): 화면에 보일 정적인 텍스트나 버튼, 입력창을 배치한다
변수 (데이터): 사용자가 입력한 값이나 서버에서 받아온 데이터를 임시로 담아두는 그릇이다
Script (작업 지시서): HTML로 만든 버튼을 누르면, 변수에 담긴 데이터를 가지고 화면을 동적으로 바꾸는 '행동'을 지시한다

📍 1. Script(자바스크립트)의 핵심 역할

정적인 웹페이지를 동적으로 살아 움직이게 만드는 것이 스크립트의 본질이다
브라우저가 HTML 문서를 읽어 내려가다가 <script> 태그를 만나면 내부 코드를 실행하여, 화면의 글자를 바꾸거나, 클릭 이벤트를 감지하거나, 서버와 데이터를 주고받는 연산을 수행한다

📍 2. 자바스크립트 변수 (Variable) 핵심 요약

개념: 데이터를 담는 그릇
변수 선언 규칙:
영문 대소문자를 엄격하게 구별한다
특수문자는 오직 $와 _만 허용한다
숫자로 시작할 수 없다. (예: 1stName은 에러, name1은 가능)
타입의 특징: 코드 작성 시점에는 변수의 타입이 고정되어 존재하지 않는다. 코드가 실제로 실행되는 시점(Runtime)에 들어오는 데이터에 따라 변수의 타입이 정해지는 묵시적 변수 타입(동적 타이핑)을 가지고 있다

🔍 자바스크립트 데이터 타입 구조

기본 타입 (Primitive): 값 자체가 메모리에 저장되는 가벼운 데이터
숫자(Number), 문자/문자열(String), 논리(Boolean), null, undefined
참조 타입 (Reference): 데이터가 저장된 메모리 주소를 가리키는 복잡한 데이터
객체(Object), 함수(Function), 배열(Array) 등
제어/반복문 및 함수: 데이터를 조건에 따라 처리(if, switch)하거나 반복(for, while)하고, 이를 독립된 기능 단위를 가진 함수(function)로 묶어 관리한다. (현대 자바스크립트는 ES6 문법을 기준으로 발전하고 있다)

📍 3. 요소 노드 취득하기 (DOM 제어)

개념: 브라우저가 HTML 태그들을 자바스크립트가 인식할 수 있는 객체(DOM Node) 형태로 쪼개놓은 것을 가져오는 행위
가장 대표적인 메서드:
document.getElementById("아이디명"): HTML에 지정된 고유한 id 값을 가진 태그 하나를 정밀하게 타겟팅하여 취득
document.querySelector(".클래스명 또는 #아이디명"): CSS 선택자 문법을 그대로 사용하여 요소를 아주 유연하게 취득

💻 예시 코드

// 1. HTML 요소 노드 취득하기 (버튼과 입력창을 스크립트로 붙잡아옴)
const inputArea = document.getElementById("prd-name");

// 2. 변수 활용 (그릇에 취득한 노드의 실제 '데이터'를 담음)
let currentInputData = inputArea.value;

// 3. 스크립트의 역할 (데이터가 비어있으면 경고창을 띄우는 동적 제어 기능 실행)
if (currentInputData === "") {
    alert("상품명을 입력하셔야 예약이 진행됩니다!");
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 변수, 객체, 배열 종합 실습</title>
</head>
<body>
    <script>
        // ==========================================
        // 1. 변수 및 연산자 기본 실습
        // ==========================================
        let message = 10; 
        message = "jslim"; 

        console.log(">>>> debug message " , message);
        console.log(">>>> debug message type" , typeof message);

        message = 10; 
        console.log(">>>> debug message ==" , message == "10");  
        console.log(">>>> debug message ===" , message === "10"); 
        console.log(">>>> debug message " , message);

        const name = "jslim"; 

        // ==========================================
        // 2. 객체(Object) 실습
        // ==========================================
        let obj = {
            name  : "jslim",
            age   : 20,
            major : 'cs'
        };

        console.log(">>>> debug obj " , obj);
        console.log(">>>> debug obj type" , typeof obj);
        console.log(">>>> debug obj property" , obj.major);
        console.log(">>>> debug obj property" , obj['major']);

        // ==========================================
        // 3. 배열(Array) 및 ES6 템플릿 리터럴 실습
        // ==========================================
        let ary = [
            {name : 'inspire'}, // index 0
            {name : 'lgcns'},   // index 1
            {name : 'camp5th'}, // index 2
            {name : 'lgcns-final'} // [체크!] 이미지 속 ary[3]이 정상 작동하도록 4번째 객체(index 3) 추가
        ];

        console.log(">>>> debug ary " , ary);
        console.log(">>>> debug ary type" , typeof ary);

        // es6 : template string ` ${var} `
        // 백틱(`) 문자로 문자열을 감싸면 중간에 + 연산자 없이 ${}를 이용해 변수나 연산식을 직관적으로 주입할 수 있다.
        console.log(`>>>> debug ary index 3  ${ary[3].name}`);

        // ==========================================
        // 4. 함수(Function) 실습 구역
        // 
        // - 함수(function) vs 메서드(method) vs lambda expression(arrow function)
        // - ? 특정 기능을 수행하기 위한 코드 블록
        // ==========================================

        // [함수 호출] test()를 매개변수 없이 호출함
        // ※ 자바스크립트는 '함수 호이스팅'이 지원되므로 함수 선언문보다 위에서 호출해도 정상 작동함
        let result = test();

        // [함수 정의] 디폴트 파라미터(x = 20, y = 20) 적용
        // 외부에서 값을 던져주지 않으면 x와 y는 자동으로 20이라는 기본값을 가짐
        function test(x = 20 , y = 20 ) {
            return x + y ;
        }

        // [결과 출력] 백틱을 활용한 템플릿 리터럴 출력 -> 결과: result = 40
        console.log(`result = ${result}`);

        // 매개변수가 없는 기본적인 화살표 함수
        let arrowFunc = () => {
            console.log(`arrow function 호출됨!!!!`);
        };
        
        // 화살표 함수 호출
        arrowFunc(); 


        // 매개변수(a, b)를 받아 연산 후 값을 반환하는 람다식/화살표 함수
        const add = (a, b) => {
            return a + b ;
        };

        // 템플릿 리터럴안에서 add(1, 2)를 호출하여 결과(3)를 동적 주입 및 출력
        console.log(`lambda expression call ${add(1,2)}`);

    </script>
</body>
</html>

🏗️ 배열 순회

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 반복문 종합 실습</title>
</head>
<body>

    <h1>F12를 눌러 Console 창에서 다양한 반복문 출력 결과를 확인하세요.</h1>

    <script>
        /*
        배열 [ ] 객체가 소유하고 있는 함수(filter, map, etc.....)
        반복구문?
        - 특정 데이터를 반복할 때 사용하는 문법
        - forEach~, for ~ in, for ~ of
        */

        // 기본 배열 데이터 준비
        let ary = [10, 20, 30, 40, 50]; 

        // 1. 일반 for문
        console.log(`debug >>>> array loop`);
        for(let idx = 0 ; idx < ary.length ; idx++) {
            console.log(`idx = ${ary[idx]}`);
        }

        // 2. forEach 메서드
        console.log(`debug >>>> forEach loop`);
        ary.forEach((value, idx) => {
            console.log(`idx = ${idx} , value = ${value}`);
        });

        // 3. for...in 구문
        console.log(`debug >>>> for...in loop`);
        // for ~ in : index 를 순회하면서 반환해주는 구문
        for(let key in ary) {
            console.log(`idx = ${key} , value = ${ary[key]}`);
        }

        // 4. ES6 객체 리터럴 단축 문법 실습
        // es6 : Object literal(속성과 속성의 값이 동일할 때 축약하는 문법)
        let img = 'xxxxx.png';
        let heading = 'xxxxxx';

        let cardAry = [
            {
                img,
                heading
            },
            {
                img,
                heading
            }
        ];

    
        let divTag = ''; // 루프 바깥에 빈 문자열 상자 선언

        cardAry.forEach((obj) => {
            console.log(`img = ${obj.img} , heading = ${obj.heading}`);
            
            // 기존 상자에 첫 번째 태그 덩어리 누적
            divTag += `<div><img src='${obj.img}'>`;
            
            // 기존 상자에 두 번째 태그 덩어리 이어서 누적
            divTag += `<h2>${obj.heading}</h2></div>`;
        });

        // 루프 내에서 조립이 완전히 끝난 데이터를 콘솔에 디버깅 출력
        console.log(`debug >>> divTag : ${divTag}`);

        // 최종 조립된 뭉치를 화면에 딱 한 번 주입하여 덮어쓰기 없이 모든 카드 렌더링
        node.innerHTML = divTag;
    </script>
</body>
</html>

단순한 반복문 문법 공부에서 시작하여 객체 배열 데이터를 가공하고, 최종적으로 화면(DOM)에 웹 컴포넌트를 버그 없이 깨끗하게 밀어 넣어 동적 페이지를 만드는 '프론트엔드 데이터 흐름의 전체 메커니즘'을 다룬 종합 코드이다

🏗️ 이벤트 처리

1. 인라인 이벤트 바인딩 방식 (과거 방식)

HTML 태그 자체에 onClick 속성을 적고, 자바스크립트 함수 호출부(btnHandler())를 직접 연결하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 이벤트 실습</title>
</head>
<body>

    <button type="button" onClick="btnHandler()">click</button>

    <script>
        // 스크립트 단에서는 호출당할 함수만 정의해 둡니다
        const btnHandler = () => {
            window.alert(`인라인 방식 클릭 완료!`);
        }
    </script>
</body>
</html>

2. DOM 프로퍼티 이벤트 바인딩 방식 (현대적 표준 방식)

HTML은 오직 태그 배치와 id 부여만 담당하고, 자바스크립트 스크립트 영역에서 요소를 취득한 뒤 객체의 속성(onclick)에 함수를 대입하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 프로퍼티 이벤트 실습</title>
</head>
<body>

    <button type="button" id="btn">click</button>

    <script>
        // 1. HTML 요소를 id 선택자로 취득하여 객체로 가져옴
        let btn = document.querySelector('#btn'); 

        // 2. 버튼 객체의 고유 프로퍼티(.onclick)에 화살표 함수를 직접 대입하여 바인딩
        btn.onclick = () => {
            window.alert(`DOM 프로퍼티 방식 클릭 완료!`);
        };
    </script>
</body>
</html>

인라인 방식은 HTML과 자바스크립트가 한곳에 끈적하게 섞여 있어 규모가 커지면 유지보수하기 힘들어진다
DOM 프로퍼티 방식은 화면(HTML)과 기능(JS)을 깔끔하게 독립시켜 관리하므로 훨씬 현대적이고 정석적인 작성법

⭐️오늘의 회고

자바스크립트 코어 문법과 객체 배열 데이터를 유기적으로 가공하여 innerHTML 최적화 및 동적 렌더링을 구현해 보며 프론트엔드의 데이터 흐름 매커니즘을 제대로 마스터할 수 있어 유익했ㄷ다. 실습 과정에서 과거의 인라인 방식 예시와 현대식 프로퍼티 방식 코드가 꼬여 버그를 겪기도 했지만, 두 바인딩 규칙의 차이점과 관심사 분리의 필요성을 뼈저리게 깨달으며 클린 코드 작성 역량을 기를 수 있었다. 앞으로 어떤 복잡한 데이터 구조를 만나도 자유자재로 다룰 수 있도록 기본기를 탄탄히 다져야겠다는 생각이 들었다.

728x90

LIST

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

<LG CNS 5기> 6일차 TIL :React 컴포넌트 설계와 현대 자바스크립트(ES6+) 핵심 문법 (0)	2026.05.26
<LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await) (0)	2026.05.22
<LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query (0)	2026.05.20
[LG CNS AM 5기] 2일차 TIL : HTML5 핵심 구조 (0)	2026.05.19
[Day 1] LG CNS AM Inspire Camp 5기 TIL (0)	2026.05.18

codiary

<LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

티스토리툴바

<LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

관련글

티스토리툴바