frontend에서 사용되는 기능인데
보통 HTML에서 script안에 작정하는 부분인 AJAX
로 FormData
를 보내는 과정을 할아보자.
ajax(Asynchronous Javascript And XML)는 비동기 웹 서비스 개발 시 사용하는 기법 중 하나인데,
XML을 무조건 사용하진 않고, 요즘에 JSON도 사용한다.
이 친구는 페이지 이동 안하고 서버에 요청 보내고 응답받는다.
ajax는 보통 jQuery나 axios같은 라이브러리를 사용해서 보낸다.
브라우저에서 기본적으로는 fetch를 제공하긴 하는데, 이거는 좀 복잡하고 서버에서는 사용이 불가능해서(되긴하는데 아직은...) 오늘은 axios를 사용해보자.
일단 라이브러리를 추가한다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
여기에 코드 작성
</script>
이런식으로 사용해서 쓰면 된다.
axios
.get("url")
.then((result) => {
console.log(result);
console.log(result.data);
})
.catch((err) => {
console.error(err);
});
axios는 기본적으로 위처럼 사용하면 된다.
axios.get도 그 안에 Promise가 있으니까 then
catch
가 사용 가능하고,
result.data
에 요청하고 받아온 데이터가 들어있다.
Promise
니까 async
/await
또한 가능하다.
아래코드는 익명함수라서 즉시 실행하려고 ()감싼거임
(async () => {
try {
const result = await axios.get("url");
console.log(result);
console.log(result.data);
} catch (error) {
console.error(error);
}
})();
POST요청으로 데이터를 보내기
(async () => {
try {
const result = await axios.post("url", {
name: 'duhoduho',
birth: 1999,
});
console.log(result.data);
} catch (error) {
console.error(error);
}
})();
GET
이랑 거의 유사한데, 두번째 인수에 데이터를 넣어야한다.
axios.post
이런식으로 사용하면 된다.
HTML form 태그를 쓸 때, 데이터를 동적 제어할 수 있는 기능이다.
ajax랑 같이 많이 쓴다.
FormData
생성자로 객체를 만들면서 시작한다.
const formData = new FormData();
append(key, value)
: 를 이용해서 키와 값을 집어 넣을 수 있다.formData.append("name", "jangdu");
formData.append("color", "black");
formData.append("color", "red");
has(key)
: 키에 값이 있는지 true, falseformData.has("color"); // true
formData.has("item"); // false
get(key)
: 키에 해당하는 value리턴 하나getAll(key)
: 키에 해당하는 value 전부 리턴formData.get("color"); // black
formData.getAll("color"); // ['black', 'red']
// get으로 배열도 집어 넣을 수 있음
formData.append("test", ["jang", "du", "hyeok"]);
formData.get("test"); // jang, du, hyeok
delete(key)
: 삭제set(key, value)
: 수정formData.delete("test");
formData.set("color", "blue");
formData.getAll("color"); // ['blue']
위 방식에 맞춰서 FormData를 만들고 axios
같은거로 전송하면 됨
axios로 POST 요청 보내보면,
(async () => {
try {
const formData = new FormData();
formData.append('name', 'jangdu');
formData.append('birth', 1999);
const result = await axios.post("url", formData);
console.log(result.data);
} catch (error) {
console.error(error);
}
})();
위의 코드처럼 보내면 된다.
HTML에서 form을 이용해서 하면 굉장히 손쉽게 요청할 수 있다.
axios같은 ajax요청을 보내다보면 한글같은게 들어가기도 한다.
서버에 따라서 한글같은거 못받을 수도 있음
이럴 때 window객체 메서드 쓰면 됨
encodeURIComponent
: window
객체 메서드인데 이거 한글 부분에 감싸면 됨
(async () => {
try {
const formData = new FormData();
formData.append('name', 'jangdu');
formData.append('birth', 1999);
const result = await axios.post(`url/${encodeURIComponent('장두혁')}`, formData);
console.log(result.data);
} catch (error) {
console.error(error);
}
})();
이런식으로 하면됨
그러면 %EC%9E%A5%EB%91%90%ED%98%81
이렇게 바뀌어서 들어간다.
이런거 받는 데에서 다시 decodeURIComponent
로 받으면 된다.
decodeURIComponent('%EC%9E%A5%EB%91%90%ED%98%81') // 장두혁
이런식으로 한글 처리하는 용도로 이 메서드 자주 씀
노드에서 웹 서버로서 클라이언트와 데이터를 주고받을 때,
서버에서 보낸 데이터를 어디에 보관해야할까?
데이터 속성은 보통 HTML과 관련 데이터를 저장하는 국룰이다.
<ul>
<li data-id='1' data-user-name='duho'>jang</li>
<li data-id='2' data-user-name='du'>jang</li>
<li data-id='3' data-user-name='hyeok'>jang</li>
</ul>
<scritp>
console.log(document.auerySelector('li').dataset);
// { id: '1', user-name: 'duho' }
</script>
이런식으로 작성하는데, 서버에서 가져온 거 data-로 시작하는 이름에 넣는다.
이게 데이터 속성임 ㅇㅇ
이거 써서 서버에 요청 보내면 된다.
데이터 속성 장점은 js로 쉽게 접근이 가능한데,
dataset으로 출력해보면 data-
이게 사라지고 id
name
이렇게 표시된다.
반대로도 적용할 수 있음
dataset.user-job = 'devloper'
이렇게 하면
태그에 data-user-job='developer
속성 생김