JavaScript
[JavaScript] - AJAX / sort,map,filter / 웹스토리지 / switch ~ case
by nam_ji
2023. 12. 13.
자바스크립트 (JavaScript) 기초
AJAX (Asynchronous JavaScript And XML)
- AJAX란
- 자바스크립트의 라이브러리 중 하나이며, Asynchronous JavaScript And XML(비동기식 자바스크립트와 xml)의 약자입니다.
- 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터 로드 기법이며 자바스크립트를 이용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.
- 자바스크립트를 통해서 서버에 데이터를 요청하는 것이라고 생각하면 됩니다.
- AJAX 사용을 가능하게 만드는 것들
- HTML
- DOM
- JavaScript
- XMLHttpRequest
- Etc
- AJAX로 할 수 있는 것
- AJAX 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있습니다.
- 클라이언트란
서버에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫습니다.
- 서버란
네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램을 말합니다. 서버는 일반적으로 사용자가 직접적으로 사용하지 않습니다.
- AJAX를 사용하는 이유
- 단순하게 WEB 화면에서 무언가 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있습니다.
- 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어 있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 Request를 하고 Response를 하며 페이지 전체를 갱신하게 됩니다. 하지만 이렇게 할 경우, 엄청난 자원 낭비와 시간 낭비를 초래할 것입니다.
- AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 Request합니다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다.
- AJAX의 장점
- 웹페이지의 속도가 향상됩니다.
- 서버의 처리가 완료될 떄까지 기다리지 않고 처리가 가능합니다.
- 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듭니다.
- 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해줍니다. (Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있습니다.)
- AJAX의 단점
- 히스토리 관리가 되지 않습니다.
- 페이지 이동없는 통신으로 인한 보안상의 문제가 있습니다.
- 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있습니다.
- XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않습니다.
(요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 됩니다.)
- AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있습니다.
- HTTP 클라이언트의 기능이 한정되어 있습니다.
- 지원하는 Charset이 한정되어 있습니다.
- Script로 작성되므로 디버깅이 용이하지 않습니다.
- 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능합니다. (Cross-Domain 문제)
- AJAX의 진행과정
- XMLHttpRequest Object를 만듭니다.
- Request를 보낼 준비를 브라우저에게 시키는 과정입니다.
- 이것을 위해서 필요한 Method를 갖춘 Object가 필요합니다.
- Callback 함수를 만듭니다.
- 서버에서 Response가 왔을 때 실행시키는 함수입니다.
- HTML 페이지를 업데이트 합니다.
- Open a Request
- 서버에서 Response가 왔을 때 실행시키는 함수입니다.
- HTML 페이지를 업데이트 합니다.
- Send the Request
- jQuery를 이용한 AJAX 기본 문법
<!doctype html>
<html lang="ko">
<head>
<meta charset = utf-8">
<title>ajax</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<!--서버란 간단하게 설명하면 데이터를 주고 받을 수 있게 하는 프로그램
1. 어떤 데이터를 요청할지
2. 어떤 방법으로 요청할지
-----------------------
1. 데이터 url
2. Get인지 Post인지
$.post('url') || $.get('url') 이렇게 작성
$.get('url').done(function(){}).fail(function(){})
제이쿼리.겟요청('url입력').요청성공시(함수대로실행(){}().실패할시(함수대로실행(){})
$.post('url', {key : value}).done(function(){}).fail(function(){})
제이쿼리.포스트요청('url입력', 보내고 싶은 값).요청성공시(함수대로실행(){}).실패시(함수대로실행(){})-->
<script>
$.get('url').done(function(data) {
console.log(data);
}).fail(function() {
console.log('실패함');
});
</script>
</body>
</html>
sort, map, filter
- sort() 함수란
- 배열의 요소를 정렬하는데 사용하는 함수입니다.
- sort()는 기본적으로 유니코드 값으로 정렬하기 때문에 원하는 정렬을 하기 위해서 조금 응용을 해야합니다.
- sort를 이용하여 오름차순과 내림차순을 할 수 있는 코드를 보여드리겠습니다.
-
var array = [7,3,5,2,40];
// 오름차순
array.sort(function(a, b) {
return a - b;
});
console.log(array);
// 내림차순
array.sort(function(a, b) {
return b - a;
});
console.log(array);
- sort 함수의 원리는 배열의 값을 비교할 수 있게 콜백 함수에 2개의 파라미터를 지정합니다.
- a - b를 했을 때 양수가 반환되면 a의 값이 오른쪽으로 b의 값이 왼쪽으로 정렬됩니다.
- a - b를 했을 때 0이 반환되면 순서를 바꾸지 않고 정렬됩니다.
- a - b를 했을 때 음수가 반환되면 a의 값이 왼쪽으로 b의 값이 오른쪽으로 정렬됩니다.
- 이걸 이용하여 b - a를 하게 되면 반대로 내림차순을 만들어 볼 수 있습니다.
- fliter() 함수란
- 배열의 요소를 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수입니다.
- 필터링된 배열을 반환합니다.
-
var array1 = [7,3,5,2,40];
var array2 = array1.filter(function(a) {
return a < 4;
});
console.log(array2);
- 필터함수는 필터링 된 데이터를 다른 배열에 담아서 반환해야 합니다.
- 배열에서 값을 가져올 수 있게 콜백 함수에 파라미터를 지정합니다.
- return문에 내가 필터링 하고 싶은 조건을 작성하면 새로 만든 배열에 담아서 출력해 볼 수 있습니다.
- map() 함수란
- 배열을 처리해서 새로운 배열로 반환하기 위한 함수입니다.
- map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(Mapping)하는 역할을 한다"라고 말합니다. 이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌습니다.
-
var array3 = [7,3,5,2,40];
var array4 = array3.map(function(a) {
return a * 4;
});
console.log(array4);
- map() 함수는 새로운 배열에 담아서 출력해야 합니다.
- 기존 배열에서 값을 가져오기 위해 콜백 함수에 파라미터를 지정합니다.
- return문에 파라미터를 이용하여 연산식을 작성하고
- 새롭게 지정한 배열을 출력해 보면 return문이 연산된 새 배열을 볼 수 있습니다.
웹스토리지
- 웹스토리지란
- 웹스토리지는 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장할 수 있도록 하는 기능입니다. HTML5에 도입된 새로운 기능입니다.
- 웹스토리지의 특징
- 키와 값의 쌍 형태로 데이터를 저장합니다.
- 서버에 전송되지 않아 서버에 부담이 가지 않습니다. (자바스크립트 내에서 수행)
- 필요한 경우메나 꺼내 쓰는 것이라 자동 전송의 위험성이 없습니다.
- 도메인 단위로 접근이 제한되는 특성을 가지고 있습니다.
즉, 다른 도메인은 요청해도 값을 주지 않습니다. (CSRF 안전)
- 5KB까지 데이터를 저장할 수 있습니다.
- 유효기간이 존재하지 않습니다.
- 문자형(String) 데이터 타입만 지원합니다.
- 웹스토리지의 종류
- 웹스토리지는 LocalStorage와 Session Storage 2가지로 각각의 고유한 특성을 가지고 있어 필요에 따라 선택적으로 사용하게 됩니다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드를 가지고 있습니다.
- 웹스토리지 공통 메소드
| 메소드 |
설명 |
| setItem (key, value) |
키-값 쌍을 보관합니다. |
| getItem(key) |
키에 해당하는 값을 받아옵니다. |
| removeItem(key) |
키에 해당하는 값을 삭제합니다. |
| clear() |
모든 것을 삭제합니다. |
| key(index) |
인덱스에 해당하는 키를 받아옵니다. |
| length |
저장된 항목의 개수를 가져옵니다. |
- 로컬스토리지 (Local Storage)
- window.localStorage 객체로 브라우저를 종료해도 유지되는 데이터입니다.
- 명시적으로 지우지 않는 한 영구적으로 저장됩니다.
- 도메인별로 생성되어, 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지 사용합니다.
- 지속적으로 필요한 정보를 저장할 때 사용합니다. (ex. 자동로그인)
- 확인하는 방법은 개발자 도구(F12)를 열고 application에 들어가면 확인할 수 있습니다.
- 기본문법
-
// localStorage
localStorage.setItem('이름', 'nam');
//저장
localStorage.getItem('이름'); // 저장된 자료 가져오기
localStorage.removeItem('이름'); // 저장된 자료 삭제하기
localStorage.setItem('num', [1,2,3]); // array는 강제로 문자로 바꿈
array를 localStorage에 저장하는 방법
var array = [1,2,3];
var newArr = JSON.stringify(array); // JSON 형태로 변환
localStorage.setItem('num1', newArr); // array를 깨지지 않고 원본을 유지해서 저장하는 방법;
var arr = localStorage.getItem('num1');
console.log(arr); // array가 아닌 문자이기 때문에 index로 꺼낼 수 없음
arr1 = JSON.parse(arr); // JSON으로 바뀐 array를 다시 array로 돌리는 방법
console.log(arr1[1]);
localStorage.removeItem('num'); // key값이 num을 localStorage에서 삭제
localStorage.removeItem('num1'); // key값이 num1을 localStorage에서 삭제
// localStorage에 저장된 데이터의 값을 수정하고 싶을 때는 따로 코드가 없기 때문에
// JSON형태를 원래의 형태로 바꾼 후
// 데이터 수정 후
// 다시 JSON 형태로 변환
- 세션스토리지 (Session Storage)
- window.sesstionStorage 객체로 탭/윈도우를 닫기 전까지 유지되는 데이터입니다.
- 탭 / 윈도우 단위로 세션스토리지 생성됩니다.
- window 객체와 동일한 유효 범위 및 생존 기간을 가집니다.
- 탭 / 윈도우를 닫을 시 데이터가 삭제됩니다.
- 같은 도메인이더라도 세션이 다르면 데이터에 접근할 수 없습니다.
- 독립적으로 작동 (다른 세션 스토리지와 서로 영향을 주지 않습니다.
- 잠시 동안 필요한 정보를 저장합니다.(ex. 입력 폼 저장, 일회성 로그인)
- 기본문법 (기본적인 작성법은 Local Storage와 동일합니다.)
-
// localStorage
localStorage.setItem('이름', 'nam');
//저장
localStorage.getItem('이름'); // 저장된 자료 가져오기
localStorage.removeItem('이름'); // 저장된 자료 삭제하기
localStorage.setItem('num', [1,2,3]); // array는 강제로 문자로 바꿈
array를 localStorage에 저장하는 방법
var array = [1,2,3];
var newArr = JSON.stringify(array); // JSON 형태로 변환
localStorage.setItem('num1', newArr); // array를 깨지지 않고 원본을 유지해서 저장하는 방법;
var arr = localStorage.getItem('num1');
console.log(arr); // array가 아닌 문자이기 때문에 index로 꺼낼 수 없음
arr1 = JSON.parse(arr); // JSON으로 바뀐 array를 다시 array로 돌리는 방법
console.log(arr1[1]);
localStorage.removeItem('num'); // key값이 num을 localStorage에서 삭제
localStorage.removeItem('num1'); // key값이 num1을 localStorage에서 삭제
// localStorage에 저장된 데이터의 값을 수정하고 싶을 때는 따로 코드가 없기 때문에
// JSON형태를 원래의 형태로 바꾼 후
// 데이터 수정 후
// 다시 JSON 형태로 변환
Switch ~ Case
- Switch 문이란
- if문과 삼항연산자와 같이 조건에 따라 동작을 수행하는 조건문입니다.
- if문은 참, 것짓으로 조건을 판별하지만 switch문은 다양한 상황(Case)에 따라 실행됩니다.
- 기본문법
-
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>switch</title>
</head>
<body>
<div id="switch">
<h4>밥</h4>
<button>돼지고기</button>
<button>소고기</button>
<button>오리고기</button>
</div>
<script>
document.querySelector('#switch').addEventListener('click',
(e) => {
switch (e.target.innerHTML) {
case '돼지고기' :
alert('돼지고기를 좋아하시네요');
break;
case '소고기' :
alert('소고기를 좋아하시네요');
break;
case '오리고기' :
alert('오리고기를 좋아하시네요');
break;
default :
alert('취향을 선택해 주세요');
break;
}
});
// switch 기본 문법
// switch (변수) {
// case 예상 변수 :
// 실행문;
// 실행문이 끝났으면 break;
// 내가 원하는 만큼 case를 추가하고
// 위 case에 아무것도 해당하지 않는다면 default 작성도 가능
// 만약 break가 없을 시 실행되는 case문 밑의 모든 case문이 다 실행됨
// break 중요
// }
//ex)
// let sum = 2 + 0;
// switch (sum) {
// case 1 :
// alert ('변수가 1이네요');
// break;
// case 2 :
// alert ('변수가 2네여');
// break;
// case 3 :
// alert ('변수가 3이네요');
// break;
// default :
// alert ('아무것도 해당되지 않아요');
// break;
// }
</script>
</body>
</html>
