1022 SeSAC(새싹) 3기 35일차

육은별·2021년 10월 24일
0

SeSAC(새싹)

목록 보기
28/31
post-thumbnail
내일까지 nodejs로

1. 회원가입
2. 아이디 찾기
3. 비번변경
4. 회원탈퇴

만드는 것이 미션입니다. 내일은 충분한 실습 시간 드리려 노력할게요!

http://27.96.135.73:9999/login

실습

#mysql_test.js

var express = require('express');
var app = express();
var mysql = require( 'mysql' );
const port = 9999;
// session 불러오기
var session = require( 'express-session' );
// cookie 불러오기
var cookie = require( 'cookie-parser' );

// session 사용 옵션들
app.use( session({
   secret: 'ssac', // 필수항목 으로 cookie-parser의 비밀 키와 같은 역할을 한다.
   resave: false, // 요청이 왔을 때 세션에 수정사항이 생기지 않더라도 세션을 다시 저장할지에 대한 설정
   saveUninitialized: true // 세션에 저장할 내역이 없더라도 세션을 저장할지 대한 설정
}));
app.use( cookie() );

app.set("view engine", "ejs");

var conn = mysql.createConnection({
   user: 'root',
   password: 'qa2213886*',
   database: 'ssac'
});

const body = require('body-parser');
app.use(body.urlencoded({extended:false}));
app.use(body.json());

app.post('/delete', (req,res) => {
   var sql = "DELETE FROM user WHERE password = '" + req.body.check_pwd + "';";
   conn.query(sql,function(err){
      if(err){
         console.log(err);
         res.redirect('/main');
      }else{
         res.send("<script>alert('계정이 삭제되었습니다..');location.href='http://27.96.135.73:9999/login';</script>");
      }
   });
});

app.get('/login', (req,res) => {
    res.render('login');
});

app.get('/main', (req,res) => {
   res.render('main');
});

app.post('/main', (req,res) => {
   console.log(req.body);

   var sql = "SELECT * FROM user WHERE id = '" + req.body.userid +"' AND password = '" + req.body.password + "';";
   conn.query(sql,function(err, results){
      if(results.length > 0 ){
         req.session.uid = results[0].id;
         req.session.save(function(err){
            res.render('main');
         });
      }else{
         console.log(err);
         res.redirect('/login');
      }
   });
});

app.get('/findID', (req,res) => {
    res.render('findID');
});

app.post('/findID', (req,res) => {
   var sql = "SELECT id FROM user WHERE name = '" + req.body.username +"' AND password = '" + req.body.password + "';";
   conn.query(sql,function(err,results){
      if(results.length > 0 ){
         res.send("<script>alert('당신의 아이디는 " + results[0].id + "입니다.');location.href='http://27.96.135.73:9999/login';</script>");
      }else{
         console.log(err);
         res.redirect('/login');
      }
   });
});

app.get('/changePW', (req,res) => {
    res.render('changePW');
});

app.post('/changePW', (req,res) => {
   var sql = "UPDATE user SET password ='" + req.body.re_password +"' WHERE id ='" + req.body.userid +"';";
   conn.query(sql,function(err){
      if(err){
         console.log(err);
         res.redirect('/login');
      }else{
         res.send("<script>alert('변경되었습니다.');location.href='http://27.96.135.73:9999/login';</script>");
      }
   });
});

app.get('/join', (req,res) => {
    res.render('join');
});

app.post('/join', (req, res) => {
   console.log(req.body);

   var sql = "INSERT INTO user(name, id, password) VALUES('" + req.body.username + "', '" + req.body.userid + "', '" + req.body.password + "');"
   conn.query(sql,function(err) {
      if(err){
         console.log('failed! : ' + err );
      }
      else{
         console.log('data inserted!');
      }
   });
   
    res.redirect('/login');
});

