JavaScript

[JavaScript] - AJAX / sort,map,filter / 웹스토리지 / switch ~ case

nam_ji 2023. 12. 13. 13:17

자바스크립트 (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의 장점
    1. 웹페이지의 속도가 향상됩니다.
    2. 서버의 처리가 완료될 떄까지 기다리지 않고 처리가 가능합니다.
    3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듭니다.
    4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해줍니다. (Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있습니다.)
  • AJAX의 단점
    1. 히스토리 관리가 되지 않습니다.
    2. 페이지 이동없는 통신으로 인한 보안상의 문제가 있습니다.
    3. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있습니다.
    4. XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않습니다.
      (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 됩니다.)
    5. AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있습니다.
    6. HTTP 클라이언트의 기능이 한정되어 있습니다.
    7. 지원하는 Charset이 한정되어 있습니다.
    8. Script로 작성되므로 디버깅이 용이하지 않습니다.
    9. 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능합니다. (Cross-Domain 문제)
  • AJAX의 진행과정
    1. XMLHttpRequest Object를 만듭니다.
      • Request를 보낼 준비를 브라우저에게 시키는 과정입니다.
      • 이것을 위해서 필요한 Method를 갖춘 Object가 필요합니다.
    2. Callback 함수를 만듭니다.
      • 서버에서 Response가 왔을 때 실행시키는 함수입니다.
      • HTML 페이지를 업데이트 합니다.
    3. Open a Request
      • 서버에서 Response가 왔을 때 실행시키는 함수입니다.
      • HTML 페이지를 업데이트 합니다.
    4. 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>