나의 코드
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Hello Title</Title></title>
<link rel="stylesheet" href="style/login.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body >
<div class="container flex-center" >
<div class="login-container">
<div class="flex-center logo-wrapper">
<span class="logo-text">Justgram</span>
</div>
<div>
<div class="login-wrapper">
<input id="email-input-box" class="login-input" type="text" placeholder="전화번호, 사용자 이름 또는 이메일">
</div>
<div class="login-wrapper">
<input id="password-input-box" class="login-input" type="password" placeholder="비밀번호">
</div>
<div class="flex-center button-wrapper">
<button id="button-login" class="login-button" disabled>로그인</button>
</div>
</div>
<div class="flex-center extra-wrapper">
<a class="find-password">비밀번호를 잊으셨나요?</a>
</div>
</div>
</div>
</body>
<script src="js/login.js"></script>
</html>Css
body {
background-color: rgb(242, 239, 239);
}
.container {
height: 100%;
}
.login-container {
width: 500px;
border: 1px solid lightgray;
border-radius: 5px;
background-color: white;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.logo-wrapper {
padding: 30px;
}
.logo-text {
font-family: "Lobster", cursive;
font-size: 48px;
}
.login-wrapper {
background-color: rgb(244, 241, 241);
border: 1px solid lightgray;
border-radius: 3px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
font-size: 16px;
padding: 10px 10px;
}
.login-input {
background-color: rgb(244, 241, 241);
border: none;
width: 100%;
}
.login-input:focus {
outline: none;
}
.button-wrapper {
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
}
.login-button {
width: 100%;
color: rgb(255, 255, 255);
background-color: #8dbdfc;
border-radius: 5px;
border: none;
padding: 8px;
opacity: 1;
}
.login-button:disabled {
opacity: 0.5;
}
.extra-wrapper {
padding-top: 250px;
padding-bottom: 20px;
}
.find-password {
color: rgb(0, 63, 108);
}JavaScript
const emailForm = document.getElementById("email-input-box");
const passwordForm = document.getElementById("password-input-box");
const loginButton = document.getElementById("button-login");
emailForm.addEventListener("keyup", listener);
passwordForm.addEventListener("keyup", listener);
function listener() {
switch (!(emailForm.value && passwordForm.value)) {
case true:
loginButton.disabled = true;
break;
case false:
loginButton.disabled = false;
break;
}
}리뷰 코드
Css
body {
background-color: rgb(242, 239, 239);
}
.container {
height: 100%;
}
.login-container {
width: 500px;
border: 1px solid lightgray;
border-radius: 5px;
background-color: white;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.logo-wrapper {
padding: 30px;
}
.logo-text {
font-family: "Lobster", cursive;
font-size: 48px;
}
.login-wrapper {
background-color: rgb(244, 241, 241);
border: 1px solid lightgray;
border-radius: 3px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
font-size: 16px;
padding: 10px 10px;
}
.login-input {
background-color: rgb(244, 241, 241);
border: none;
width: 100%;
}
.login-input:focus {
outline: none;
}
.button-wrapper {
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
}
.login-button {
width: 100%;
color: rgb(255, 255, 255);
background-color: #8dbdfc;
border-radius: 5px;
border: none;
padding: 8px;
cursor: not-allowed;
}
.extra-wrapper {
padding-top: 250px;
padding-bottom: 20px;
}
.find-password {
color: rgb(0, 63, 108);
}JavaScript
const inputIDByID = document.getElementById("email-input-box");
const inputPWbyID = document.getElementById("password-input-box");
const loginButtonByID = document.getElementById("button-login");
function onInput(event) {
const id = inputIDByID.value;
const pw = inputPWbyID.value;
if (id.length > 1 && pw.length > 1) {
//버튼 활성화하는 로직
loginButtonByID.style.backgroundColor = "#398cf8";
loginButtonByID.style.cursor = "pointer";
} else {
//버튼 비활성화하는 로직
loginButtonByID.style.backgroundColor = "#8dbdfc";
loginButtonByID.style.cursor = "not-allowed";
}
}
inputIDByID.addEventListener("input", onInput);
inputPWbyID.addEventListener("input", onInput);
loginButtonByID.addEventListener("click", onInput);후기
솔직히 하드코딩을 하지는 못했다. 구글링을 해서 switch 문으로 작성한 로직이 가장 깔끔해 보여서 가져왔고 하나 하나 해석해서 내가 만든 것에 적용 될 수 있도록 수정했다.
로직을 이해하는데 있어서 어려웠던 점은
1) 왜 .value를 쓰는가?
2) 왜 ! 부정연산자를 쓰는가
3) 왜 !(emailForm.value && passwordForm.value) 이렇게 묶어야 하는가였다.
1) 왜 .value를 쓰는가?
value는 target 안의 속성, input에 입력된 값을 의미한다.
2) ! 부정연산자를 쓰는가
빈 값을 체크하기 위해서다
undefined, null , ''(공백문자), 0를 판별할 때
위와 같은 정의로
obj === undefined, obj === null, obj === "", obj === 0 보다 !obj로 작성하기.
3) 왜 !(emailForm.value && passwordForm.value) 이렇게 묶어야 하는가
두개가 모두 빈 값인지 확인해야하기 때문에 묶어줘야함
안 묶고 각각 !를 붙여주면 하나만 값이 들어가도 disabled가 false가 되기 때문
TIL
1. html에 자바스크립트 파일 불러오기
<script src="js/login.js"></script>
위치가 중요하다
프로그램은 위에서부터 순차적으로 진행된다.
컴퓨터가 먼저 html을 읽으면서(Passing) 어떤 id나 클래스를 줬는지 파악하고 나서 자바스크립트릴 실행시켜야하기 때문에 자바스크립트 파일은 body 밑에 있어야한다.
예외) defer 속성을 주면 위치가 바뀌어도 상관이 없다.
<script defer src="js/login.js"></script>2. call back 함수에 기명 함수 작성하는 이유
inputIDByID 와 inputPWByID에 똑같은 로직의 함수를 적용해야하기 때문에 기명함수를 하나 작성하고 재사용하는게 효율적이다.
addEventListener의 특징
콜백함수에 event 매개변수가 넘어감
function onInput(event) {}
inputIDByID.addEventListener("input", onInput);콘솔로 찍어보면 input 이벤트가 감지된게 보임
객체임 속성과 메서드로 이루어진 것들이 많이 나열되어있음
주로 많이 사용하는 속성은 target (해당 이벤트를 실행한 요소)
value는 target 안의 속성, input에 입력된 값
3. css cursor 속성
loginButtonByID.style.cursor = "pointer"
loginButtonByID.style.cursor = "not-allowed"DOM접근으로 요소 접근하고 css 조작
cursor에 적용되는 옵션에 따라 커서 모양이 변한다.
다양한 옵션이 있으니 css cursor 라고 구글에 검색해보자.
룰루랄라 개발일지🎶❤️🔥🧑💻❤️🔥🎵