로그인 기능 구현하기 - 목표 설정 및 디자인

ChoiYongHyeun·2024년 1월 21일

JavaScript Toyproject

망가뜨린 장난감들

목록 보기

11/19

최근 토이프로젝트들을 하다가

이제는 실제 프로젝트에 들어가기 전 웹 사이트와 관련된 토이 프로젝트들을 연습해보기로 마음을 먹었다.

그! 래! 서!

이번에는 실제 기능을 하는 로그인 화면을 구현해보려고 한다.

목표 설정

나는 백엔드에 대한 지식이 매~우 부족하지만, 정말 다행히도 express 를 이용해 서버와 응답하는 강의 영상을 올려두신 분이 계시더라

[Node.js] 백엔드 맛보기 | 로그인 인증 기능 만들기 in 서버 | 유저 데이터 만들기

다만 세션을 관리하거나 토큰을 보내는 등의 기술은 너무나도 백엔드 단이기 때문에

백엔드와 연동되는 부분은 POST 를 이용해서 아이디와 비밀번호를 보내고 , 응답을 보내주는 정도로만 하기로 했다.

그리고 사실 아직 쿠키와 세션에 대한 부분을 제대로 이해하지 못한 부분도 있다.
흑 .. 로컬 스토리지 이런 거 하던데 .. 그 부분에 대한 공부를 하고 나서 한 번 더 해봐야겠다

프로젝트 구현 목표

작업	설명
HTML 폼 생성	사용자 입력을 수집하기 위한 HTML 폼을 생성합니다. 아이디와 비밀번호를 입력할 수 있는 필드가 포함됩니다.
JavaScript 입력 처리	자바스크립트 코드를 작성하여 사용자로부터 폼에서 입력한 값을 가져옵니다.
폼 유효성 검사	클라이언트 측에서 필수 입력 필드가 모두 채워졌는지와 입력 형식이 올바른지를 확인하는 폼 유효성 검사를 구현합니다.
서버로 POST 요청 전송	Fetch API나 다른 비동기 통신 방법을 사용하여 입력값을 서버로 전송합니다.
서버 응답 처리	서버로부터 받은 응답을 처리하고, 응답이 성공이면 다음 페이지로 이동하거나 작업을 수행합니다.
로그아웃 처리	로그아웃 버튼을 통해 로그아웃을 수행하고, 서버에 로그아웃 요청을 보냅니다.
로그인 상태 유지	저장된 인증 토큰을 사용하여 로그인 상태를 유지하고, 페이지 이동 및 브라우저 종료 시에도 유지됩니다.
에러 처리 및 메시지 표시	서버로부터 받은 에러를 처리하고, 사용자에게 메시지를 표시하여 문제를 안내합니다.
보안 강화	HTTPS를 사용하여 통신을 암호화하고, 사용자 입력값을 안전하게 처리하며, 보안적인 조치를 취합니다.

갸아아악 가보자고

우선 HTML 을 이용해서 로그인 페이지와, 로그인 상태 페이지를 만들어야겠다.

`HTML / CSS`

또 어떤 디자인을 야무지게 할까 생각하다가

지금 디자인 이쁘게 꾸밀 때가 아닌 것 같아서 여러 레퍼런스를 찾아 돌아다녔다.

그러다가 그냥 가장 베이직한 로그인 인터페이스를 찾아서 살펴본 후 만들었다.

참고 깃허브 : https://github.com/nauvalazhar/bootstrap-4-login-page/tree/master

해당 인터페이스에다가 https://www.youtube.com/watch?v=hlwlM4a5rxg 를 참고하여 배경이미지를 이쁜 것으로 만들어주고 container 의 background , backdrop-filter 를 만져주었더니 퀄리티가 매우 올라갔다 !

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="icon">🔥</div>
    <div class="container">
      <h1 class="header">Login</h1>
      <form action="" class="login-form">
        <div class="form-group">
          <label for="email">E-Mail Address</label>
          <input id="email" name="email" type="email" />
        </div>
        <div class="form-group">
          <label for="password"
            >Password
            <a href="">Forgot Password?</a>
          </label>
          <input id="password" name="password" type="password" />
        </div>
        <div class="custom-checkbox">
          <input type="checkbox" name="remember" id="remember" />
          <label for="remember">Remember me</label>
        </div>
      </form>
      <button class="login-button">Login</button>
      <div class="footer-text">
        Don't have an account? <a href="">Create One</a>
      </div>
    </div>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&family=Noto+Sans+KR&display=swap');

* {
  font-family: 'Noto Sans KR', sans-serif;
}
body {
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(background.jpg);
  background-size: cover;
  background-position: center;
}

div {
  box-sizing: border-box;
}

.container {
  width: 30vw;
  margin: 0 auto;
  padding: 5vw 5vh;
  background-color: transparent;
  box-shadow: 0px 0px 5px 5px rgba(225, 225, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  color: white;
  position: relative;
  font-weight: 900;
}

.login-form {
  width: 100%;
  margin-bottom: 5%;
}

label {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

a {
  color: skyblue;
  text-decoration: none;
}

#email,
#password {
  width: 100%;
  height: 40px;
  margin: 3% 0;
}

#remember {
  margin-right: 1%;
}

.custom-checkbox {
  display: flex;
}

.login-button {
  background-color: skyblue;
  border: none;
  color: white;
  font-size: 24px;
  width: 100%;
  height: 80px;
}

.footer-text {
  padding: 30px;
  text-align: center;
}

@media screen and (max-width: 425px) {
  .container {
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-self: center;
    position: relative;
    padding-top: 40%;
    margin: 0px;
  }
}

이번에는 저번처럼 px 단위를 써서 정적이지 않도록 하려고 vw , vh , % 를 이용해서 스타일링 해봤다.

그리고 처음으로 MDN 에서 슥 보고 미디어 쿼리도 써봤는데 좋은 것 같다.

나름 모바일 환경에서의 로그인 창처럼 샥샥 만들기도 편하더라

디자인은 이렇게 끝 ~!

만들면서 배운 것들

`input` 과 `label` 의 관계 , `input` 의 어트리뷰트들

          <label for="email">E-Mail Address</label>
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="off"
            required
          />