westagram login 만들기

June 7, 2023

프론트를 한달정도 공부하고 학원에 가려했는데
이번주에 시작한 반을 추천하셔서 바로 프론트엔드를 배우게되었다.
사전스터디도 못한 내가 쫒아갈수 있을지..모르겠지만 일단 해보자.

일단 과제로 인스타그램 페이지를 만들어오라고하셨다.~~(에? 3일남았는데요?)~~

만들어야할 결과물

만들어 보기

1. 틀 만들기

일단 로그인 페이지와 메인 페이지를 만들 파일들을 만들었다.
(기억나는게 ! tab누르면 html양식완성! 이거뿐인거 실환가..)

기억을 더듬고 더듬어 만든 html 뭘했냐면 야호를 출력했다.

흠..이제 뭘 해야하지..? 진짜 머리속이 텅텅 비어있다…

일단 틀부터 잡아보았다. (이게 틀? 이정도만 만들고 뿌듯해하는 나는 대체..?)

일단 태그를 검색해보고 만들었는데
어떤 태그를 어떤때 써야하는지 아직 잘 모르겠다..

2. css로 옷입히기

틀을짜고 CSS작업을 해봤다.

음..큰일이다
이제 자바스크립트를 사용해서 로그인이되게해야하는데
어떻게 불러와야하는지 모르겠다.

3. javascript로 기능 넣기

구글로 검색해서 글 좀 읽어보니까 조금씩 생각이났다.
이렇게 작성하는것을 바닐라자바스크립트라고 한다.
쌩자바스크립트라고 프론트분이 뭐라했던게 기억났는데
뭔가 쉬운듯 어려운 모르겠다.

//login.js
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const loginButton = document.querySelector("button");

emailInput.addEventListener("keyup", validate);
passwordInput.addEventListener("keyup", validate);

function validate() {
  if (emailInput.value && passwordInput.value) {
    loginButton.classList.add("onBtn");
  } else {
    loginButton.classList.remove("onBtn");
  }
}

loginButton.addEventListener("click", function (event) {
  event.preventDefault();

  const email = emailInput.value;
  const password = passwordInput.value;

  if (email === "" || password === "") {
    alert("email or password is empty");
  } else {
    window.location.href = "main.html";
  }
});

짜놓고 실행해보디 작동이 잘 되어야하는데
아니, 잘되는데 처음이 안된다.

문제1 : 페이지에 들어갔을때 활성화된 버튼

처음 페이지가 떴을때는 버튼이 비활성화 상태가 아니였다.
글자를 하나만 치면 바로 비활성화가 되는데 처음부터 아니니까 js에서 실수한줄알았다.
근데 js를 아무리 읽어봐도 문제점을 못찾겠다..
다른 해결책으로 button태그에 disabled기능이 있는걸 알았지만 지금하는 방법이 대체 왜 안되는지 너무 궁금해졌다.

<button>의 disabled
버튼 비/활성화에 가장 좋다고한다.
아예 접근을 막아 강력하고 내장기능이라 빠름

<!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>login</title>
    <link href="login.css" rel="stylesheet" />
  </head>
  <body>
    <div class="content-wrap">
      <h1>westagram</h1>
      <input
        type="text"
        id="email"
        placeholder=" 전화번호, 사용자 이름 또는 이메일"
        required
      /><br />
      <label for="password"></label>
      <input
        type="password"
        id="password"
        placeholder=" 비밀번호"
        required
      /><br /><br />

      /*여기가 문제의 부분이였다.
      <button class="onBtn">로그인<button>*/

      <button>로그인</button>
      <br />
      <a href="https://www.instagram.com/accounts/password/reset/"
        >비밀번호를 잊으셨나요?</a
      >
    </div>
    <script src="login.js"></script>
  </body>
</html>

button의 class에 onbtn을 써놓았고
css의 onbtn의 컬러가 디폴트로 설정되어 처음 들어갔을때 하늘색이 뜬것이였다.

버튼의 class 부분을 지워주니 잘 작동했다.

button {
  color: white;
  border-radius: 0.5rem;
  border-style: none;
  width: 20.5rem;
  height: 3.1rem;
  margin-bottom: 10rem;
  transition: all 0.5s;
}

.onBtn {
  background: rgb(30, 158, 209);
}

문제2: 정규표현식

추가구현 미션이 email에 @와 .을 사용해야지만 로그인할수있도록 이메일 유효성 검사하기와 8자리 이상의 숫자로만 이루어진 password를 만들기였다.

include와 정규표현식을 생각했고, 그동안 프로그래머스에서 정규표현식을 많이써서 당연히 금방 만들수있을줄 알았다.

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9]+@[a-z]+\.[a-z]+$/;
  return emailRegex.test(email);
}

function validatePassword(password) {
  return password.length >= 8 && /^\d+$/.test(password);
}

loginButton.addEventListener("click", function (event) {
  event.preventDefault();

  const email = emailInput.value;
  const password = passwordInput.value;

  if (!validateEmail(email)) {
    alert("Invalid email.");
  } else if (!validatePassword(password)) {
    alert("password is only number type and over 8 digits.");
  } else {
    window.location.href = "main.html";
  }

음…그냥 평소하던대로 이메일 검증코드로 했다..

🤔 생각

vanila 자바스크립트 공부하기(getElementBy와 querySelector 뭐가다른지)
input 태그의 고유한 문제점 찾아보기
Regex 공부하기

이제 2일 동안 main 페이지를 만들어야하는데 할 수 있을까

Twitter Facebook LinkedIn

Kimsu