(노드 심화 주차 프로젝트 중)
마치 화수분 같다. 쏟아지는 물 같기도 하고. 에러가 나는 구석이 너무 다양하고 말없이, 더 빈번하게 쏟아져서 백엔드 코딩보다 더 막막하게 만든다. …내가 지금까지 한 백엔드에 비교해보자면말이다. 우리 팀에 프론트 능력자와 백엔드 능력자가 둘이나 있어서 다행이었다.
내일, 아니 오늘이 발표다. 팀원들의 배려로 다같이 일찍(? 새벽 2시면 뭐…) 들어가고 내일 모여서 프로젝트 문서를 마무리짓기로 했다.
오늘 TIL 못 쓰겠네… 하고 창들을 닫고 있는데 아침에 조금이나마 기록해놓은 게 있어서 후딱 올린다.
Form submit이 될지 onclick을 통한 Ajax가 실행될지…?
- Ajax 방식 예시:
// HTML
<form class="form-signin" id="form">
<h2 class="form-signin-heading">로그인</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
...
<button class="btn btn-lg btn-primary btn-block" id="submit" type="button">Sign in</button>
</form>
// Ajax
<script>
$(function(){
$('#submit').on("click",function () {
var form1 = $("#form").serialize();
console.log(form1);
$.ajax({
type: "post",
url: "/login/check",
data: form1,
dataType: 'json',
success: function (data) {
alert("success");
console.log(data);
},
error: function (request, status, error) {
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
});
});
</script>- 비동기식 처리. (= success가 실행되기를 기다리지 않고 다른 작업을 바로 진행하도록 함)
- Submit 방식 예시:
// HTML
<form class="form-signin" id="form" method="POST" action="/login/check">
<h2 class="form-signin-heading">로그인</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
...
<button class="btn btn-lg btn-primary btn-block" id="submit" type="submit">Sign in</button>
</form>- form태그의 method와 action 속성을 이용해서 바로 데이터를 전송함.
- “submit button”을 누르고 페이지가 리로드된다.
- → 로그인 후 페이지 이동처럼 action을 취하고 난 후 페이지가 변경이 되는 경우에 자주 사용됨.
- 매번 페이지 전체를 리로드해야 해서 서버의 부하와 대기 시간이 크고 길어짐.
- 동기식 처리. (=전체 페이지를 리로드하므로, 그동안 다른 데이터를 처리하지 못함.)
- 결론: 제출하기 버튼의 타입을
서로 배타적으로 실행된다. 즉, method와 action을 다 적어놨더라도 마지막 button 타입이 button이기만 하면 Form submit으로 서버에 요청이 가지 않는다. 반대도 마찬가지.
⇒ Ajax 함수를 onclick으로 걸어놨는데 자꾸 form submit의 경로로 요청이 간다 싶으면 form 태그 안의 마지막 제출 버튼의 타입이 button이 아니라 submit이라고 되어있는지 확인해보자.
참고:
https://claire-song-1995.tistory.com/19
https://milkye.tistory.com/266
https://myhappyman.tistory.com/68
왜 자꾸 모달창이 이렇게 나타날까?
밑바닥에 붙어서. 원래 처음엔 안 보여야 하는데 말이다.
⇒ 부트스트랩 자바스크립트만 임포트하고 스타일시트를 임포트 하지 않았으니까지..!
// 부트스트랩 CSS
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
rel="stylesheet"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
// 부트스트랩 JS
<body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>저렇게 위아래로 코드를 넣어주니 잘 작동했다:
모달은 잘 됐는데 가운데 정렬이 어긋나고
갑자기 세로 정렬되고, 충돌이 심한 듯하다.
⇒ 팀원의 도움으로 간단하게 해결됐다.
Uploaded by N2T