# TIL - 2026.07.30

📌 오늘 학습한 주제

• JavaScript 조건문 (if-else, switch-case, 삼항 연산자)
• JavaScript DOM 조작을 통한 폼 유효성 검사 (Form Validation) 및 에러 메시지 제어
• JavaScript 이벤트 처리 방식 (inline, onclick 프로퍼티, addEventListener)

---

💡 오늘 배운 것 — 나만의 언어로

① 오늘의 목표

• JavaScript의 조건문 문법을 익히고, 사용자의 입력값에 따라 동적으로 반응하는 웹 페이지 유효성 검사 및 이벤트 제어 구현하기

② 학습할 내용

• 조건문 (Condition): if-else문, switch-case문, 삼항 연산자(condition ? true : false)를 사용하는 구문 구조를 배우고, 사용자 입력값(이메일, 비밀번호) 유무에 따라 서로 다른 로직을 처리하는 흐름을 학습했다.
• 폼 유효성 검사 및 페이지 이동: 로그인 버튼 클릭 시 입력 창의 이메일과 비밀번호 값을 가져와서 빈 값('')일 경우 에러 메시지 요소(display: block)를 띄우고, 정상 입력 시 결과 페이지(thank.html)로 이동하는 로직을 구현했다.
• 이벤트 리스너 (Event Handling): HTML 태그 내 직접 작성하는 인라인 이벤트(onclick), DOM 객체의 onclick 프로퍼티 지정, 그리고 addEventListener('click', ...)를 사용하는 다양한 이벤트 바인딩 방식을 익혔다.

---

💻 오늘 핵심 코드 1 — 폼 유효성 검사 및 에러 메시지 제어 (scriptCondition.html)

<div class="container">
    <div class="mb-3 mt-3">
        <label for="email" class="form-label">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" />
    </div>
    <div class="mb-3">
        <label for="pwd" class="form-label">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" />
    </div>

    <!-- 유효성 검사 실패 시 보여줄 에러 메시지 -->
    <div id="err_empty_email_pwd" style="display: none; color: red">
        <div class="err_msg">이메일 또는 패스워드를 입력해 주세요!!</div>
    </div>

    <div class="form-check mb-3">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="remember" /> Remember me
        </label>
    </div>
    <button type="button" class="btn btn-primary" id="signInBtn">Submit</button>
</div>

<script>
    document.querySelector("#signInBtn").onclick = () => {
        let email = document.querySelector("#email").value;
        let passwd = document.querySelector("#pwd").value;

        // 이메일이나 비밀번호가 빈 값일 경우 에러 메시지 표시
        if (email === '' || passwd === '') {
            document.querySelector("#err_empty_email_pwd").style.display = 'block';
        } else {
            document.querySelector("#err_empty_email_pwd").style.display = 'none';
            // 입력 성공 시 파라미터 전달과 함께 페이지 이동
            location.href = `thank.html?email=${email}&passwd=${passwd}`;
        }
    };
</script>

✨ 이해한 점

• document.querySelector("#email").value로 사용자가 <input> 요소에 입력한 실시간 값을 읽어올 수 있다.
• style.display 속성을 'none'과 'block'으로 전환하여 에러 메시지를 동적으로 띄우고 숨기는 사용성을 익혔다.

---

💻 오늘 핵심 코드 2 — 다양한 JavaScript 이벤트 처리 방식 (scriptEvent.html)

<div class="container">
    <button type="button" class="btn btn-primary" onclick="signInHandler(event)">signIn</button>
</div>

<script>
    // 1. Inline 방식 이벤트 함수
    const signInHandler = (event) => {
        window.alert('signIn button click');
        console.log(`debug >>>> event target: ${event.target}`);
    };

    // 2. addEventListener 방식
    document.querySelector("#handler").addEventListener('click', (event) => {
        window.alert('handler button click');
    });
</script>

✨ 이해한 점

• addEventListener('click', callback) 방식을 사용하면 HTML과 JavaScript 코드를 깔끔하게 분리할 수 있으며, 하나의 요소에 여러 개의 이벤트를 독립적으로 등록할 수 있다.
• event.target을 활용해 클릭된 요소 객체 자체에 접근하고 제어할 수 있다.

---

🛠️ 실습 / 결과물 & 참고 자료

③ 실습 / 결과물

• 강의 실습코드: Bootstrap 5 폼 레이아웃에 JavaScript 유효성 검사 로직을 결합하여, 이메일/비밀번호 미입력 시 경고 문구를 출력하고 정상 입력 시 thank.html 페이지로 이동하는 실습 진행.

④ 참고 자료

• w3schools: W3Schools JavaScript JS Forms / EventListener 예제 참고

---

🔍 문제와 해결

• 막힌 부분: 자바스크립트 내에서 style.display = block처럼 문자열이 아닌 예약어로 지정하거나 오타가 발생해 에러 화면 제어가 안 되던 부분 점검.
• 해결 방법: 따옴표로 감싼 문자열 속성값(style.display = 'block')으로 바르게 지정하고, 화살표 함수 내 템플릿 리터럴(백틱 `) 문법 오타를 수정함.

---

🎯 다음에 할 일

• 오늘 작성한 JavaScript 이벤트 핸들링 방식 복습하기
• 정규표현식(Regex)을 이용해 이메일 형식 유효성 검사 로직 추가해보기