동적폼 전송
- 비동기 HTTP통신: 페이지 이동(새로고침)없이 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능한 동적 폼 전송방법
- 웹 문서의 일부 내용이 실시간으로 변경되는 dynamic한 송수신 방법
- Ajax, Axios, Fetch의 세 가지 방법이 있는데 최근에는 Axios가 가장 많이 사용되고 있다고 한다
- 성공시 실행되는 success, 실패시 실행되는 error파트로 구분될 수 있다
Ajax
- 자바 스크립트를 이용한 비동기 HTTP통신
- xml 형식으로 데이터를 주고 받는다
- jquery를 통해 쉽게 구현이 가능하다, promise기반이 아니다
1. jquery cdn을 추가한다
<!-- jquery CDN -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>2. button 클릭시 발생할 이벤트 함수를 작성한다
- submit하지 않을 것이기 때문에 button타입을 button으로 변경해줘야한다
- 이벤트 함수에서 데이터 정의 후 ajax메소드를 실행한다
- form에 method와 url없어도 된다
function ajaxE() {
//form name을 통해 form객체 가져오기
const form = document.forms["ajaxForm"];
//form의 input요소들의 정보를 가져와서 배열로 저장 form.name.value로 접근
const data = {
id: form.id.value,
pw: form.pw.value,
}
//이제 ajax작성!!
}3. ajax메소드를 jquery형태로 작성한다
- $.ajax({내용})으로 구성
- type: get 또는 post로 서버에 보내는 방식
- url: 로컬호스트 뒤에 붙는 서버에서 라우팅 할 주소
- data: 보낼 데이터, get, post모두 data로 보냄
- result는 성공시 실행되는 작업, error는 실패시 실행되는 작업
- 반환 데이터는 response의 .name으로 접근
//정해진 이름
$.ajax({
//get->post로 변경시 post로 동일하게 작동
//form의 method를 type으로 작성한다
type: "get",
url: "/ajax",
data: data,
success: fuction(response) {
console.log(response);
//반환 데이터 접근방법 response의 .name으로 접근하여 데이터 출력가능
response.id
}
error: fuction(e) {
console.log(e, "실패!");
}
})4. app.js 서버에서 url접근 시 app.get()으로 반환할 내용 설정
- post는 get->post로 변경 req.query->req.body로 변경하면 동일하게 작동함
- res.send()로 요청 데이터를 다시 보내주어야한다
app.get("/ajax", (req, res) => {
//확인용 log
console.log(req.query);
res.send(req.query);
});Axios
- node.js와 브라우저를 위한 promise api사용
- 모듈을 설치(npm install axios)하거나 호출(cdn)해야 사용이 가능
- 강의에서는 cdn을 호출하여 사용하였다(잊지말기!)
- axios({내용})으로 작성
- promise를 사용하기 때문에 성공시 then, 실패시 catch로 넘어갑니다
1. cdn호출
<!-- axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>2. 이벤트 함수에 data정의, axios메소드 작성
//대충 정의했다고 가정
const form
const data
axios({
method: "get",
url: "/axios",
//get은 params: 변수, post는 data: 변수로 보낸다는 거 잊지마세요!
params: data,
}).then((res)=>{
//res에는 header, data, status등 응답에 대한 여러 정보가 들어있습니다
//따라서 ajax(res.name)와 달리 반환 데이터는 res.data.name으로 접근해야합니다
//배열의 구조 분해 할당을 통해 name을 가진 변수로 쉽게 접근하도록 설정할 수 있습니다
const {id, pw} = res.data; //data라는 이미 지정된 key에 배열로 저장되어 반환됩니다
console.log("id는 ", id);
}).catch(err) {
console.log(err,"실패!");
}- app.js설정은 ajax, axios, fetch 모두 동일하므로 생략!
3. async/await로 작성하는 법
- try/catch를 이용해서 try안에 작성한다
- 이벤트 함수앞에 async 키워드 작성한다
- axios앞에 await키워드 작성하고 해당 메소드를 response를 뜻하는 변수에 저장한다(이름은 내맘)
- response.data.name을 통해 data에 접근할 수 있다
try {
const response = await axios({
//params안쓰고 url query처리로도 가능
url: `/axios?name=${data.id}&gender=${data.pw}`,
method: "get",
});
console.log(response.data);
const { id, pw } = response.data;
resultBox.innerText = `GET axios 요청 완료! ${id}} 비밀번호는 ${pw}입니다.`;
resultBox.style.color = "green";
} catch (err) {
console.log("err!!", err);
}Fetch
- ES6부터 들어온 ja내장 라이브러리, promise기반
- 별도의 설치나 호출 필요없다
- 최신문법이라서 상대적으로 기능이 부족하다
- fetch('url',{내용})으로 작성하며 get은 method: get 내용을 생략 가능하나 데이터를 반드시 url에 쿼리 형태로 보내야한다
- post는 method 외에도 headers를 설정해야하고, body key을 통해 데이터를 json형태로 보내주어야한다(stringify메소드 사용)
1. 이벤트함수 정의 후 fetch메소드작성
- get의 경우: fetch(url+query,{method내용})으로 작성
- post의 경우: fetch('url',{method, headers, body})로 작성
- promise객체를 기반으로 하기 때문에 .then 또는 async/await사용
2. get작성 예시
//대충 이벤트 함수 내부에 form으로 data(id, pw)를 정의함
const form
const data
fetch(`/fetch?id=${data.id}&pw=${data.pw}`,{}) //method: "get"은 생략가능
.then((res)=>{
//response에는 무엇이 반환될까?
console.log(res); //http응답 전체가 담겨있다 데이터만 가져오기 위해서는 .json() 또는 .text() 메서드를 사용해야한다!
return res.json() //반드시 return해줘야 다음 then으로 넘어가서 사용가능
})
.then((res)=>{
console.log(res) //data가 name키값을 가진 배열로 저장되어 있다
console.log(res.name) //으로 접근하여 사용이 가능하다
])3. post작성 예시 + async/await
- 이벤트함수 앞에 async키워드를 작성한다
- await 키워드를 두번 작성한다. fetch메서드 앞에, response를 .json()으로 변환할때
const form
const data
//try~catch문 안에 작성합니다(있다고 치고 생략함)
const res = await fetch("/fetch", {
method: "post",
headers: {
"Content-Type": "application/json",
}
body: JSON.stringify(data)
})
//get의 경우와 마찬가지로 http응답 전체 정보를 담은 res를 .json()을 사용해 body의 데이터 정보만 가져올 수 있도록 하는 과정입니다!
const result = await res.json();
//고로 result는 data를 배열 형태로 가지고 있습니다
console.log(result.name) //으로 데이터에 접근합니다
//대충 아래에는 catch로 error발생시 내용 작성함JSON
- 위에서 등장하는 JSON이란 무엇일까?
- 자바스크립트의 객체와 유사한 형태의 '데이터 형식'을 의미한다(내장객체임:JSON)
- 문자열로 구성되어 컴퓨터와 사람 모두 이해하기 쉬운 장점이 있어 js외의 언어에서도 점차 사용되고 있다
- 키값을 "큰따옴표"안에 작성한다는 점만 객체와 다르다
- 객체와 JSON문자열을 변환할 수 있는 메서드를 제공한다(JSON.메서드())
- JSON.parse(): json문자열을 객체로 변환한다
- JSON.stringify(): 객체를 JSON문자열로 변환한다 즉 fetch는 객체 data를 JSON형태로 변환하여 서버로 전달하는 것이다
//JSON생성
//개행처리하려면 백틱 ``써야함
const jsonOBJ = `{
"name": "주희",
"age": 23,
"parents": ["엄마", "아빠"]
//맨끝에 콤마 넣지마셈 오류났음ㅠㅠ
}`
console.log(jsonOBJ); //문자열이 출력됨
console.log(typeof jsonOBJ); //string문자열 타입으로 나옴
console.log(jsonOBJ.name); //객체가 아니기 때문에 undefined가 뜬다
//객체로 바꿔보기!
const objOBJ = JSON.parse(jsonOBJ);
console.log(objOBJ); //객체 전체가 출력됨(json과 구분 어렵)
console.log(typeof objOBJ); //object타입으로 나옴
console.log(objOBJ.name); //객체기 때문에 주희라는 값이 출력된다추가로 배워보기
- submit이 아닌 상황에서 유효성 검사 방법 chechValidity()
//form객체를 forms.name으로 받아온 상태라고 가정
console.log(form.name.checkValidity());
//값이 입력되지 않았을 경우 false를 반환한다
if(!form.name.checkValidity()) {
// !false->true 입력되지 않았을 때 실행할 내용 작성 가능
//내용을 적을 곳이 resultBox변수로 만들어져있다고 가정
resultBox.textContent = form.name.validationMessage; //기본제공되는 문자열 사용가능 혹은 textContent에 하고싶은 내용 적기도 당연히 가능
} else if(!form.gender[1].checkValidity()) {
//radio타입의 경우 [인덱스]하나만 선택해서 if문을 적어도 알아서 하나 선택으로 작성된다. 똑똑한 녀석
}- chechbox타입의 데이터를 비동기적으로 보내는 방법: 새로운 배열을 생성한다(checked)
//배열로 체크박스를 모두 가져온다
const hobby = document.querySelectorAll("input[type='checkbox']");
//체크된 내용을 적을 새로운 배열을 생성한다
const chkHobby = [];
//hobby의 모든 인덱스를 체크한다
for(let i; i<=hobby.length; i++) {
//hobby가 체크되어있을 경우 true를 반환하여 해당 value가 chkHobby의 값으로 저장된다
if(hobby[i].checked) {
//꼭 value값을 넣어주어야해!!!!
chkHobby[i] = hobby[i].value;
}
}
//이후 data 정의시 hobby로 위의 새로운 배열을 넣어주면 끝이다
const data = {
id: form.id.value,
pw: form.pw.value,
hobby: chkHobby,
}