app.listen( 9999, function () {
   conn.connect( ( err ) => {
      if ( err ) console.log( err );
      else console.log( "DB connected successfully!" );
    });

   // var sql = "INSERT INTO member VALUES('tom', '톰', '2021-10-21' );"
   
   // conn.query(sql, function(err) {
    //     if( err ){
   //       console.log( 'failed!! : ' + err );
   //    }
   //    else {
   //       console.log( "data inserted!" );
   //    }
    // });
});
#main.ejs

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav class="navbar navbar-light bg-light fixed-top">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Offcanvas navbar</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                      </a>
                      <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                          <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </li>
                  </ul>
                  <form action="http://27.96.135.73:9999/delete" method="POST" class="d-flex my-2">
                    <input class="form-control me-2" type="password" name="check_pwd" placeholder="check pwd">
                    <button class="btn btn-outline-success" type="submit">Delete</button>
                  </form>
                </div>
              </div>
            </div>
          </nav>
    </body>
</html>
chagePW.ejs
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
        <style>
            @use postcss-preset-env {
            stage: 0;
            }

            /* config.css */

            :root {
            --baseColor: #606468;
            }

            /* helpers/align.css */

            .align {
            display: grid;
            place-items: center;
            }

            .grid {
            inline-size: 90%;
            margin-inline: auto;
            max-inline-size: 20rem;
            }

            /* helpers/hidden.css */

            .hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            }

            /* helpers/icon.css */

            :root {
            --iconFill: var(--baseColor);
            }

            .icons {
            display: none;
            }

            .icon {
            block-size: 1em;
            display: inline-block;
            fill: var(--iconFill);
            inline-size: 1em;
            vertical-align: middle;
            }

            /* layout/base.css */

            :root {
            --htmlFontSize: 100%;

            --bodyBackgroundColor: #2c3338;
            --bodyColor: var(--baseColor);
            --bodyFontFamily: "Open Sans";
            --bodyFontFamilyFallback: sans-serif;
            --bodyFontSize: 0.875rem;
            --bodyFontWeight: 400;
            --bodyLineHeight: 1.5;
            }

            * {
            box-sizing: inherit;
            }

            html {
            box-sizing: border-box;
            font-size: var(--htmlFontSize);
            }

            body {
            background-color: var(--bodyBackgroundColor);
            color: var(--bodyColor);
            font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
            font-size: var(--bodyFontSize);
            font-weight: var(--bodyFontWeight);
            line-height: var(--bodyLineHeight);
            margin: 0;
            min-block-size: 100vh;
            }

            /* modules/anchor.css */

            :root {
            --anchorColor: #eee;
            }

            a {
            color: var(--anchorColor);
            outline: 0;
            text-decoration: none;
            }

            a:focus,
            a:hover {
            text-decoration: underline;
            }

            /* modules/form.css */

            :root {
            --formGap: 0.875rem;
            }

            input {
            background-image: none;
            border: 0;
            color: inherit;
            font: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            transition: background-color 0.3s;
            }

            input[type="submit"] {
            cursor: pointer;
            }

            .form {
            display: grid;
            gap: var(--formGap);
            }

            .form input[type="password"],
            .form input[type="text"],
            .form input[type="submit"] {
            inline-size: 100%;
            }

            .form__field {
            display: flex;
            }

            .form__input {
            flex: 1;
            }

            /* modules/login.css */

            :root {
            --loginBorderRadus: 0.25rem;
            --loginColor: #eee;

            --loginInputBackgroundColor: #3b4148;
            --loginInputHoverBackgroundColor: #434a52;

            --loginLabelBackgroundColor: #363b41;

            --loginSubmitBackgroundColor: #ea4c88;
            --loginSubmitColor: #eee;
            --loginSubmitHoverBackgroundColor: #d44179;
            }

            .login {
            color: var(--loginColor);
            }

            .login label,
            .login input[type="text"],
            .login input[type="password"],
            .login input[type="submit"] {
            border-radius: var(--loginBorderRadus);
            padding: 1rem;
            }

            .login label {
            background-color: var(--loginLabelBackgroundColor);
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-inline: 1.25rem;
            }

            .login input[type="password"],
            .login input[type="text"] {
            background-color: var(--loginInputBackgroundColor);
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            }

            .login input[type="password"]:focus,
            .login input[type="password"]:hover,
            .login input[type="text"]:focus,
            .login input[type="text"]:hover {
            background-color: var(--loginInputHoverBackgroundColor);
            }

            .login input[type="submit"] {
            background-color: var(--loginSubmitBackgroundColor);
            color: var(--loginSubmitColor);
            font-weight: 700;
            text-transform: uppercase;
            }

            .login input[type="submit"]:focus,
            .login input[type="submit"]:hover {
            background-color: var(--loginSubmitHoverBackgroundColor);
            }

            /* modules/text.css */

            p {
            margin-block: 1.5rem;
            }

            .text--center {
            text-align: center;
            }

            #title{
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            }
        </style>
    </head>
    <body class="align">

    <div class="grid">

        <form action="http://27.96.135.73:9999/changePW" method="POST" class="form login">

        <div id="title" class="d-flex align-items-center justify-content-center">
            <h1 class="my-4">Change PWD</h1>
        </div>

        <div class="form__field">
            <label for="login__username"><svg class="icon">
                <use xlink:href="#icon-user"></use>
            </svg><span class="hidden">Username</span></label>
            <input autocomplete="username" id="login__username" type="text" name="userid" class="form__input" placeholder="Userid" required>
        </div>

        <div class="form__field">
            <label for="login__password"><svg class="icon">
                <use xlink:href="#icon-lock"></use>
            </svg><span class="hidden">Password</span></label>
            <input id="login__password" type="password" name="re_password" class="form__input" placeholder="Change Password" required>
        </div>

        <div class="form__field">
            <input type="submit" value="SUBMIT">
        </div>

        </form>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" class="icons">
        <symbol id="icon-arrow-right" viewBox="0 0 1792 1792">
        <path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293H245q-52 0-84.5-37.5T128 1024V896q0-53 32.5-90.5T245 768h704L656 474q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z" />
        </symbol>
        <symbol id="icon-lock" viewBox="0 0 1792 1792">
        <path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z" />
        </symbol>
        <symbol id="icon-user" viewBox="0 0 1792 1792">
        <path d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" />
        </symbol>
    </svg>

    </body>
