이화마켓 웹어플리케이션 개발 : 로그인/회원가입 화면 해설

현재 이화마켓 웹어플리케이션을 개발하는 과정 중에 있는데, 그 중 로그인/회원가입 화면은 어느 서비스에서든 활용할 수 있는 필수적인 화면이라고 생각한다. 따라서 웹어플리케이션 개발을 하고자 하는 다른 사람들에게 도움이 되었으면 좋겠다고 생각하여 우리가 이 화면을 어떻게 구현하였는지에 대해 적어보고자 한다.

회원가입 화면

💡 기능

• 회원가입 버튼이 클릭되면 사용자가 입력한 아이디, 비밀번호, 닉네임을 받아 백엔드로 넘긴다.
• 아이디가 중복되지 않는지 체크한다. 중복된 아이디라면 이를 알려주는 메세지 창을 보여주고 회원가입 화면으로 이동한다. 중복되지 않은 아이디라면 정상적으로 데이터베이스에 사용자 정보를 추가하고 로그인 화면으로 이동한다. (비밀번호는 암호화하여 저장한다.)

💡 구현

• app.py 일부

@application.route("/signup")
def signup():
    return render_template("signup.html")

네비게이션 바에서 회원가입 버튼을 클릭하면 회원가입 화면으로 이동한다.

• signup.html

{% extends "index.html" %}

{% block section %}
{% with mesg = get_flashed_messages() %}
{% if mesg !=[] %}
<script>alert("{{ mesg[0] }}")</script>
{% endif %}
{% endwith %}
<style>
  .wrapper {
    width: 700px;
    height: 350px;
    padding: 40px;
    margin: auto;
    box-sizing: border-box;
  }

  #title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #signup-form>input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid #c4c4c4;
    background-color: #F8F8F8;
  }

  #signup-form>input[type="submit"] {
    color: rgb(36, 81, 100);
    font-size: 16px;
    background-color: rgb(163, 223, 249, 0.75);
    margin-top: 20px;
  }
</style>
<div class="wrapper">
  <br>
  <h2 id="title">회원가입</h2>
  <hr><br>
  <form method="post" action="/signup_post" id="signup-form" style="width: 70%; margin: auto;">
    <p>ID : </p>
    <input type="text" name="id" required>
    <p>password : </p>
    <input type="password" name="pw" required>
    <p>Nickname : </p>
    <input type="text" name="nickname"><br><br>
    <input type="submit" value="회원가입" id="signupBtn" /></p>
  </form>
</div>
{% endblock section %}

회원가입 화면의 html 파일이다. index.html로부터 확장되어 위에 네비게이션 바가 보이고, style은 html 파일 내부에 정의하였다. 사용자가 입력한 정보들은 form에 담겨 post 방식으로 전달되고 "/signup_post"가 이 정보들을 처리하도록 한다.