✏️ 계속 누적되는 수업 내용에 하루라도 밀리면 안되겠다는 생각이 들었다.요청 방식에 따라 전송방식이 어떻게 달라지는지 직접 코드로 확인했다.
아무래도 백 다루는 것에서 더 많은 흥미를 가지고 공부하게 된다.
+ 동기 방식 vs 비동기 방식
더보기
동기 방식 : 하나 밖에 일을 못한다.
비동기 방식 : 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능
동적 폼 전송
데이터를 input, button의 type 이 submit 인 속성들로 전송 시 페이지 이동이 일어난다.
최근 페이지를 보면 모든 동작에 있어서 페이지 이동이 일어나지 않는 부분도 있다.
예를 들어 로그인 화면에서 아이디나 비밀번호가 틀렸을 때, 페이지 이동이 되는 것이 아닌 비동기 HTTP를 사용해 같은 페이지 안에서 동작이 이루어진다. 이렇게 웹의 일부분이 실시간으로 변경되는 것을 dynamic이라고 한다.
ex) 이메일 받은 메일함에서 새로운 메일이 왔을 때 메일 수만 증가하는 것, 로그인 화면
비동기 HTTP 통신 방법
Ajax
- html이랑 비슷한 마크업언어
- 규칙이 없고 사용자가 정의해서 사용 가능하다.
- jquery를 이용하면 쉽게 구현할 수 있다.
- jquery를 사용해야만! (xml 사용은 복잡하고, promis 기반이 아니다.)
Ajax 사용
<head>
ajax 사용을 위한 jquery cdn을 추가한다.
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script><body>
body 태그에는 form 안에 이름을 받을 id, 성별을 받아올 gender 가 있다. form은 name만 지정해준다. action은 페이지이동을 할 것이 아니라 필요 없다!
button 에는 onclick ="ajaxGet()"를 주어 js에 들어갈 함수를 작성해준다.
실행되는 결과를 보여줄 div.result 도 추가해준다.
<script 코드>
- post 요청은 지금 코드에서 get을 다 host로 변경하면 된다.
//버튼 실행 결과 보여줄 요소 선택
const resultBox = document.querySelector(".result");
function ajaxGet() {
console.log("click ajaxGet btn!!");
// 폼 선택하기
const form = document.forms["register"];
// 서버에 전송할 폼 입력값을 저장하는 객체
const formInfo = {
name: form.name.value,
gender: form.gender.value,
};
$.ajax({
url: "/ajax",
type: "GET",
data: formInfo,
success: function (data) {
console.log(data); //
resultBox.textContent = `GET /ajax 요청 완료!! ${data.name}님은 ${data.gender}이시죠?`;
resultBox.style.color = "blue";
},
});
}
서버 app.js
// /ajax get 요청
app.get("/ajax", function (req, res) {
console.log(req.query);
res.send(req.query);
});
Axios
- node.js 랑 브라우저를 위한 promis API 를 활용
- return를 promise 객체로 돌아온다.
- promise 기반, 브라우저 호환성 굳
- 모듈 설치, 호출 해야 사용 가능
- 이거 위주로 사용할 예정
Axios 사용
axio 사용을 위해 head에 cdn을 추가한다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>- <head>
- <cdn>
- <body>
- form name = "register"
- input = text / input radio / ...
- button type = "button" onclick =" axiosget() / axiospost";
- class = "result"
- form name = "register"
- <script>
- 실행 결과 보여줄 result 선택
- function axios 함수{
- 폼 선택
- 서버에 전송할 폼 입력값을 저장하는 객체
- axios
- url
- method
- get요청이면 params / post 요청이면 data
1) .then() {} .catch() {}
- GET요청은 params에 저장!!
//axios는 결과는 promise를 리턴, then() 를 사용 가능
//axios를 가지고 서버로 가면 then으로 서버에서 에러나면 catch로
axios({
url: "/axios",
method: "GET",
params: formInfo, //GET요청은 params에 저장!!
}) .then(function (response) {
resultBox.textContent = `get /axios 요청 완료 ${response.data.name} 은 ${response.data.gender}이시죠?`;
resultBox.style.color = "green";
}).catch(function (error) {
console.log("Error!", error);
});- post 요청은 data 키 값에 저장!
axios({
url: "/axios",
method: "POST",
data: formInfo, //POST 요청 -> data 키 값에 담아서 보내기1
})2. async/awit 로 axios 요청 처리하기
- 해당 함수 앞에 async 써주기!
try {
const response = await axios({
url: "/axios",
method: "GET",
params: formInfo, //GET요청은 params에 저장!!
});
console.log(response);
console.log(response.data);
resultBox.textContent = `get /axios 요청 완료 ${response.data.name} 은 ${response.data.gender}이시죠?`;
resultBox.style.color = "green";
} catch (error) {
console.log("Error!", error.message);
}
}
fetch
- es6부터 들어온 js 내장 라이브러리, promis 기반
- js 내장 라이브러리이므로 별도의 import 필요 없고, promise 기반
- 최신 문법이라 기능 부족하다.
'[Study] BE > Node.js' 카테고리의 다른 글
| [포스코x코딩온] MVC_MySQL (1) | 2023.04.09 |
|---|---|
| [포스코x코딩온] 파일 업로드 (0) | 2023.04.05 |
| [포스코x코딩온] Node.js MVC 구조 (0) | 2023.04.05 |
| [포스코x코딩온] 웹 동작 방식 & Form 전송 (0) | 2023.03.28 |
| [포스코x코딩온] Node.js 간단한 백엔드 구축 (0) | 2023.03.27 |