🙋 인스타그램 로그인 페이지를 클론 코딩하는 과제를 스스로 리뷰하고 앞으로 개선해야 할 부분들을 검토하여 기록하자.
🐷 글을 읽으시는 분들께
안녕하세요, 태현입니다.
위코드에서 인스타그램 클론 코딩이 시작되었어요.
저는 자바스크립트를 좀 더 깊이감 있게 공부하고 싶어서 시간을 더 들였습니다. 동기분들과 하루 정도 진도의 차이가 있지만 괜찮습니다. 그리고 위코드 생활에 만족감을 느끼고 있어요.
인스타그램 클론 코딩은 개인 작업이었지만 서로 시간을 내서 소통하고 도움이 되었다는 점이 너무나 좋았습니다. 협업의 중요성을 느끼는 한 주가 되었고 보람차게 하루를 보내고 있어요. 하지만 시야를 넓히는 연습을 항상 해야할 것 같습니다. 많이 부족하네요.
저는 이 페이지를 보는 모든 분들께 제 코드에 대한 조언을 구하고자 합니다. 만든 게 없어서 도움 주실 것 없으시겠지만 이 계기로 천천히 단계별로 나아갈 생각입니다.
✔️ 목표
- Semantic tag의 적절한 사용
- id, class 이름, 변수명, 함수명
- 하나의 요소에 여러가지 CSS 속성을 부여하는 경우 규칙성(convention) 갖추기
- 불필요한 엔터 삭제, 필요한 엔터 추가, 테스트 마친 console.log 삭제하기(또는 주석처리)
- 개발자 도구의 활용하기
⏳ 개인적인 생각
첫번째 과제는 크게 어렵지 않았습니다. 단순히 마크업과 스타일링, 그리고 간단한 구현사항을 적용하는 것이라 힘들지 않았지만 앞으로 개선 시켜야 할 부분들은 분명히 있다고 느꼈습니다. 중요한 것들을 몇 개 놓쳤지만 머릿속에 정리가 되었고 정리를 해야겠다는 생각이 든 과제였습니다. 점점 이쪽 세계를 알 것 같은 느낌이 들었습니다.
🎯 개선방향
- 깃 커밋 메세지와 관련된 컨벤션 자료를 공부하고 적용할 것
- CSS 스타일링 순서와 관련된 컨벤션 자료를 찾아보고 적용할 것
- 선택자 이름을 생각하기 전에 레이아웃을 더 많이 신경 쓸 것
- 재사용 가능한 컴포넌트 단위가 어디 없을지 항상 생각할 것
- 더 큰 규모의 페이지를 만들어서 다른분들이 하시는 테스팅이라는 것을 해 보고 싶다는 생각
🙂 작성된 코드
<!DOCTYPE html>
<html lang="kr-ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 • Instagram</title>
<link rel="stylesheet" href="login.css" />
<link rel="shortcut icon" href="favicon.png" />
<script src="https://kit.fontawesome.com/69b295837d.js" crossorigin="anonymous"></script>
<script src="login.js" defer></script>
</head>
<body>
<!-- Login Form -->
<section id="loginForm">
<div class="loginForm__container">
<h1 class="loginForm__logo">Westagram</h1>
<div class="loginForm__input">
<input class="input-id" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
<input class="input-pw" type="password" placeholder="비밀번호" />
</div>
<button class="loginForm__btn">로그인</button>
<div class="loginForm__divide">
<div class="loginForm__divide__line"></div>
<h6 class="loginForm__divide__text">또는</h6>
<div class="loginForm__divide__line"></div>
</div>
<a class="loginForm__facebook" href="#">
<i class="loginForm__facebook__icon fab fa-facebook-square"></i>
<h5 class="loginForm__facebook__text">Facebook으로 로그인</h5>
</a>
<a class="loginForm__forget" href="#"
><span class="loginForm__forget__text">비밀번호를 잊으셨나요?</span></a
>
</div>
</section>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
/* Variable(global) */
:root {
/* Color */
--color-white-grey: #fafafa;
--color-grey: #dbdbdb;
--color-dark-grey: #8e8e8e;
--color-white: #ffffff;
--color-white-blue: #c0dffd;
--color-blue: #0095f6;
--color-dark-blue: #385185;
/* Font size */
--font-size-medium: ;
--font-size-small: ;
--font-size-micro: ;
}
/* Universal tags */
* {
box-sizing: border-box;
margin: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: var(--color-white-grey);
}
img {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
cursor: pointer;
}
input {
width: 100%;
padding: 10px;
outline: none;
border: 1px solid var(--color-grey);
border-radius: 4px;
background-color: var(--color-white-grey);
margin-bottom: 6px;
}
input::placeholder {
font-size: 12px;
}
/* Typography */
h1 {
font-family: "Loved by the King", cursive;
}
/* Login form */
#loginForm {
width: 348px;
height: 380px;
padding: 10px 40px 0px 40px;
border: 1px solid var(--color-grey);
position: relative;
top: 33px;
background-color: var(--color-white);
}
.loginForm__container {
display: flex;
flex-direction: column;
}
.loginForm__logo {
text-align: center;
margin: 20px 0px 30px 0px;
font-size: 40px;
}
.loginForm__btn {
outline: none;
background-color: var(--color-white-blue);
color: var(--color-white);
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 6px 0px;
margin-top: 10px;
}
.loginForm__divide {
display: flex;
justify-content: center;
align-items: center;
}
.loginForm__divide__line {
width: 100px;
border-bottom: 1px solid var(--color-grey);
}
.loginForm__divide__text {
font-size: 13px;
font-weight: 500;
color: var(--color-dark-grey);
margin: 15px 18px;
}
.change-btn {
background-color: var(--color-blue);
}
.loginForm__forget {
display: flex;
justify-content: center;
}
.loginForm__forget__text {
color: var(--color-dark-blue);
font-size: 11px;
position: absolute;
bottom: 15px;
}
.loginForm__facebook {
display: flex;
justify-content: center;
color: var(--color-dark-blue);
margin-top: 15px;
}
.loginForm__facebook__icon {
font-size: 18px;
margin-right: 8px;
}
.loginForm__facebook__text {
font-size: 14px;
font-weight: 700;
}const inputId = document.querySelector('.input-id');
const inputPw = document.querySelector('.input-pw');
const loginBtn = document.querySelector('.loginForm__btn');
const changeBtnColor = () => {
const inputIdLength = inputId.value.length;
const inputPwLength = inputPw.value.length;
(inputIdLength > 0 && inputPwLength > 5 ? loginBtn.classList.add('change-btn') : loginBtn.classList.remove('change-btn'))
}
inputId.addEventListener('input', changeBtnColor);
inputPw.addEventListener('input', changeBtnColor);
안녕하세요, 지식을 공유하는 공간입니다.