오늘의 주제
AJAX, array 정렬하기, Local Storage에 대해서 알아볼 것이다.
AJAX
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다.
GET 요청 : 서버에 있는 데이터를 읽고 싶을 때 주로 사용한다.
POST 요청 : 서버로 데이터를 보내고 싶을 때 사용한다.
jQuery로 AJAX 요청하기
$.get('어쩌고저쩌고url');정보를 가져올 url을 기입하면 된다. 물론 저 url에서 데이터를 제공해야 하지만, 나같은 경우는 코딩애플 강의에서 제공된 url을 사용했다.
저 url에서 정보를 가져왔다고 가정했을 때, 저 정보는 어디에 저장될까?
$.get('url').done(function(data){
console.log(data)
});저 정보를 가지고 오고 싶다면, get 함수 뒤에 done을 붙이고 콜백 함수에서 데이터를 가져올 수 있다.
$.post('url', {name : 'kim'})정보를 보내고 싶은 url을 작성하고, 뒤에 보낼 데이터를 작성하면 다음과 같이 POST가 가능하다.
상황에 따라 GET, POST가 실패할 경우가 있는데, 이런 경우 에러 메시지를 출력하고 싶다면
$.get('url')
.done(function(data){
console.log(data)
})
.fail(function(error){
console.log('실패함')
});array에 자주 사용하는 함수 3가지
array에 자주 사용하는 함수 sort, map, filter 함수의 사용법에 대해서 간단하게 알아보자
먼저 sort함수이다.
var array = [3,2,1,5,4]
array.sort(function(a,b){
return a - b
});다음과 같이 사용하며, return에서 어떻게 return해주냐에 따라서 오름, 내림 차순이 달라진다. 위 같이 a-b는 오름차순을 의미한다.
정확하게는
return 값이 양수면 a를 오른쪽으로 정렬해준다.
return 값이 음수면 b를 오른쪽으로 정렬해 준다.
그러므로 다음과 같이 오름차순으로 정렬이 완성된다.
내림차순은 어떻게 할까? 오름차순의 반대 정렬이니
return b - a같이 작성하면 오름차순으로 정렬할 수 있다.
다음은 filter 함수이다.
var array = [7,3,5,2,40]
var newarr = array.filter(function(a){
return a < 4
});위 코드는 저 array에서 4 미만인 값만 남기는 filter 함수를 나타낸 것이다. return에다가 조건식을 작성해 주면 저 조건에 filtering 된 array를 제공한다.
다음은 map 함수이다.
var array = [7,3,5,2,40]
var newarr = array.map(function(a){
return a*4
});return에 계산식을 작성해 array에 있는 모든 수에 4를 곱한다.
localStorage
크롬 개발자 도구를 열어 Application 탭을 열어 보면 구경할 수 있다.
key:value 형식으로 저장되어 있으며, 5MB정도의 양을 브라우저에 저장할 수 있다.
localStorage.setItem('이름', 'kim')
localStorage.getItem('이름')
localStorage.removeItem('이름')setItem은 자료를 localStorage에 저장, getItem은 자료를 localStorage에서 꺼내오고, removeItem은 localStorage에 저장된 자료를 삭제한다.
수정하려면 getItem으로 가져오고, 값을 고쳐준후 다시 setItem 해야한다.
array나 object도 저장할 수 있는데, 추가 과정이 필요하다.
var arr = [1,2,3];
localStorage.setItem('num', JSON.stringify(arr));array, object를 로컬스토리지에 그냥 저장하면 강제로 문자로 바꿔서 저장하므로, 자료가 깨질 수 있습니다. 그래서 JSON으로 바꾸면 문자 취급을 받기 때문에 깨지지 않고 localStorage에 저장할 수 있습니다.
var output = JSON.parse(localStorage.getItem('num'));다시 가져와서 사용할 경우에는 JSON으로 저장했기 때문에 JSON.parse를 이용해서 원래 형태로 변환하여 사용하면 됩니다.
마무리
javascript에서 AJAX, sort, map, filter, local Storage 를 끝으로 javascript 강의를 대략 다 들었다. 남은 실습 부분을 마무리 하고 바로 nodejs 공부로 넘어갈 예정이다. 낼 사랑니 뽑는데 안아팠으면 좋겠다...
