[Project] Webucks Clone Coding #5 [커피 상세 페이지 기능 구현]
📍 What About?
💡 그동안 배운 `HTML`과 `CSS`, 그리고 `JavaScript`를 활용한 위코드 첫 프로젝트가 주어졌다.
프론트엔드 역량을 다지기 위해 스타벅스 페이지를 클론하면서 `HTML`과 `CSS`의 개념을 웹 페이지 개발에 적용하고, JavaScript` 기능을 구현하는 것을 목표로 하며, 별개의 학습 목표도 주어졌다.
⚡️ 학습 목표
HTML
태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.
CSS
기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다.
- 개발자 도구를 활용하여 실제 페이지 레이아웃의 구성과 적용된 스타일을 확인할 수 있고 필요한 정보를 얻을 수있다.
- 로그인 기능을 구현하며
input
태그 활용법에 대해 익힌다.
- 과제에서
JavaScript
로 여러 기능을 구현하여 DOM
의 요소를 조작할 수 있다.
- 기본적인
git flow
를 이해하고 PR을 작성하여 github
을 통한 코드 리뷰 방식을 이해한다.
🌈 My Thoughts
HTML
태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.CSS
기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다.- 개발자 도구를 활용하여 실제 페이지 레이아웃의 구성과 적용된 스타일을 확인할 수 있고 필요한 정보를 얻을 수있다.
- 로그인 기능을 구현하며
input
태그 활용법에 대해 익힌다. - 과제에서
JavaScript
로 여러 기능을 구현하여DOM
의 요소를 조작할 수 있다. - 기본적인
git flow
를 이해하고 PR을 작성하여github
을 통한 코드 리뷰 방식을 이해한다.
🌈 My Thoughts
그 동안 배운 HTML
, CSS
의 학습내용을 모두 이용해서 Starbucks 홈페이지와 유사한 웹페이지를 만들고, JavaScript
을 구현하여 기능들을 구현하는 프로젝트였으며, 드디어 공부한 내용을 활용하여 프로젝트를 할 수 있다는 생각에 신나기까지 했다. 프론트엔드에서 HTML
,CSS
,JavaScript
는 초반부이며 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.
📲 로그인 페이지 기능 구현
이전에 구현한 로그인 페이지 레이아웃에 JavaScript를 활용하여 위와 같은 기능을 구현하는 단계이다. input의 border 관련 이벤트를 추가해주고, 로그인과 비밀번호 입력 단계에서 조건이 맞춰줬을 때 로그인 버튼을 활성화 시키는 작업을 진행하였다. 이메일과 패스워드의 조건은 정규 표현식을 사용하여 조건이 부합할 때에만 로그인 버튼이 활성화되게 해주었다.
🐳 My Code
<HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webucks</title>
<link href="styles/login.css" rel="stylesheet" type="text/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=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>WeBucks</h1>
<div class="input">
<input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="userid">
</div>
<div class="input">
<input type="password" placeholder="비밀번호" class="pw">
<button class="show">show</button>
<button class="hide">show&hide</button>
</div>
<div class="btn">
<button class="but" disabled>로그인</button>
</div>
<div class="forget">
<a href="">비밀번호를 잊으셨나요?</a>
</div>
</section>
</body>
<script src="js/login.js">
</script>
</html>
<CSS>
*{
box-sizing: border-box;
}
h1{
display:flex;
justify-content:center;
margin-top :10%;
font-style: Regular 400;
font-family: 'Dancing Script', cursive;
font-size : 100px;
font-weight :bold;
margin-bottom:20px;
}
.input{
display :flex;
justify-content: center;
position : relative;
}
input{
margin-top:15px;
padding: 12px 10px;
border-radius :5px ;
border : 1px solid lightgray;
width:32%;
background-color:#F7F7F7;
color:gray;
}
.btn{
display : flex;
justify-content: center;
margin-top:20px;
}
.but{
height:45px;
width:32%;
border-radius:10px;
border:none;
color:white;
background-color:#ADD3EB;
font-size :17px;
}
.but:enabled{
background-color: blue;
cursor : pointer;
}
.forget {
display : flex;
justify-content: center;
margin-top:170px;
color : #62b6ea;
font-weight:bold;
}
a{
color: blue;
text-decoration: none;
}
input:focus{
outline : none;
} /* 포커스 시 아웃라인 없애줌 */
.show{
position : absolute;
right : 37%;
top : 25px;
font-size : 11px;
margin-right : 1px;
padding : 1;
}
.hide {
position : absolute;
right : 34%;
top : 25px;
font-size : 11px;
padding : 1;
margin-right : 5px;
}
<JavaScript>
const emailForm = document.querySelector('.userid'); // 이메일 입력창
const passwordForm = document.querySelector('.pw'); // 패스워드 입력창
const loginButton = document.querySelector('button'); // 로그인 버튼
var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; // 이메일 조건식
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //패스워드 조건식
emailForm.addEventListener('keyup', () => { // 이메일 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
passwordForm.addEventListener('keyup', () => { //패스워드 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
let showandhide = document.getElementsByClassName("hide")[0]; // show&hide button
showandhide.disabled = false; //버튼 항상 활성화
showandhide.addEventListener("click", () => {
if (passwordForm.type === "text") {
passwordForm.type = "password";
return;
}
else if (passwordForm.type === "password") {
passwordForm.type = "text";
return;
}
});
/* 버튼이 입력될 때 password type이면 text, text type이면 password type으로 속성을 변경해주고,
visualiity를 조건마다 변경시켜준다. */
📲 구현 화면
"초기 화면"
<HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webucks</title>
<link href="styles/login.css" rel="stylesheet" type="text/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=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>WeBucks</h1>
<div class="input">
<input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="userid">
</div>
<div class="input">
<input type="password" placeholder="비밀번호" class="pw">
<button class="show">show</button>
<button class="hide">show&hide</button>
</div>
<div class="btn">
<button class="but" disabled>로그인</button>
</div>
<div class="forget">
<a href="">비밀번호를 잊으셨나요?</a>
</div>
</section>
</body>
<script src="js/login.js">
</script>
</html>
<CSS>
*{
box-sizing: border-box;
}
h1{
display:flex;
justify-content:center;
margin-top :10%;
font-style: Regular 400;
font-family: 'Dancing Script', cursive;
font-size : 100px;
font-weight :bold;
margin-bottom:20px;
}
.input{
display :flex;
justify-content: center;
position : relative;
}
input{
margin-top:15px;
padding: 12px 10px;
border-radius :5px ;
border : 1px solid lightgray;
width:32%;
background-color:#F7F7F7;
color:gray;
}
.btn{
display : flex;
justify-content: center;
margin-top:20px;
}
.but{
height:45px;
width:32%;
border-radius:10px;
border:none;
color:white;
background-color:#ADD3EB;
font-size :17px;
}
.but:enabled{
background-color: blue;
cursor : pointer;
}
.forget {
display : flex;
justify-content: center;
margin-top:170px;
color : #62b6ea;
font-weight:bold;
}
a{
color: blue;
text-decoration: none;
}
input:focus{
outline : none;
} /* 포커스 시 아웃라인 없애줌 */
.show{
position : absolute;
right : 37%;
top : 25px;
font-size : 11px;
margin-right : 1px;
padding : 1;
}
.hide {
position : absolute;
right : 34%;
top : 25px;
font-size : 11px;
padding : 1;
margin-right : 5px;
}
<JavaScript>
const emailForm = document.querySelector('.userid'); // 이메일 입력창
const passwordForm = document.querySelector('.pw'); // 패스워드 입력창
const loginButton = document.querySelector('button'); // 로그인 버튼
var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; // 이메일 조건식
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //패스워드 조건식
emailForm.addEventListener('keyup', () => { // 이메일 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
passwordForm.addEventListener('keyup', () => { //패스워드 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
let showandhide = document.getElementsByClassName("hide")[0]; // show&hide button
showandhide.disabled = false; //버튼 항상 활성화
showandhide.addEventListener("click", () => {
if (passwordForm.type === "text") {
passwordForm.type = "password";
return;
}
else if (passwordForm.type === "password") {
passwordForm.type = "text";
return;
}
});
/* 버튼이 입력될 때 password type이면 text, text type이면 password type으로 속성을 변경해주고,
visualiity를 조건마다 변경시켜준다. */
"입력 화면"
"show&hide 구현 화면"
⛳️ 회고
JavaScript
를 활용하여 만들어둔 로그인 페이지에 생동감을 불어주는 작업을 수행하였다. 우선, 로그인 버튼은 초기부터 비활성화로 설정해준 후, 이메일과 패스워드가 조건에 부합할 경우에만, 로그인 버튼이 활성화되도록 설정해주었다. 이메일은 이메일 형식, 패스워드는 "영소문자, 영대문자, 숫자, 특수문자 포함 8자리 이상" 일 경우에 각각 입력창의 테두리를 초록색으로 변경해주고, 입력창이 모두 초록색이 되었을 때, 버튼이 활성화되도록 JavaScript
코드를 설정해주었다. 생소했던 정규표현식을 학습하여 이메일과 패스워드의 조건과 이벤트핸들러를 구현할 수 있었고, 로그인 버튼의 활성화는 원래 학습했던 JavaScript를 통해 쉽게 구현할 수 있었다.
Author And Source
이 문제에 관하여([Project] Webucks Clone Coding #5 [커피 상세 페이지 기능 구현]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peaceminusone/Wecode-Fulsstack-2주차-회고저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)