ajax는 서버와 데이터주고받는 법 중 하나인데
서버가 뭔지 모르면 아무리 ajax 문법 외워봤자 응용을 못하기 때문에 서버가 뭔지 정리부터합시다.
서버란?
유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.
네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램
유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램
입니다.
근데 그냥 데이터달라고 떼쓰면 주는게 아니라
서버에 데이터를 요청할 때는
1. 어떤 데이터인지 url로 잘 기재해야하고
2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)
데이터를 보내줍니다.
예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=783054 여기로 GET요청하면 보내줍니다.
예를 들어서 독립일기라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=748105 여기로 GET요청하면 보내줍니다.
GET/POST 요청하는 법?
GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용하고
POST요청은 서버로 데이터를 보내고 싶을 때 사용합니다.
(서버는 유저데이터를 DB에 저장해주는 역할도 해서요)
실은 PUT, DELETE 요청도 있긴 합니다.
GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창입니다.
거기에 url 적으면 그 곳으로 GET요청을 날려줍니다.
진짠지 테스트해보셈
POST요청을 날리고 싶으면
<form action="요청할url" method="post"> 태그 이용하면 됩니다.
그럼 폼이 전송되었을 때 POST요청을 날려줍니다.
근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침됩니다.
AJAX란?
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 합니다.
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고
그런 기능을 만들 수 있는 것임
jQuery로 AJAX요청하기
$.get() 라는 함수를 쓰고 안에 url만 잘 기입하면 됩니다.
연습삼아서 https://codingapple1.github.io/hello.txt 여기로 GET요청해보십시오.
그럼 인삿말을 하나 가져올 수 있습니다.
$.get('https://codingapple1.github.io/hello.txt');
이러면 진짜 데이터 가져옵니다.
안되면 html파일 미리보기가 제대로 안떠있는 것입니다.
브라우저 주소창에 127.0.0.1:어쩌구 이렇게 떠있어야합니다.
VScode는 live server 익스텐션 설치하면 됩니다.
$.get('https://codingapple1.github.io/hello.txt').done(function(data){
console.log(data)
});
근데 가져온 데이터가 어디 들어있냐면
.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터 하나 만들면 거기에 들어있습니다.
진짜 인삿말 들어있는지 출력해봅시다.
$.post('url~~', {name : 'kim'})
서버로 데이터를 보낼 수 있는 POST요청을 날리고 싶으면 이렇게 씁니다.
url 잘 적고 뒤에 서버로 보낼 데이터를 적으면 됩니다.
당연히 얘도 .done 이런거 붙이기 가능
$.get('https://codingapple1.github.io/hello.txt')
.done(function(data){
console.log(data)
})
.fail(function(error){
console.log('실패함')
});
ajax 요청 성공시 .done 안에 있는 코드를 실행해줍니다.
ajax 요청 실패시 .fail 안에 있는 코드를 실행해줍니다.
error 저거 출력해보면 에러관련 정보를 출력해줍니다. 그거 보고 디버깅하면 됩니다.
예를 들어 404 이런 에러코드는 url 이 잘못되었다는 뜻입니다.
done/fail 말고 then/catch 써도 됩니다.
Q. 다음 url로 GET요청을 해서 가격정보를 가져와 콘솔창에 출력해보십시오.
https://codingapple1.github.io/price.json 여기로 GET요청하면 오늘의 상품가격을 알려줍니다.
콘솔창에 5000이 뜨면 성공이고 쉬우니 답은 없고 알아서 해봅시다.
쌩자바스크립트는 fetch 이런거써서 AJAX 요청가능
fetch('https://codingapple1.github.io/price.json')
.then(res => res.json())
.then(function(data){
console.log(data)
})
.catch(function(error){
console.log('실패함')
});
fetch 함수는 Edge 브라우저 이상에서만 동작합니다.
근데 코드가 한 줄 더 필요한 이유가 뭐냐면
서버와 데이터를 주고받을 때는 문자만 주고받을 수 있습니다.
array, object 이런거 전송불가능
근데 아까 { price : 5000 } 이런 object 무리없이 받아왔죠?
어떻게 한거냐면 object를 JSON으로 바꿔서 전송해줘서 그렇습니다.
array 아니면 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 됩니다.
JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능합니다.
하지만
jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔줍니다.
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않습니다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가하면 됩니다.
그게 귀찮으면 jQuery나 axios 이런 라이브러리 설치하면 ajax가 약간 더 간편해집니다.
array 정렬하는 법
array 자료는 순서개념이 있다보니 정렬도 가능합니다.
그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데
숫자정렬은 이렇게 코드짜면 됩니다.
var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
return a - b
});
console.log(어레이);
이러면 숫자순으로 잘 출력됩니다.
근데 왜 저렇게 코드짜면 숫자순 정렬이 되는지 알고싶지 않습니까
코드 동작원리 이런걸 알면 나중에 응용도 쉽게 가능하기 때문에 sort() 동작원리를 알아봅시다.
어레이.sort(function(a, b){
return a - b
});
1. a, b는 array 안의 자료들입니다.
2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.
3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해줍니다.
4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줍니다.
이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것입니다.
예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남습니다.
4는 양수죠? 그러면 7을 3보다 오른쪽으로 보내줍니다.
그래서 숫자 오름차순 (123순) 정렬이 완성되는 것입니다.
Q. 그럼 array 안의 숫자 내림차순 (321순) 정렬은 어떻게 할까요?
어떻게 코드짜면 될까요
Q. 문자정렬과 문자역순정렬은 어떻게 할까요?
var 어레이 = ['다', '가', '나'];
이런 자료가 있을 때 가나다순, 다나가순 정렬은 각각 어떻게 할지도 고민해봅시다.
실은 오늘 숙제임
버튼누르면 products를 가격순 정렬해봅시다
우리가 계속 다루고 있는 var products 라는 array가 하나 있는데
[ { }, { }, { } ] 이렇게 생겼습니다.
안에 있는 { } 이것들을 가격 낮은순으로 정렬하려면 어떻게 코드를 짜야할까요?
sort 동작원리 잘 떠올리면 됩니다.
답인데 직접 뭐라도 해보고 눌러봅시다
products 자료는 정렬했는데 왜 html은 정렬안되는 것임?
컴퓨터는 시키는 것만 하는 노예일 뿐이라
컴퓨터에게 뭘 기대하면 안됩니다. 여러분이 html도 새로 만들라고 코드짜면 됩니다.
1. 가격순 정렬버튼 누르면
2. products 자료를 가격순으로 정렬해주세요
3. 지금 있는 카드 3개 지우고 products 갯수만큼 카드를 새로 만들어주세요
라고 코드짜면 실제로 상품목록이 정렬되는 모습도 확인할 수 있을듯요
var products = 생략;
$('#price').click(function(){
products.sort(function(a, b){
return a.price - b.price
});
$('.row').html('');
products.forEach((a, i)=>{
var 템플릿 =
`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>`;
$('.row').append(템플릿)
})
});
1. 그래서 id="price" 인 버튼 만들고
2. 누르면 products 자료 정렬하라고 했고
3. 상품목록 html 싹 비우고 새로 3개 넣으라고 했습니다. 데이터바인딩도 잘 했습니다.
이제 정렬버튼 누르면 상품3개가 잘 정렬됩니다.
array에 자주 쓰는 filter 함수
array 자료에서 원하는 자료만 필터링하고 싶으면 filter 함수를 씁니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return 조건식
});
1. a라고 작명한건 array 에 있던 데이터를 뜻하고
2. return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨줍니다.
3. 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a < 4
});
예를 들어 여러 숫자가 있는데 그 중에 4 미만인 것만 남기고 싶으면 이렇게 쓰면 됩니다.
새어레이 출력해보면 [2, 3] 이것만 들어있겠군요.
이런거 응용하면 쇼핑몰에서 "6만원 이하 상품만 보기" 이런 필터기능도 만들 수 있는 것입니다.
products라는 자료에서 6만원 이하만 필터하고 새로 html 생성하면 될 것 같군요
array에 자주 쓰는 map 함수
array 안의 자료들을 전부 변형하려면 map 함수를 씁니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return 수식같은거
});
1. a라고 작명한건 array 에 있던 데이터를 뜻하고
2. return 우측에 변경될 수식같은걸 넣으면 됩니다.
3. 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a * 4
});
예를 들어 array 안의 숫자들을 전부 4를 곱해주고 싶으면 이렇게 코드짜면 됩니다.
새어레이 출력해보면 [28, 12, 20, 8, 160] 이게 들어있겠군요.
이런거 응용하면 쇼핑몰에서 "달러 -> 원화로 변환하기" 이런 기능도 만들 수 있겠군요.
array 안에 있는 숫자들을 달러가격이라고 생각해봅시다. 이걸 전부 원화가격으로 변경하고 싶으면 어떻게하죠?
아마 map 써서 1000얼마 곱해주면 끝일듯요.
# filter
filter 같은 경우 원본의 자료를 변경 시켜서 return을 해주는 방법이 아니기 때문에 새로운 arr에 담아서 사용해야 한다.
but sort()는 원본을 수정을 시켜 버리기 떄문에 차이점을 꼭 잘 기억해둘것.
코린이
상당히 많이 어려워 보여 내가 응원 말고는 해줄 수 있는 게 없어서 참 슬프다 고생 끝에 낙이 오기를 기도해 화이팅 ♥︎