</html>
#findID.ejs

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
        <style>
            @use postcss-preset-env {
            stage: 0;
            }

            /* config.css */

            :root {
            --baseColor: #606468;
            }

            /* helpers/align.css */

            .align {
            display: grid;
            place-items: center;
            }

            .grid {
            inline-size: 90%;
            margin-inline: auto;
            max-inline-size: 20rem;
            }

            /* helpers/hidden.css */

            .hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            }

            /* helpers/icon.css */

            :root {
            --iconFill: var(--baseColor);
            }

            .icons {
            display: none;
            }

            .icon {
            block-size: 1em;
            display: inline-block;
            fill: var(--iconFill);
            inline-size: 1em;
            vertical-align: middle;
            }

            /* layout/base.css */

            :root {
            --htmlFontSize: 100%;

            --bodyBackgroundColor: #2c3338;
            --bodyColor: var(--baseColor);
            --bodyFontFamily: "Open Sans";
            --bodyFontFamilyFallback: sans-serif;
            --bodyFontSize: 0.875rem;
            --bodyFontWeight: 400;
            --bodyLineHeight: 1.5;
            }

            * {
            box-sizing: inherit;
            }

            html {
            box-sizing: border-box;
            font-size: var(--htmlFontSize);
            }

            body {
            background-color: var(--bodyBackgroundColor);
            color: var(--bodyColor);
            font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
            font-size: var(--bodyFontSize);
            font-weight: var(--bodyFontWeight);
            line-height: var(--bodyLineHeight);
            margin: 0;
            min-block-size: 100vh;
            }

            /* modules/anchor.css */

            :root {
            --anchorColor: #eee;
            }

            a {
            color: var(--anchorColor);
            outline: 0;
            text-decoration: none;
            }

            a:focus,
            a:hover {
            text-decoration: underline;
            }

            /* modules/form.css */

            :root {
            --formGap: 0.875rem;
            }

            input {
            background-image: none;
            border: 0;
            color: inherit;
            font: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            transition: background-color 0.3s;
            }

            input[type="submit"] {
            cursor: pointer;
            }

            .form {
            display: grid;
            gap: var(--formGap);
            }

            .form input[type="password"],
            .form input[type="text"],
            .form input[type="submit"] {
            inline-size: 100%;
            }

            .form__field {
            display: flex;
            }

            .form__input {
            flex: 1;
            }

            /* modules/login.css */

            :root {
            --loginBorderRadus: 0.25rem;
            --loginColor: #eee;

            --loginInputBackgroundColor: #3b4148;
            --loginInputHoverBackgroundColor: #434a52;

            --loginLabelBackgroundColor: #363b41;

            --loginSubmitBackgroundColor: #ea4c88;
            --loginSubmitColor: #eee;
            --loginSubmitHoverBackgroundColor: #d44179;
            }

            .login {
            color: var(--loginColor);
            }

            .login label,
            .login input[type="text"],
            .login input[type="password"],
            .login input[type="submit"] {
            border-radius: var(--loginBorderRadus);
            padding: 1rem;
            }

            .login label {
            background-color: var(--loginLabelBackgroundColor);
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-inline: 1.25rem;
            }

            .login input[type="password"],
            .login input[type="text"] {
            background-color: var(--loginInputBackgroundColor);
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            }

            .login input[type="password"]:focus,
            .login input[type="password"]:hover,
            .login input[type="text"]:focus,
            .login input[type="text"]:hover {
            background-color: var(--loginInputHoverBackgroundColor);
            }

            .login input[type="submit"] {
            background-color: var(--loginSubmitBackgroundColor);
            color: var(--loginSubmitColor);
            font-weight: 700;
            text-transform: uppercase;
            }

            .login input[type="submit"]:focus,
            .login input[type="submit"]:hover {
            background-color: var(--loginSubmitHoverBackgroundColor);
            }

            /* modules/text.css */

            p {
            margin-block: 1.5rem;
            }

            .text--center {
            text-align: center;
            }

            #title{
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            }
        </style>
    </head>
    <body class="align">

    <div class="grid">

        <form action="http://27.96.135.73:9999/findID" method="POST" class="form login">

        <div id="title" class="d-flex align-items-center justify-content-center">
            <h1 class="my-4">Find ID</h1>
        </div>

        <div class="form__field">
            <label for="login__username"><svg class="icon">
                <use xlink:href="#icon-user"></use>
            </svg><span class="hidden">Username</span></label>
            <input autocomplete="username" id="login__username" type="text" name="username" class="form__input" placeholder="Username" required>
        </div>

        <div class="form__field">
            <label for="login__password"><svg class="icon">
                <use xlink:href="#icon-lock"></use>
            </svg><span class="hidden">Password</span></label>
            <input id="login__password" type="password" name="password" class="form__input" placeholder="Password" required>
        </div>

        <div class="form__field">
            <input type="submit" value="SUBMIT">
        </div>

        </form>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" class="icons">
        <symbol id="icon-arrow-right" viewBox="0 0 1792 1792">
        <path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293H245q-52 0-84.5-37.5T128 1024V896q0-53 32.5-90.5T245 768h704L656 474q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z" />
        </symbol>
        <symbol id="icon-lock" viewBox="0 0 1792 1792">
        <path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z" />
        </symbol>
        <symbol id="icon-user" viewBox="0 0 1792 1792">
        <path d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" />
        </symbol>
    </svg>

    </body>
