"use strict";
const id = document.querySelector("#id"),
pw = document.querySelector("#pw"),
loginBtn = document.querySelector("button");
loginBtn.addEventListener("click", login);
function login() {
const req = {
id: id.value,
pw: pw.value,
};
console.log(req);
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="/js/home/login.js"></script>
<title>Document</title>
</head>
<body>
<input id="id" type="text" placeholder="아이디" /><br />
<input id="pw" type="text" placeholder="비밀번호" /><br />
<button>로그인</button>
</body>
</html>
script 태그 수행 속성 정리
해당없음: HTML 문서를 읽다가(파싱) <script> 태그를 만나면 JS 파일을 패칭(fetch) 후 실행하고, 이것이 끝나면 HTML을 마저 읽는다.
defer: HTML 문서 파싱과 JS 파일 패칭을 병렬로 수행하고, HTML을 끝까지 읽은 후에 JS를 실행한다. JS 실행 순간에는 HTML 파싱을 일시중단한다.
async: HTML 문서 파싱과 JS 파일 패칭을 병렬로 수행하고, HTML 파싱 완료 여부와 관계없이 JS를 실행한다.
버튼 클릭 시 객체가 콘솔에 잘 출력되는지 확인한다.