form 전송
- 동기 처리는 끝나야 다음꺼가 진행되고, 비동기 처리는 유도리 있게 진행하는 형태이다.
- 그리고
<form>에서의<input type = “submit”>이나<button type = “submit”>은 전송 시 페이지 이동이 일어난다. 즉 동기 방식 HTTP 통신을 하고 있는 것이다. - 비동기 방식에서는
<button *type*="button" *onclick*="axiosGet()">axios get 전송</button>이런식으로 함수를 걸어서 js로 폼 전송을 적용시켜준다.- 따라서 js코드 내에서 폼 유효성 검사를 하는 코드를 작성해야한다!
- 동기 방식의 HTTP 전송
- 페이지를 아예 이동해 서버가 데이터를 처리한다.
- 한 번에 하나만 처리. 예를 들어 로그인 시 비번을 잘못 입력하면 그에 대한 알람을 한 화면에서 보여주는
- 비동기 방식의 HTTP 통신
- 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능하다.
- 폼의 데이터를 서버와 dynamic하게 송수신 하는 것이다!
- 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것!
- 즉 무언가를 제출 할 때마다 페이지를 이동하는 것이 아니라 한 페이지에서 동작하게 하고 싶다면?
- 비동기 방식을 이용하면 된다.
- 예를 들어 로그인 실패 시 창이 이동되지 않고 현재 페이지에서 값을 처리하고 알림을 주는 상황.
- 비동기 HTTP 통신 방법으로는 3가지가 있다.
Ajax,Axios,Fetch.- 얘네는 문법이 다를 뿐 사실상 같은 개념이다.
- 참고로 client가 server로 요청을 보내는 부분이기 때문에 백엔드에 가깝다.
Axios
- Node.js와 브라우저를 위한 Promise API를 활용한다.
- 비동기 HTTP통신이 가능하다.
- return값이 Promise객체로 온다!
- 장점
- Promise 기반이다.
- 브라우저 호환성이 뛰어나다! 주로 이걸로 사용!
- 단점
- 모듈을 설치하거나 호출을 해야 사용 할 수 있다!
- cdn 파일 입력 ! https://axios-http.com/kr/docs/intro
▶️ Axios 요청 문법
axios({
method: "GET",
url: "/axios",
params: data
})url: 통신하고자 하는 주소를 넣어준다.- form에서의 action에 해당한다. 내가 데이터를 보내고자 하는 주소!
method: 통신하고자 하는 방식을 넣어준다.- get, post, patch, delete 등
data: json형태의 보내고자 하는 데이터를{}안에 넣어준다.{ key: value, key: value}의 형태로 만들어 준다.- put, post, patch 일 때 사용한다.
req.body로 데이터를 보낸다.
params: get 요청으로 데이터를 보낼 때 url의?뒤에 객체로 보내지는 부분을 넣어준다.{ key: value, key: value}의 형태로 작성한다.req.query에 데이터가 담긴다.params값을 안보낼거면 URL에 쿼리스트링을 작성해서 보내도 된다.
▶️ Axios 응답 문법
axios({
method: "GET",
url: "/axios",
params: data
}).then((response) => {
//서버가 제공한 응답(데이터)
console.log(response.data)
//서버 응답의 HTTP 상태 코드. 성공이면 200
console.log(response.status)
//서버가 응답한 헤더
console.log(response.headers)
});- Promise 기반이기 때문에
.then을 사용해준다. - 백에서는?
res.send를 이용해 데이터를 보낸다.res.send를 이용하면 데이터를 클라이언트로 다시 보낼 수 있다.
▶️ Axios 코드 예시
//[index.js]파일
//---------------axios get
app.get("/axios", function (req, res) {
console.log(req.query);
res.send(req.query);
});
//---------------axios post
app.post("/axios", function (req, res) {
console.log(req.body);
const data = {
...req.body,
msg: "반가워요", //메시지 추가해서 send 하기
};
res.send(data);
});//[index.ejs]파일
//--------------------기본 getData()만들기 --------------------
//input에서 입력한 값에 대해 유효성을 검사 할 것이다.
//submit으로 하는게 아니라 자동으로 폼 검증이 안되기 때문!
function getData() {
const form = document.forms["register"];
if (!form.checkValidity()) { //폼의 유효성 검사를 해서 boolean값 반환
form.reportValidity(); //오
return false;
}
//그럼 여기서 getData라는 함수의 반환값은 총 두가지 형태가 되게 된다.
//false | object (객체 형태)
const data = { //form에서 name으로 쓰인 게 key값이 된다.
id: form.id.value,
pw: form.pw.value,
name: form.name.value,
}
return data
}
//--------------------axiosGet --------------------
//axios함수는 promise객체를 return한다.
//get요청으로 데이터 보낼때는 params를 사용한다.
function axiosGet() {
const data = getData()
axios({
method: "GET",
url: "/axios",
params: data
}).then((res) => {
// 서버에서 보내준 응답이 res에 담긴다.
console.log("res", res)
console.log("res.data", res.data)
const {
name
} = res.data
$("#result").html(`axios get 요청 성공 ${name}님 환영합니다.`)
})
}
//--------------------axiosPost --------------------
async function axiosPost() {
//폼 유효성 검사를 하고 싶다. 이걸 뭘로 하는가?
//input태그에 있는걸로 폼 유형성 검사를 하고 싶다? 이건 form의 submit이 일어날때만 동작한다.
//동적 폼전송은 form의 submit을 이용하는게 아니고, js로 버튼에 함수를 걸어서 해준다.
//따라서 js코드 내에서 폼 유효성 검사를 하는 코드를 작성해야 한다!
//방법1) const regex=//, regex.test() 이용해서 하면 된다.
//검사하는 식 입력해서 확인하는 함수를 걸어주는 것.
//근데 이게 아니라 폼 요소자체로 유효성을 검사하고 싶으면?
//방법2) form.checkValidity과 form.reportValidity을 사용해도 된다.
const data = getData();
//data에 받아오는 값은 두가지 형태 중 하나이다.
//getData를 보면 된다. 얘도 결국 false 아니면 object이다.
if (!data) return; //데이터의 값을 판별하는것
//true여야 이 if문안으로 들어가서 다음꺼가 실행된다.
//false면 걍 중지.
const res = await axios({
method: "POST",
url: "/axios",
data: data,
})
axios({
method: "POST",
url: "/axios",
data: data,
}).then((res) => {
console.log(res.data)
const {
name
} = res.data
console.log("res", res)
console.log("res.data", res.data)
$("#result").html(`axios post 요청 성공 ${res.data.name}님 환영합니다.`)
})
}
JSON이란?
- JavaScript Object Notation의 약자이다.
- 데이터를 표시하는 방법 중 하나이다! 데이터를 문자열의 형태로 나타내기 위해 사용한다.
- 가독성이 뛰어나 컴퓨터와 사람 모두 해석하기에 편리하다.
- JavaScript의 Object를 기반으로 하는 텍스트 형식이다.
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