</html>
#join.ejs

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
        <style>
            @use postcss-preset-env {
            stage: 0;
            }

            /* config.css */

            :root {
            --baseColor: #606468;
            }

            /* helpers/align.css */

            .align {
            display: grid;
            place-items: center;
            }

            .grid {
            inline-size: 90%;
            margin-inline: auto;
            max-inline-size: 20rem;
            }

            /* helpers/hidden.css */

            .hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            }

            /* helpers/icon.css */

            :root {
            --iconFill: var(--baseColor);
            }

            .icons {
            display: none;
            }

            .icon {
            block-size: 1em;
            display: inline-block;
            fill: var(--iconFill);
            inline-size: 1em;
            vertical-align: middle;
            }

            /* layout/base.css */

            :root {
            --htmlFontSize: 100%;

            --bodyBackgroundColor: #2c3338;
            --bodyColor: var(--baseColor);
            --bodyFontFamily: "Open Sans";
            --bodyFontFamilyFallback: sans-serif;
            --bodyFontSize: 0.875rem;
            --bodyFontWeight: 400;
            --bodyLineHeight: 1.5;
            }

            * {
            box-sizing: inherit;
            }

            html {
            box-sizing: border-box;
            font-size: var(--htmlFontSize);
            }

            body {
            background-color: var(--bodyBackgroundColor);
            color: var(--bodyColor);
            font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
            font-size: var(--bodyFontSize);
            font-weight: var(--bodyFontWeight);
            line-height: var(--bodyLineHeight);
            margin: 0;
            min-block-size: 100vh;
            }

            /* modules/anchor.css */

            :root {
            --anchorColor: #eee;
            }

            a {
            color: var(--anchorColor);
            outline: 0;
            text-decoration: none;
            }

            a:focus,
            a:hover {
            text-decoration: underline;
            }

            /* modules/form.css */

            :root {
            --formGap: 0.875rem;
            }

            input {
            background-image: none;
            border: 0;
            color: inherit;
            font: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            transition: background-color 0.3s;
            }

            input[type="submit"] {
            cursor: pointer;
            }

            .form {
            display: grid;
            gap: var(--formGap);
            }

            .form input[type="password"],
            .form input[type="text"],
            .form input[type="submit"] {
            inline-size: 100%;
            }

            .form__field {
            display: flex;
            }

            .form__input {
            flex: 1;
            }

            /* modules/login.css */

            :root {
            --loginBorderRadus: 0.25rem;
            --loginColor: #eee;

            --loginInputBackgroundColor: #3b4148;
            --loginInputHoverBackgroundColor: #434a52;

            --loginLabelBackgroundColor: #363b41;

            --loginSubmitBackgroundColor: #ea4c88;
            --loginSubmitColor: #eee;
            --loginSubmitHoverBackgroundColor: #d44179;
            }

            .login {
            color: var(--loginColor);
            }

            .login label,
            .login input[type="text"],
            .login input[type="password"],
            .login input[type="submit"] {
            border-radius: var(--loginBorderRadus);
            padding: 1rem;
            }

            .login label {
            background-color: var(--loginLabelBackgroundColor);
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-inline: 1.25rem;
            }

            .login input[type="password"],
            .login input[type="text"] {
            background-color: var(--loginInputBackgroundColor);
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            }

            .login input[type="password"]:focus,
            .login input[type="password"]:hover,
            .login input[type="text"]:focus,
            .login input[type="text"]:hover {
            background-color: var(--loginInputHoverBackgroundColor);
            }

            .login input[type="submit"] {
            background-color: var(--loginSubmitBackgroundColor);
            color: var(--loginSubmitColor);
            font-weight: 700;
            text-transform: uppercase;
            }

            .login input[type="submit"]:focus,
            .login input[type="submit"]:hover {
            background-color: var(--loginSubmitHoverBackgroundColor);
            }

            /* modules/text.css */

            p {
            margin-block: 1.5rem;
            }

            .text--center {
            text-align: center;
            }

            #title{
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            }
        </style>
    </head>
    <body class="align">

    <div class="grid">

        <form action="http://27.96.135.73:9999/join" method="POST" class="form login">

        <div id="title" class="d-flex align-items-center justify-content-center">
            <h1 class="my-4">Sign Up</h1>
        </div>

        <div class="form__field">
            <label for="login__username"><svg class="icon">
                <use xlink:href="#icon-user"></use>
            </svg><span class="hidden">Username</span></label>
            <input autocomplete="username" id="login__username" type="text" name="username" class="form__input" placeholder="Username" required>
        </div>

        <div class="form__field">
            <label for="login__username"><svg class="icon">
                <use xlink:href="#icon-user"></use>
            </svg><span class="hidden">Username</span></label>
            <input autocomplete="username" id="login__username" type="text" name="userid" class="form__input" placeholder="Userid" required>
        </div>

        <div class="form__field">
            <label for="login__password"><svg class="icon">
                <use xlink:href="#icon-lock"></use>
            </svg><span class="hidden">Password</span></label>
            <input id="login__password" type="password" name="password" class="form__input" placeholder="Password" required>
        </div>

        <div class="form__field">
            <input type="submit" value="Sign Up">
        </div>

        </form>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" class="icons">
        <symbol id="icon-arrow-right" viewBox="0 0 1792 1792">
        <path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293H245q-52 0-84.5-37.5T128 1024V896q0-53 32.5-90.5T245 768h704L656 474q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z" />
        </symbol>
        <symbol id="icon-lock" viewBox="0 0 1792 1792">
        <path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z" />
        </symbol>
        <symbol id="icon-user" viewBox="0 0 1792 1792">
        <path d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" />
        </symbol>
    </svg>

    </body>
