엘리스 SW 엔지니어 트랙 18일차
이고잉님 실시간 강의날
16일차 싱글어플리케이션 복습으로 시작
오늘은 만든 내용을 저장하는
백엔드로 들어간다
프론트엔드
웹 서버에 index.html 등 저장하지만
해석은 클라이언트 브라우저가 한다
클라이언트 사이드 기술
= 프론트엔드
백엔드
일반 웹 서버는 동작이 정해져있지만,
커스텀 웹 서버는 모든일을 할 수 있다
이 커스텀 웹서버는
python, php, node.js, spring 등으로 만들고
DB와 소통한다
서버 사이트 기술
= 백엔드
이번주는 백엔드가 주체
웹 서버가 클라이언트에 응답하는 주체가
Json, xml, csv
요즘은 Json이 압도적으로 우세
fetch가 대박
꼭 알아야겠군
이 코드는 꼭 이해하자
fetch('/topics')
.then(function(type){
return type.json();
})
.then(function(result){
var str = '';
for(var i=0; i<result.length; i++){
var r = result[i];
str = str + `<li><a onclick="
selected_id = ${r.id}
topicClickHandler(${r.id});
" href="/create/${r.title}">${r.title}</a></li>`;
}
document.querySelector('ul').innerHTML = str;
});
JSON
자바스크립트의 객체를 본따서 만든것
그래서 자바스크립트 객체와 판박이
JSON을 가져오면 텍스트를 받아온다
이 것을 변형해서 사용한다
PHP, python 등 다른 언어는
가져가서 JSON 형태를
각 언어 타입으로 변경해서 사용한다
서버와 통신
다른 일을 할 수 없다
이걸 Synchronous 동기
그래서 필요한게 Asynchronous 비동기
서버에서 가져올 때
옛날 방식
XMLHttpRequest()
<html>
<body>
<script>
function fill_name(){
var request = new XMLHttpRequest();
request.open('GET', 'https://gorest.co.in/public/v1/users', true);
request.onload = function(e){
let text = request.responseText;
let obj = JSON.parse(text);
console.log('obj', obj.data[0].name);
document.querySelector('#name').value = obj.data[0].name;
}
request.send(null);
console.log('finish');
}
</script>
<p><input type="text" id="name">
<input type="button" value="fill name" onclick="fill_name();">
</p>
<p>
<textarea>
</textarea>
</p>
</body>
</html>
요즘방식
fetch()
자바스크립트 타입으로 전환하는게 내장
function 데이터타입결정자(타입) {
return 타입.json() // 내장된 타입 변경하는 메소드
}
function 데이터처리자(결과값){
console.log(결과값)
}
fetch('https://gorest.co.in/public/v1/users')
.then(데이터타입결정자)
.then(데이터처리자)
fetch를 사용할 때 .then을 두 번 사용한다고 생각하면된다
- 첫 번째 then은 가져온 데이터의 타입을 정해주고
- 두 번째 then은 결과값을 가져오고
가져올 때, 보낼 때 둘다 fetch 사용한다
가져올 때는 GET(기본값 GET)
보낼 때는 POST(서버에 따라 다르다)
GET, POST 방식은 서버를 만든사람이 정해놓은것
그거에 따라 맞춰 사용하면 된다
서버에서 가져올 때는
.json()
json으로 바꿔준다는 내용
.text()
text로 바꿔준다
서버로 보낼 때
text로 바꿔줘야된다
JSON.stringify() 사용
"내가 보낸거는 json이야"라고 말해줘야된다
fetch 이용 POST 방식 보내기
fetch('/topics', {
method:'POST',
//텍스트로 바꿔줘야 된다.
body:JSON.stringify({title:'html', body:'html is ..'}),
// 내가 보낸건 json이야~ 라고 서버에게 말해주는 것
headers: {
'Content-Type': 'application/json'
}})
막히면 이거 보고 CRUD 따라하자
이고잉님 예시 링크 => https://github.com/egoingsb/offline/wiki/JavaScript---ajax
await / async
Promoise를 받아올 때 await 사용할 수 있다
사용하는 이유는
우리가 사용하는게 Promise일 경우
콜백을 중복을 사용하면 코드가 어지러우니까
await로 코드를 간결하게 만들어준다
awiat로 간결하게 만들어 주었다면
함수 앞에 async 키워드를 넣어줘야된다
async를 담은 함수 안에서만 작동한다
'Web Dev > ELICE' 카테고리의 다른 글
| 20 :: Ajax, Axios, 코드 입력 기계 (0) | 2021.11.20 |
|---|---|
| 19 :: HTTP, REST API, Fetch API (0) | 2021.11.19 |
| 17 :: 비동기, Promise 예시 (0) | 2021.11.17 |
| 16 :: 리팩토링, url 바꾸기, 싱글 페이지 어플리케이션, Promise (0) | 2021.11.16 |
| 15 :: node.js 개념, Hoisting, 내장객체, FormData (0) | 2021.11.13 |