![[블로그 만들기] 4. 회원가입 구현 : joinForm → join으로 이동하기](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255B%25EB%25B8%2594%25EB%25A1%259C%25EA%25B7%25B8%2520%25EB%25A7%258C%25EB%2593%25A4%25EA%25B8%25B0%255D%2520%25204.%2520%25ED%259A%258C%25EC%259B%2590%25EA%25B0%2580%25EC%259E%2585%2520%25EA%25B5%25AC%25ED%2598%2584%2520%253A%2520joinForm%2520%25E2%2586%2592%2520join%25EC%259C%25BC%25EB%25A1%259C%2520%25EC%259D%25B4%25EB%258F%2599%25ED%2595%2598%25EA%25B8%25B0%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3DCoding_study&w=2048&q=75)
1. View 파일 확인하기
- joinForm.mustache 파일에서 input name값, action, method 확인하기
{{> /layout/header}}
<div class="container p-5">
<!-- 요청을 하면 localhost:8080/join POST로 요청됨
username=사용자입력값&password=사용자값&email=사용자입력값 -->
<div class="card">
<div class="card-header"><b>회원가입을 해주세요</b></div>
<div class="card-body">
<form action="/join" method="post" enctype="application/x-www-form-urlencoded">
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter username" name="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Enter password" name="password">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Enter email" name="email">
</div>
<button type="submit" class="btn btn-primary form-control">회원가입</button>
</form>
</div>
</div>
</div>
{{> /layout/footer}}

- submit : 버튼이랑 달리 액션을 발동시키는 것
해당 주소로 통신 요청을 하는것
form태그 안에 있으면 디폴트 값이 submit
밖에 있으면 디폴트 값이 버튼! 다름!
- name이라는 키 값이 없으면 null
키 값이 있는데 데이터 입력을 안하면 공백
- submit은 버튼이랑 달리 액션을 발동시키는 것 : 해당 주소로 통신 요청을 하는것
form태그 안에 있으면 디폴트 값이 submit!
밖에 있으면 디폴트 값이 버튼! 다름!
2. 리다이렉트(Redirect) 확인하기
- 장점 : 또 안 만들어도 됨 / 재사용 가능
- 과정
브라우저가 페이지를 요청 → 서버가 응답 : 헤더에 Location 키를 사용 → 값으로 '/main'을 전달
→ 브라우저가 응답을 받음 → 헤더확인) HTTP 상태 코드 : 302
임시적인 리다이렉션이 일어났음을 알림
→ 브라우저는 새로운 주소로 재 요청 → 해당 주소에 대한 서버의 응답을 받음
300번대에는 다양한 리다이렉션 상태 코드


Share article