</html>
#login.ejs

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
        <style>
            @use postcss-preset-env {
            stage: 0;
            }

            /* config.css */

            :root {
            --baseColor: #606468;
            }

            /* helpers/align.css */

            .align {
            display: grid;
            place-items: center;
            }

            .grid {
            inline-size: 90%;
            margin-inline: auto;
            max-inline-size: 20rem;
            }

            /* helpers/hidden.css */

            .hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            }

            /* helpers/icon.css */

            :root {
            --iconFill: var(--baseColor);
            }

            .icons {
            display: none;
            }

            .icon {
            block-size: 1em;
            display: inline-block;
            fill: var(--iconFill);
            inline-size: 1em;
            vertical-align: middle;
            }

            /* layout/base.css */

            :root {
            --htmlFontSize: 100%;

            --bodyBackgroundColor: #2c3338;
            --bodyColor: var(--baseColor);
            --bodyFontFamily: "Open Sans";
            --bodyFontFamilyFallback: sans-serif;
            --bodyFontSize: 0.875rem;
            --bodyFontWeight: 400;
            --bodyLineHeight: 1.5;
            }

            * {
            box-sizing: inherit;
            }

            html {
            box-sizing: border-box;
            font-size: var(--htmlFontSize);
            }

            body {
            background-color: var(--bodyBackgroundColor);
            color: var(--bodyColor);
            font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
            font-size: var(--bodyFontSize);
            font-weight: var(--bodyFontWeight);
            line-height: var(--bodyLineHeight);
            margin: 0;
            min-block-size: 100vh;
            }

            /* modules/anchor.css */

            :root {
            --anchorColor: #eee;
            }

            a {
            color: var(--anchorColor);
            outline: 0;
            text-decoration: none;
            }

            a:focus,
            a:hover {
            text-decoration: underline;
            }

            /* modules/form.css */

            :root {
            --formGap: 0.875rem;
            }

            input {
            background-image: none;
            border: 0;
            color: inherit;
            font: inherit;
            margin: 0;
            outline: 0;
            padding: 0;
            transition: background-color 0.3s;
            }

            input[type="submit"] {
            cursor: pointer;
            }

            .form {
            display: grid;
            gap: var(--formGap);
            }

            .form input[type="password"],
            .form input[type="text"],
            .form input[type="submit"] {
            inline-size: 100%;
            }

            .form__field {
            display: flex;
            }

            .form__input {
            flex: 1;
            }

            /* modules/login.css */

            :root {
            --loginBorderRadus: 0.25rem;
            --loginColor: #eee;

            --loginInputBackgroundColor: #3b4148;
            --loginInputHoverBackgroundColor: #434a52;

            --loginLabelBackgroundColor: #363b41;

            --loginSubmitBackgroundColor: #ea4c88;
            --loginSubmitColor: #eee;
            --loginSubmitHoverBackgroundColor: #d44179;
            }

            .login {
            color: var(--loginColor);
            }

            .login label,
            .login input[type="text"],
            .login input[type="password"],
            .login input[type="submit"] {
            border-radius: var(--loginBorderRadus);
            padding: 1rem;
            }

            .login label {
            background-color: var(--loginLabelBackgroundColor);
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-inline: 1.25rem;
            }

            .login input[type="password"],
            .login input[type="text"] {
            background-color: var(--loginInputBackgroundColor);
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            }

            .login input[type="password"]:focus,
            .login input[type="password"]:hover,
            .login input[type="text"]:focus,
            .login input[type="text"]:hover {
            background-color: var(--loginInputHoverBackgroundColor);
            }

            .login input[type="submit"] {
            background-color: var(--loginSubmitBackgroundColor);
            color: var(--loginSubmitColor);
            font-weight: 700;
            text-transform: uppercase;
            }

            .login input[type="submit"]:focus,
            .login input[type="submit"]:hover {
            background-color: var(--loginSubmitHoverBackgroundColor);
            }

            /* modules/text.css */

            p {
            margin-block: 1.5rem;
            }

            .text--center {
            text-align: center;
            }

            #title{
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            }
        </style>
    </head>
    <body class="align">

    <div class="grid">

        <form action="http://27.96.135.73:9999/main" method="POST" class="form login">

        <div id="title" class="d-flex align-items-center justify-content-center">
            <h1 class="my-4">Sign In</h1>
        </div>

        <div class="form__field">
            <label for="login__username"><svg class="icon">
                <use xlink:href="#icon-user"></use>
            </svg><span class="hidden">Username</span></label>
            <input autocomplete="username" id="login__username" type="text" name="userid" class="form__input" placeholder="Userid" required>
        </div>

        <div class="form__field">
            <label for="login__password"><svg class="icon">
                <use xlink:href="#icon-lock"></use>
            </svg><span class="hidden">Password</span></label>
            <input id="login__password" type="password" name="password" class="form__input" placeholder="Password" required>
        </div>

        <div class="form__field">
            <input type="submit" value="Sign In">
        </div>

        </form>

        <p class="text--center">Not a member? <a href="http://27.96.135.73:9999/join">Sign up now</a> <svg class="icon">
            <use xlink:href="#icon-arrow-right"></use>
        </svg></p>
        <p class="text--center">Don't remember the ID? <a href="http://27.96.135.73:9999/findID">Find now</a> <svg class="icon">
            <use xlink:href="#icon-arrow-right"></use>
        </svg></p>
        <p class="text--center">Don't remember password? <a href="http://27.96.135.73:9999/changePW">Change now</a> <svg class="icon">
            <use xlink:href="#icon-arrow-right"></use>
        </svg></p>

    </div>

    <svg xmlns="http://www.w3.org/2000/svg" class="icons">
        <symbol id="icon-arrow-right" viewBox="0 0 1792 1792">
        <path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293H245q-52 0-84.5-37.5T128 1024V896q0-53 32.5-90.5T245 768h704L656 474q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z" />
        </symbol>
        <symbol id="icon-lock" viewBox="0 0 1792 1792">
        <path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z" />
        </symbol>
        <symbol id="icon-user" viewBox="0 0 1792 1792">
        <path d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" />
        </symbol>
    </svg>

    </body>
</html>

세션/쿠키

세션은 서버측에 저장하는 쿠키
쿠키는 클라이언트에 저장하는 세션
이라고 생각해도 좋습니다.

서버측 보안 및 인증이 들어가야 하는 "로그인 인증 유지", "티켓 예매시 좌석 점유 유지" 등에는 세션을 쓰고
클라이언트만 가지고 있으면 되는 정보

"자동 로그인 기능" 등에는 쿠키를 씁니다.
profile
육은별
Front-end Engineer, Web Developer & UX/UI Design
이전 포스트

1021 SeSAC(새싹) 3기 34일차

다음 포스트

1026 SeSAC(새싹) 3기 36일차

0개의 댓글

관련 채용 정보