TIL - 23.02.13

회원가입 기능에서 클라이언트가 입력한 데이터 값을 frontEnd로 가져오기

클라이언트가 input box에 채워넣는 내용을 받아오기 위해
html의 해당 박스에

<div class="input">
    <input type="text" name="email" id="email" placeholder="이메일을 입력하세요">
</div>
<div class="input">
    <input type="text" name="username" id="username" placeholder="닉네임을 입력하세요">
</div>
<div class="input">
    <input type="password" name="password" id="password" placeholder="비밀번호를 입력하세요">
</div>

name, id, placeholder를 입력한다.

여기서 type이 password인 녀석은 input box에 내용 기입 시

이처럼 공개되지 않는 형태로 입력되게된다.

<div class="signup-btn" onclick="signUp()">
    회원 가입
</div>

그러고나서
회원가입 버튼에 onclick을 사용하여 signup 함수를 호출하고
함수 내용안에

data: JSON.stringify({
    username: $(`#username`).val(),
    email: $(`#email`).val(),
    password: $(`#password`).val()

백틱 안에 위에 설정한 input box의 id를 입력해주면
클라이언트가 input box에 입력한 데이터를 받아온다.